0

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,
                ),
              ],
            );
          },
        ),
      ),
    );
  }
Kyle92
  • 21
  • 1
  • this may be helpful: https://docs.flutter.dev/development/ui/layout/constraints – pskink Dec 08 '21 at 06:29
  • This solved it for me and I understand why it wasn't working: https://stackoverflow.com/questions/54225462/flutter-why-is-container-width-not-honoured – Kyle92 Dec 08 '21 at 06:57
  • this is exactly that they say in the link i posted: *"When someone learning Flutter asks you why some widget with width:100 isn’t 100 pixels wide, the default answer is to tell them to put that widget inside of a Center, right? Don’t do that. If you do, they’ll come back again and again, asking why some FittedBox isn’t working, why that Column is overflowing, or what IntrinsicWidth is supposed to be doing."* – pskink Dec 08 '21 at 07:01

0 Answers0