I have implemented a text form field with validation, and it returns the error message but it gets displayed inside the text form field. Is there a way to show it outside the text form field?
Container(
alignment: Alignment.center,
margin: const EdgeInsets.symmetric(
horizontal: 20),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.1),
borderRadius: const BorderRadius.all(
Radius.circular(10))),
child: TextFormField(
autovalidateMode:
AutovalidateMode.onUserInteraction,
controller: _controller,
validator: validatePhone,
textAlignVertical: TextAlignVertical.center,
style: const TextStyle(
color: primaryText,
fontFamily: 'InterMedium',
fontSize: 15),
decoration: const InputDecoration(
counterText: '',
errorStyle: TextStyle(
fontFamily: 'InterMedium',
),
prefixIcon: Padding(
padding: EdgeInsets.only(
left: 20, right: 15),
child: Icon(
Icons.phone_android_rounded,
color: secondaryText,
),
),
hintText: 'Enter mobile number',
hintStyle: TextStyle(
fontFamily: 'InterMedium',
color: secondaryText,
),
border: InputBorder.none,
),
cursorColor: secondaryColor,
maxLines: 1,
maxLength: 10,
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
),
How it is now -
How I want it to look like -
Remove parent widget Container and add decoration property of TextFormField like below example !
TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
cursorColor: Colors.black,
validator: validator,
controller: controller,
keyboardType: TextInputType.phone,
style: const TextStyle(fontSize: 16, color: Colors.black, fontFamily: 'Helvetica', fontWeight: FontWeight.normal),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xff13367A)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xff13367A)),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xff13367A)),
),
hintText: hint)),
),
P.S :- If you want to add grey color in your TextFormField then you may use decoration: InputDecoration(fillColor: Colors.grey, filled: true) !
Related
I have the following issue.
I have a TextFormField where the user has to put some data (for example his email).
I am using a validator , but when the error raises from the TextFormField's validator, the error message and my TextFormField's values are not show properly.
Here is the code:
Container(
height: 60,
margin: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
border: Border.all(
color: const Color(0xFF59C48C),
width: 2.0,
style: BorderStyle.solid),
),
child: Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Center(
child: Container(
child: Image.asset("images/email.png",
width: 30, height: 30))),
const SizedBox(
width: 10,
),
Expanded(
child: Center(
child: TextFormField(
validator: (mail) =>
bloc.mailValidator(mail ?? "")
? null
: "Invalid Email",
obscureText: false,
controller: _emailController,
keyboardType:
TextInputType.emailAddress,
style: const TextStyle(
color: Colors.black),
decoration: const InputDecoration(
hintText: "Email",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 20,
),
labelStyle: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
),
),
]),
),
),
),
),
I would like to show the error beside the expanded TextFormField or on the border of it like the image below.
Thank you in advance!
Use OutlineInputBorder with label or labelText
decoration: const InputDecoration(
hintText: "Email",
labelText: "Email",
focusedBorder: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(),
errorBorder: OutlineInputBorder(),
disabledBorder: OutlineInputBorder(),
TextFormField(
autovalidateMode: AutovalidateMode.always,
validator: (mail) {
return "Enter dasdasd"; //handle the error text
},
obscureText: false,
keyboardType: TextInputType.emailAddress,
style: const TextStyle(color: Colors.black),
decoration: const InputDecoration(
hintText: "Email",
labelText: "Email",
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(),
errorBorder: OutlineInputBorder(),
disabledBorder: OutlineInputBorder(),
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 20,
),
),
),
I can align the hint text to the center with no issues, but when the user starts typing into the textbox, I can't seem to get it to align to the center.
When maxLines are set to 1, there isn't an issue, but when it is set to more than 1 (or to null in my case), then it seems to align to the top by default.
Screenshot1
Screenshot2
Is there any way to correct this?
Container(
width: screenWidth / 1.2,
height: 120,
padding:
EdgeInsets.symmetric(horizontal: 0),
child: TextField(
// autofocus: false,
controller: postText,
keyboardType: TextInputType.text,
maxLines: 10,
textAlign: TextAlign.center,
textAlignVertical:
TextAlignVertical.center,
style: TextStyle(
fontFamily: 'Michroma',
color: selectedFont,
fontSize: 12, // 12
),
decoration: InputDecoration(
hintText: '\n\nType away ! :\n\n\n',
hintStyle: TextStyle(
color: fontColour,
fontFamily: 'Michroma',
fontWeight: FontWeight.bold,
fontSize: 12,
),
filled: true,
fillColor: screenColour,
contentPadding: EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 10.0,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(20.0),
), // 32
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: borderColour,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
), // 32
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: borderColour,
width: 2.0,
),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
), // 32
),
),
),
),
You need to delete \n\n expression in front of the hint text value because \n provides us to switch to a new line.
In your case, you switch the line you in two times. That is why the hint text is not appearing where you type.
decoration: InputDecoration(
hintText: 'Type away ! :', <--- here
hintStyle: TextStyle(
color: fontColour,
fontFamily: 'Michroma',
fontWeight: FontWeight.bold,
fontSize: 12),
When you remove that expression, probably it will not be in the center. so you can center it by doing following;
child: TextField(
controller: postTextController,
keyboardType: TextInputType.multiline,
textAlign: TextAlign.center,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.center,
style: TextStyle(
fontFamily: 'Michroma',
fontSize: 12),
decoration: InputDecoration(
hintText: 'Type away ! :',
hintStyle: TextStyle(
fontFamily: 'Michroma',
fontWeight: FontWeight.bold,
fontSize: 12),
I would like to move the label text to the topLeft position.
From this, to this.
Code:
Container buildPendingPageTextField() {
return Container(
alignment: Alignment.topLeft,
width: MediaQuery.of(context).size.width,
child: TextField(
textAlign: TextAlign.start,
controller: attendanceBloc.refusedReasonController,
textInputAction: TextInputAction.done,
maxLines: 3,
minLines: 3,
scrollPhysics: ScrollPhysics(),
style: TextStyle(
height: 1,
fontSize: 15,
letterSpacing: -0.5,
),
decoration: InputDecoration(
errorText: attendanceBloc.error.value,
floatingLabelBehavior: FloatingLabelBehavior.never,
labelText: "Descreva aqui o motivo",
labelStyle: TextStyle(),
border: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 0.3,
),
),
),
),
);
}
I have tried aligment on the container. on the inputDecoration, and even on textStyle, no success.
alignLabelWithHint property
Typically set to true when the InputDecorator contains a multiline TextField (TextField.maxLines is null or > 1) to override the default behavior of aligning the label with the center of the TextField.
You should set alignLabelWithHint to true to override the default behavior of aligning the label with the center:
decoration: InputDecoration(
errorText: attendanceBloc.error.value,
floatingLabelBehavior: FloatingLabelBehavior.never,
labelText: "Descreva aqui o motivo",
labelStyle: TextStyle(),
alignLabelWithHint: true, // Insert this line
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 0.3,
),
),
),
lableText shouldn't be used for such a situation,
instead, use hintText to do it with less code
decoration: InputDecoration(
hintText: 'Descreva aqui o motivo',
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 0.3,
),
),
),
I have form where I collect data from client in flutter.
At the last 3 fields I want add dropdown menu with different choice to be done by the customers.
But I cant find how to add dropdown menu choice to the form flutter.
this is the screen shot:
enter image description here
the part of the code interested is:
padding: const EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 193,
child: TextField(
keyboardType: TextInputType.number,
style: TextStyle(color: Colors.black,fontSize: 14),
decoration: InputDecoration(
labelText: '',
prefixIcon: Icon(Icons.arrow_drop_down,color: Color(0xFF1f2032),size: 17,),
hintStyle: TextStyle(color: Colors.grey),
hintText: '',
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 35.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
),
),
),
SizedBox(width: 10,),
Container(
width: 193,
child: TextField(
keyboardType: TextInputType.number,
style: TextStyle(color: Colors.black,fontSize: 14),
decoration: InputDecoration(
labelText: '',
prefixIcon: Icon(Icons.arrow_drop_down,color: Color(0xFF1f2032),size: 17,),
hintStyle: TextStyle(color: Colors.grey),
hintText: '',
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 35.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
),
),
),
SizedBox(width: 10,),
Container(
width: 193,
child: TextField(
keyboardType: TextInputType.number,
style: TextStyle(color: Colors.black,fontSize: 14),
decoration: InputDecoration(
labelText: '',
prefixIcon: Icon(Icons.arrow_drop_down,color: Color(0xFF1f2032),size: 17,),
hintStyle: TextStyle(color: Colors.grey),
hintText: '',
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 35.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
),
),
),
],
),
), ```
I need help aligning two TextFormFields beside each other in Flutter instead of one above the other
I have tried using padding but it does not work.
new TextFormField(
autovalidate: true,
keyboardType: TextInputType.numberWithOptions(),
controller: today,
//Reminder to write an if statement calling the controller
//The validator receives the text that the user has entered.
decoration: new InputDecoration(
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(5.0),
borderSide: new BorderSide()
),
labelText: 'Today', //Label is used so that the text can either float or remain in place
labelStyle: TextStyle(
fontFamily: 'Lato',
fontWeight: FontWeight.normal,
fontSize: 14.0,
color: Colors.grey,
),
),
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
),
SizedBox(height: 15.0),
new TextFormField(
autovalidate: true,
keyboardType: TextInputType.numberWithOptions(),
controller: tomorrow,
//Reminder to write an if statement calling the controller
//The validator receives the text that the user has entered.
decoration: new InputDecoration(
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(5.0),
borderSide: new BorderSide()
),
labelText: 'Tomorrow', //Label is used so that the text can either float or remain in place
labelStyle: TextStyle(
fontFamily: 'Lato',
fontWeight: FontWeight.normal,
fontSize: 14.0,
color: Colors.grey,
),
),
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
),
I expect the size of the forms to be smaller and aligned beside each other so that they can fit the screen.
Try using Row instead Column
Row(children: [
Expanded(
child: TextField(
decoration: InputDecoration(hintText: "TextField 1"),
),
),
SizedBox(
width: 20,
),
Expanded(
child: TextField(
decoration: InputDecoration(hintText: "TextField 2"),
),
)
])
More info here: https://medium.com/flutter-community/breaking-layouts-in-rows-and-columns-in-flutter-8ea1ce4c1316