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!!!
3
Answers
You can remove the
ListView, because you have already wrapped withSingleChildScrollView.You have to either use
ListVieworSingleChildScrollViewto achieve scroll effect.You need to remove fixed height from container
height: MediaQuery.of(context).size.height / 1.9,. Just useSingleChildScrollViewon Column and remove ListView widget.First of all you already gave height to the container i.e
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