Flutter form in Container, when validator works Container comes too small for Form

Question

Im a new flutter developer, so please can u help me with this problem. The problem is when validator in TextFieldForm "works" it adds text that user did something wrong. And my Container is become to small for Form. I need to stretch the container or do something else to get better result. I dont know what should i do, please can u help me, for this.

here is my code:

body:Center(
      child:SingleChildScrollView(
        child:Column(
          children[ 
            Container(
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(217, 217, 217, 1),
                    borderRadius: BorderRadius.all(Radius.circular(20.0)),
                  ),
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height / 1.9,
                  // width: 350,
                  // height: 600,
                  child: Form(
                    key: _formKey,
                    child: ListView(
                      padding:
                          EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                      // itemExtent: 60,
                      children: [
                        TextFormField(
                          validator: _validateName,
                          controller: _nameController,
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.black,
                          ),
                          decoration: InputDecoration(
                            prefixIcon: Icon(
                              Icons.person,
                              color: Colors.grey,
                            ),
                            contentPadding: EdgeInsets.all(20),
                            filled: true,
                            fillColor: Colors.white,
                            hintText: 'Adyňyz',
                            hintStyle: TextStyle(
                              fontSize: 20,
                              color: Colors.grey.shade600,
                            ),
                            border: OutlineInputBorder(
                              borderSide: BorderSide.none,
                              borderRadius: BorderRadius.all(
                                Radius.circular(10),
                              ),
                            ),
                          ),
                        ),
                        SizedBox(height: 20),
                        TextFormField(
                          validator: _validatePassword,
                          controller: _passController,
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.black,
                          ),
                          obscureText: _hidePass,
                          decoration: InputDecoration(
                            prefixIcon: Icon(
                              Icons.shield,
                              color: Colors.grey,
                            ),
                            suffixIcon: IconButton(
                                color: Colors.black,
                                onPressed: () {
                                  setState(() {
                                    _hidePass = !_hidePass;
                                  });
                                },
                                icon: Icon(
                                  _hidePass
                                      ? Icons.visibility
                                      : Icons.visibility_off,
                                )),
                            contentPadding: EdgeInsets.all(20),
                            filled: true,
                            fillColor: Colors.white,
                            hintText: 'Parol',
                            hintStyle: TextStyle(
                              fontSize: 20,
                              color: Colors.grey.shade600,
                            ),
                            border: OutlineInputBorder(
                              borderSide: BorderSide.none,
                              borderRadius: BorderRadius.all(
                                Radius.circular(10),
                              ),
                            ),
                          ),
                        ),
                        SizedBox(height: 20),
                        TextFormField(
                          controller: _teamNameController,
                          validator: _validateTeam,
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.black,
                          ),
                          decoration: InputDecoration(
                            prefixIcon: Icon(Icons.people),
                            contentPadding: EdgeInsets.all(20),
                            filled: true,
                            fillColor: Colors.white,
                            hintText: 'Toparyň ady',
                            hintStyle: TextStyle(
                              fontSize: 20,
                              color: Colors.grey.shade600,
                            ),
                            border: OutlineInputBorder(
                              borderSide: BorderSide.none,
                              borderRadius: BorderRadius.all(
                                Radius.circular(10),
                              ),
                            ),
                          ),
                        ),
                        SizedBox(height: 20),
                        TextFormField(
                          controller: _phoneNumberController,
                          validator: _validatePhoneNumber,
                          keyboardType: TextInputType.number,
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.black,
                          ),
                          decoration: InputDecoration(
                            helperText: "+993-6#-######",
                            prefixIcon: Icon(Icons.call, color: Colors.grey),
                            contentPadding: EdgeInsets.all(20),
                            filled: true,
                            fillColor: Colors.white,
                            hintText: "Telefon nomeriňiz",
                            hintStyle: TextStyle(
                              fontSize: 20,
                              color: Colors.grey.shade600,
                            ),
                            border: OutlineInputBorder(
                              borderSide: BorderSide.none,
                              borderRadius: BorderRadius.all(
                                Radius.circular(10),
                              ),
                            ),
                          ),
                        ),
                        SizedBox(height: 20),
                        SizedBox(
                          height: 60,
                          child: ElevatedButton(
                            onPressed: () {
                              _submitButton();
                            },
                            child: Text(
                              "Register",
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                fontSize: 20,
                                color: Color.fromARGB(255, 255, 255, 255),
                              ),
                            ),
                            style: ButtonStyle(
                              shape: MaterialStateProperty.all(
                                RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10.0),
                                ),
                              ),
                              backgroundColor:
                                  MaterialStateProperty.all(Colors.black),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),],
),
),
),

Here is a first look : ,

and here is the problem:

,

This what am i talking about.

I dont have any idea about this. please guys, i need ur help. and thank u a lot!!!

Answer 1

You can remove the ListView, because you have already wrapped with SingleChildScrollView.

You have to either use ListView or SingleChildScrollView to achieve scroll effect.

Answer 2

You need to remove fixed height from container height: MediaQuery.of(context).size.height / 1.9,. Just use SingleChildScrollView on Column and remove ListView widget.

return Scaffold(
  body: Center(
    child: SingleChildScrollView(
      child: Container(
        decoration: BoxDecoration(
          color: Color.fromRGBO(217, 217, 217, 1),
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
        ),
        padding: EdgeInsets.all(20), //config
        width: MediaQuery.of(context).size.width,
        child: Form(
          // key: _formKey,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextFormField(
                // validator: _validateName,
                // controller: _nameController,
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
                decoration: InputDecoration(
                  prefixIcon: Icon(
                    Icons.person,
                    color: Colors.grey,
                  ),
                  contentPadding: EdgeInsets.all(20),
                  filled: true,
                  fillColor: Colors.white,
                  hintText: 'Adyňyz',
                  hintStyle: TextStyle(
                    fontSize: 20,
                    color: Colors.grey.shade600,
                  ),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(
                      Radius.circular(10),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20),
              TextFormField(
                // validator: _validatePassword,
                // controller: _passController,
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
                // obscureText: _hidePass,
                decoration: InputDecoration(
                  prefixIcon: Icon(
                    Icons.shield,
                    color: Colors.grey,
                  ),
                  // suffixIcon: IconButton(
                  //     color: Colors.black,
                  //     onPressed: () {
                  // setState(() {
                  //   _hidePass = !_hidePass;
                  // });
                  // },
                  // icon: Icon(
                  //   _hidePass
                  //       ? Icons.visibility
                  //       : Icons.visibility_off,
                  // )
                  // ),
                  contentPadding: EdgeInsets.all(20),
                  filled: true,
                  fillColor: Colors.white,
                  hintText: 'Parol',
                  hintStyle: TextStyle(
                    fontSize: 20,
                    color: Colors.grey.shade600,
                  ),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(
                      Radius.circular(10),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20),
              TextFormField(
                // controller: _teamNameController,
                // validator: _validateTeam,
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.people),
                  contentPadding: EdgeInsets.all(20),
                  filled: true,
                  fillColor: Colors.white,
                  hintText: 'Toparyň ady',
                  hintStyle: TextStyle(
                    fontSize: 20,
                    color: Colors.grey.shade600,
                  ),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(
                      Radius.circular(10),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20),
              TextFormField(
                // controller: _phoneNumberController,
                // validator: _validatePhoneNumber,
                keyboardType: TextInputType.number,
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
                decoration: InputDecoration(
                  helperText: "+993-6#-######",
                  prefixIcon: Icon(Icons.call, color: Colors.grey),
                  contentPadding: EdgeInsets.all(20),
                  filled: true,
                  fillColor: Colors.white,
                  hintText: "Telefon nomeriňiz",
                  hintStyle: TextStyle(
                    fontSize: 20,
                    color: Colors.grey.shade600,
                  ),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(
                      Radius.circular(10),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20),
              SizedBox(
                height: 60,
                child: ElevatedButton(
                  onPressed: () {
                    // _submitButton();
                  },
                  child: Text(
                    "Register",
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontSize: 20,
                      color: Color.fromARGB(255, 255, 255, 255),
                    ),
                  ),
                  style: ButtonStyle(
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                    ),
                    backgroundColor:
                        MaterialStateProperty.all(Colors.black),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
);

Answer 3

First of all you already gave height to the container i.e

height: MediaQuery.of(context).size.height / 1.9

at above code your container height is independent of the form validation and without showing any validation all the fields will show But when validation error occurs then error text will be shown which will takes additional height and here you are using Single child child scroll view but the container height is same as before without error text

So now the easiest way to solve this issue is

Remove container height parameter means don't set its height because container will automatically takes the size as much as its child. Now by doing this the container will automatically shrink when there is no error text and will automatically expand when there is error texts