I don't understood what's happening, but when the form got erros the helper text message is moving the TextFormField. I tried increasing the height but I could not fix.
Anyone knows what's happening?
Look the image:
Follow the code:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.centerRight,
child: CountryCodePicker(
showFlagMain: true,
onChanged: print,
initialSelection:
I18n.of(context).locale.countryCode,
favorite: ['+55', 'BR'],
showCountryOnly: false,
showOnlyCountryWhenClosed: false,
textStyle: TextStyle(
color: Colors.white, fontSize: 19.0),
flagWidth: 40.0,
)),
Container(
width: 200,
alignment: Alignment.center,
child: TextFormField(
keyboardType: TextInputType.phone,
controller: _phoneTextController,
inputFormatters: [
MaskTextInputFormatter(
mask: "(##) #####-####",
filter: {"#": RegExp(r'[0-9]')})
],
autocorrect: false,
autofocus: false,
style: TextStyle(
color: Colors.white, fontSize: 19.3),
cursorColor: Colors.yellow,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: '(99) 99999-9999',
filled: true,
hintStyle: TextStyle(color: Colors.grey)),
validator: (String value) =>
phoneValidator(value),
))
],
),
SizedBox(height: 20),
RaisedButton(
child: Text('Send'),
onPressed: () {
if (this._form.currentState.validate()) {
print(this._unmask(this._phoneTextController.text));
}
},
)
],
Thanks.
Try to wrap the container in an expanded widget.
You can modify the crossAxisAlignment of your Row to CrossAxisAlignment.start and the TextFormField widgets will be aligned when showing error text. A sample of this is below.
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 250,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return '$firstName must not be empty.';
}
return null;
},
controller: firstNameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: firstName,
),
),
),
Container(
width: 250,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return '$lastName must not be empty.';
}
return null;
},
controller: lastNameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: lastName,
),
),
)
]),
),
Related
This is the design I want to make
This is my current design
I'm new to flutter. My question is how to make the text above the textformfield. I have searched on the internet and tried to do it but still no success. I don't know where else to go to solve my problem. I hope overflow is willing to help me.
This is my code:
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
SizedBox(
height: 100,
width: 100,
child: Text('First Name'),
),
SizedBox(
width: 200,
child: TextFormField(
style: TextStyle(color: Colors.black),
controller: firstName,
onSaved: (String? value) {
firstName.text = value!;
},
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16),
),
),
),
],
)
],
),
)
Your problem occurs because of wrong widget placement. Notice that you've Row inside a Column, but you don't really use Column's children in order to vertically place 'First Name' text widget.Also the row is basically redundant currently. You can make a Row of Columns I just shared below in order to achieve your desired UI. Try to play with it :)
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
height: 20,
width: 100,
child: Text('First Name'),
),
SizedBox(
width: 150,
child: TextFormField(
style: const TextStyle(color: Colors.black),
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(color: Colors.black, fontSize: 16),
),
),
)
],
),
200px is too big and structure I will prefer
Row
-Expanded
- Column (CrossAxisAlignment.startMainAxisSize.min,)
- Text
- TextFormField
-Expanded
- Column (CrossAxisAlignment.startMainAxisSize.min,)
- Text
- TextFormField
-Expanded
- Column (CrossAxisAlignment.startMainAxisSize.min,)
- Text
- TextFormField
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
children: [
filed(),
filed(),
filed(),
],
),
)
],
),
);
}
Expanded filed() {
return Expanded(
child: Padding(
padding: EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(bottom: 20),
child: Text('First Name'),
),
TextFormField(
style: TextStyle(color: Colors.black),
onSaved: (String? value) {},
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(color: Colors.black, fontSize: 16),
),
),
],
),
),
);
}
}
To create the TextField you want, you just need to use a Column like this:
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('First Name', style: TextStyle(fontWeight: FontWeight.bold),),
SizedBox(
width: 200,
child: TextFormField(
style: TextStyle(color: Colors.black),
onSaved: (String? value) {
// firstName.text = value!;
},
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(color: Colors.black, fontSize: 16),
),
),
)
],
)
The result is:
In the input decoration of TextFormField, use label instead of hintText.
decoration: InputDecoration(
border: OutlineInputBorder(),
label: Text('First Name',
style: TextStyle(color: Colors.black, fontSize: 16),),
),
List item
You use the the property 'Labletext' of TextFormFiled or TextField....
to give the above text of the textformFiled.
just use column widget first children is Text and second children as TextFormField.
I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels
I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels
Scaffold(
appBar: AppBar(
leading: SizedBox(
width: 16,
child: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Splash()),
);
}),
),
title: const Text(
"Upload KYC",
style: TextStyles.header4,
),
backgroundColor: ColorPalette.grey2,
elevation: 0,
),
backgroundColor: ColorPalette.grey2,
body: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 45.h(), left: 20.w(), right: 20.w(), bottom: 20.h()),
child: Row(
children: <Widget>[
Expanded(
child: Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"Personal Details",
style: TextStyles.subtitle04,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.azure,
)
],
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"ID Proof",
style: TextStyles.subtitle004,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.grey3,
)
],
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"Bank Details",
style: TextStyles.subtitle004,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.grey3,
)
],
),
),
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 30.h(),
),
const Text(
"Enter Your Details",
style: TextStyles.header002,
),
SizedBox(height: 50.h()),
// KYC form
Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Align(
alignment: Alignment.topLeft,
child: Text(
'First Name',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your First Name',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
validator: (val) {
if (val!.isEmpty) {
return 'Please fill in your name';
}
firstName = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Last Name',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your Last Name',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
validator: (val) {
if (val!.isEmpty) {
return 'Please complete your name';
}
lastName = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Email',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your Email Address',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
onChanged: (_) {
emailExists = false;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter an email address';
}
if (!Constants().emailFilter.hasMatch(val)) {
return 'Please enter a valid email';
}
if (emailExists) {
return 'A user with this email already exists';
}
email = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Phone Email',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: 'Enter Your Phone Number',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
validator: (val) {
if (val!.length < 11 || val.length > 11) {
return 'Phone Number should be 11';
}
phoneNumber = val;
},
),
],
)),
const Spacer(),
Padding(
padding: const EdgeInsets.only(bottom: 50),
child: ConstrainedBox(
constraints: const BoxConstraints.expand(height: 54),
child: Align(
alignment: Alignment.bottomCenter,
child: RoundedLoadingButton(
color: ColorPalette.blue1,
width: (MediaQuery.of(context).size.width - 40),
controller: _btnController,
borderRadius: 12,
elevation: 0,
animateOnTap: false,
onPressed: () => Navigator.of(context)
.pushReplacementNamed(KYCIDProofScreen.routeName),
child: const Text('Next'),
),
),
),
),
],
),
),
),
],
),
);
Column wrap with SingleChildScrollView it will solve the overflow issue
I have an authentication screen like this:
#override
Widget build(BuildContext context) {
final bottom = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Image.asset(
"assets/images/logo.png",
width: 132,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
AuthTextFormField(
icon: Icons.email_outlined,
labelText: 'Email',
keyboardType: TextInputType.emailAddress,
),
AuthTextFormField(
icon: Icons.lock_outline,
labelText: 'Password',
obscureText: true,
),
],
),
),
],
),
),
),
);
}
I have followed this answer, but it still did not work for me. The keyboard still covered the text field. Any idea?
Thank you.
[UPDATE]
I use the code written in the answer above (by Jay Jay). And, this is the screenshot:
Its covered like this:
This Code works fine for me, I have removed the image and added a Container on its place with some height.
Also I have made some changes to your Code,
Scaffold(
resizeToAvoidBottomPadding: true,
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Container(
color: Colors.blue,
height: 500,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.lock_outline),
labelText: 'Password'),
obscureText: true,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
],
),
),
],
),
),
),
);
After trying it out, I think you should just add a height to your image.asset or better use a Container and specify the image in its decoration property and give the container a fixed height. It should all work correctly.
Here my code which works:
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Container(
height: 300,
color: Colors.red,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
icon:Icon(Icons.email),
labelText: 'Email'
),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.lock_outline),
labelText: 'Password'
),
obscureText: true,
),
],
),
),
],
),
),
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.teal,
),
),
Center(
child: Card(
color: Colors.tealAccent[700],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Container(
height: 600,
width: 350,
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
//email
AppBar(
toolbarHeight: 30,
elevation: 00.0,
title: Text(
'Owner Registration ',
style: TextStyle(
fontSize: 25.0, fontWeight: FontWeight.bold),
),
centerTitle: true,
backgroundColor: Colors.transparent,
),
TextFormField(
maxLines: 1,
minLines: 1,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(5),
labelText: "Enter Email",
fillColor: Colors.white,
filled: true,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: new BorderSide(),
),
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value.isEmpty || !value.contains('#')) {
return 'invalid email';
}
return null;
},
),
//password
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
controller: _passwordController,
validator: (value) {
if (value.isEmpty || value.length <= 5) {
return 'invalid password';
}
return null;
},
),
//Confirm Password
TextFormField(
decoration:
InputDecoration(labelText: 'Confirm Password'),
obscureText: true,
validator: (value) {
if (value.isEmpty ||
value != _passwordController.text) {
return 'invalid password';
}
return null;
},
onSaved: (value) {},
),
SizedBox(
height: 30,
),
RaisedButton(
child: Text('Submit'),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
color: Colors.white,
textColor: Colors.teal,
)
],
),
),
),
),
),
),
],
),
);
}
}
https://i.stack.imgur.com/aj4zr.png
Put a SizedBox in between AppBar and TextFormField in Column.
Put a SizedBox (with no color or same color of background) in between AppBar and TextFormField in Column, As #Lee3 said.
or put :
mainAxisAlignment: MainAxisAlignment.spaceBetween, in your Column
you can put Padding(padding: EdgeInsets.symmetric(vertical: 10)), between the AppBar and TextFromField or as #Lee3 and #Rami Ahmed said, SizedBox with some height in there.
I'm trying to putting the country code before the phone number.
I usedcountry_pickers package but something gone wrong with my code,
my TextField's hintText visibility has gone, it's showing nothing
here is my widget
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: new Container(
padding: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
border: Border.all(color: Colors.blue)
),
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone Number",
prefix: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
},
),
),
onChanged: (value){
this.phoneNo=value;
},
),
),
),
here's widget method for country code
Widget _buildDropdownItem(Country country) => Container(
child: Row(
children: <Widget>[
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(
width: 8.0,
),
Text("+${country.phoneCode}(${country.isoCode})"),
],
),
);
The right way to use this is in Row widget. Prefix won't work here.
Row(
children: <Widget>[
Expanded(
child: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
},
),
),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone Number",
),
onChanged: (value) {
// this.phoneNo=value;
print(value);
},
),
),
],
),