I have a Form with custom form fields that needs to fit a container with a certain width and height. However, the form fields just stretch out the entire screen, ignoring the constraints set by my SizedBox(). How can I fix this? I'd appreciate your help.
CustomTextFormField:
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
fieldTitle,
style: _fieldTitleStyle(context),
),
_sizedBox(context),
TextFormField(
validator: validator,
autovalidateMode: AutovalidateMode.onUserInteraction,
keyboardType: textInputType,
onChanged: onChanged,
cursorColor: const Color(0xff4F607B),
obscureText: obscureText,
decoration: _inputDecoration(context),
),
],
);
}
FormContainer:
import 'package:flutter/material.dart';
class FormContainer extends StatelessWidget {
// ignore: use_key_in_widget_constructors
const FormContainer({required this.form});
final Form form;
@override
Widget build(BuildContext context) {
return Container(
width: 423.0,
height: 444.0,
child: form,
);
}
}
ParentFormInformation:
// TDOO: Decouple error handling from UI
@override
Widget build(BuildContext context) {
return FormContainer(
form: Form(
key: _formKey,
child: Consumer<ParentNotifier>(
builder: (_, notifier, __) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const MainTitle(
text: "Your Information",
),
_sizedBox(context),
CustomTextFormField(
onChanged: (String firstName) => _firstName = firstName,
validator: (String? firstName) {
if (firstName!.isEmpty) {
return "First name is required";
}
},
prefixIcon: _icon(context, FontAwesomeIcons.solidUser),
fieldTitle: "First name",
hintText: "i.e Jessica",
),
_sizedBox(context),
CustomTextFormField(
onChanged: (String lastName) => _lastName = lastName,
validator: (String? lastName) {
if (lastName!.isEmpty) {
return "Last name is required";
}
},
prefixIcon: _icon(context, FontAwesomeIcons.solidUser),
fieldTitle: "Last name",
hintText: "i.e Jessica",
),
_sizedBox(context),
CustomTextFormField(
onChanged: (String email) {
_email = email;
if (notifier.emailAlreadyExists != null) {
notifier.setFailure(null);
}
},
validator: (String? email) {
if (email!.isEmpty) {
return "Email is required";
} else if (!RegExp(
// Validated according to the HTML5 validation spec: https://html.spec.whatwg.org/multipage/input.html#e-mail-state-%28type=email%29
// Regex resouce: https://stackoverflow.com/questions/16800540/validate-email-address-in-dart (upvoted answer)
r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$',
).hasMatch(email)) {
return "Please enter a valid email";
} else if (notifier.emailAlreadyExists != null) {
return notifier.emailAlreadyExists;
}
},
prefixIcon: _icon(context, FontAwesomeIcons.solidEnvelope),
fieldTitle: "Email",
hintText: "i.e you@email.com",
textInputType: TextInputType.emailAddress,
),
_sizedBox(context),
CustomTextFormField(
onChanged: (String password) => _password = password,
validator: (String? password) {
if (password!.isEmpty) {
return "Password field cannot be emtpy";
} else if (!password.contains(RegExp(r'[A-Z]'))) {
return "Password must at least have one uppercase letter";
} else if (!password.contains(RegExp(r'[a-z]'))) {
return "Your password must contain at least one lowercase letter";
} else if (!password.contains(RegExp(r'[0-9]'))) {
return "Your password must contain at least one number";
} else if (!password.contains(RegExp(r'[!? *.]'))) {
return "Your password must at least contain one special character: !?*.";
} else if (password.length < 8) {
return "Password must be at least 8 characters long";
} else if (password.length > 20) {
return "Password cannot exceed more than 20 characters";
}
},
prefixIcon: _icon(context, FontAwesomeIcons.lock),
fieldTitle: "Password",
hintText: "8-20 characters",
obscureText: true,
),
_sizedBox(context),
SignUpFlowButton(
color: const Color(0xff4D61B5),
textColor: const Color(0xffFAFDFF),
width: 121.0,
height: 40.0,
onPressed: () => _createParent(context, notifier),
text: "Continue",
fontSize: 16.0,
),
],
);
},
),
),
);
}