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
Related
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 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) !
TextFormField has a hintText and a HelperText , but i can seem to find a way to align the helperText in center , this is my code :
child: Container(
child: TextFormField(
textAlign: TextAlign.center,
style: TextStyle(fontSize: 21),
decoration: InputDecoration(
hintText: "hint text",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: primaryColor)),
helperText: "THIS IS THE HELPER TEXT TO BE ALIGNED ",
helperStyle:
TextStyle(color: oASDC, fontSize: 15),
),
onChanged: (value) {
setState(() {.......});
},
),
),
is there a way to align the helper text in center?
You try this way:
https://i.stack.imgur.com/7LFJc.png
return TextFormField(
textAlign: TextAlign.center,
style: TextStyle(fontSize: 21),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 50, right: 50),
hintText: "hint text",
focusedBorder:
UnderlineInputBorder(borderSide: BorderSide(color: Colors.green)),
helperText: "THIS IS THE HELPER TEXT TO BE ALIGNED ",
helperStyle: TextStyle(
color: Colors.blue,
fontSize: 15,
),
),
);
From what I understand the position of the helperText is like the position of the errorText,
issue 1
issue 2
according to these issues, there seems to be no solution to this.
However, if you only need text , you can easily add Text widget below the TextFormField
like so:
Container(
child: Column(
children: [
TextFormField(
textAlign: TextAlign.center,
style: TextStyle(fontSize: 21),
decoration: InputDecoration(
hintText: "hint text",
focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: primaryColor),),
// helperText: "THIS IS THE HELPER TEXT TO BE ALIGNED ",
helperStyle: TextStyle(color: oASDC, fontSize: 15),
),
onChanged: (value) {
// setState(() {.......});
},
),
Text(
'THIS IS THE HELPER TEXT TO BE ALIGNED',
textAlign: TextAlign.center,
),
],
),
),
As far as I know, there is nothing conventional to align the helpertext.
Use contentPadding instead, not a proper way, but it's a day saver!
Container(
child: TextFormField(
textAlign: TextAlign.center,
style: TextStyle(fontSize: 21),
decoration: InputDecoration(
hintText: "hint text",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.yellow)),
helperText: "THIS IS THE HELPER TEXT TO BE ALIGNED ",
helperStyle: TextStyle(
color: Colors.red,
fontSize: 15,
),
contentPadding: EdgeInsets.symmetric(horizontal: 25)),
onChanged: (value) {
print(value);
},
),
),
I want to make TextField resizable vertically and I have one idea about that
Expanded(
child: TextField(
cursorColor: Colors.black,
decoration: new InputDecoration.collapsed(
// border: new OutlineInputBorder(
// borderSide: new BorderSide(color: hexToColor('#5c6277'),style: BorderStyle())
// ),
hintText: "El Baraka",hintStyle: TextStyle(fontFamily: 'RobotoLight',color: Colors.grey,fontSize: 16),
),
),
This can be achieved with maxLines: null:
TextField(
cursorColor: Colors.black,
decoration: new InputDecoration.collapsed(
hintText: "El Baraka",hintStyle: TextStyle(fontFamily: 'RobotoLight',color: Colors.grey,fontSize: 16),
),
maxLines: null,
)
Now TextField will add a new line when your text reaches the edge.
How do I center the value of the textfield (flutter). So that it always stays in the center no matter how big the word is? And also how do i remove the underline bar?
new Container(
alignment: Alignment(0.00 , 0.50),
child: new TextField(
style: new TextStyle(
fontSize: 40.0,
height: 2.0,
color: Colors.white
)
)
#Anton, have you tried textAlign: TextAlign.centerto center the text and decoration below to remove underline bar?
TextField(
textAlign: TextAlign.center,
style: new TextStyle(
fontSize: 22.0, fontWeight: FontWeight.bold),
decoration: new InputDecoration.collapsed(
hintText: "Name",
)
)
Screenshot:
Border can be removed by using inputBorder.none. TextAlign.center is used to set the text center but you have to use the inputDecoration.collapsed instead of inputDecoration.
TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration.collapsed(
hintText: "Enter Your Name",
border: InputBorder.none
)
),
You can use the decoration and the textAlign properties, try the next code:
TextField(
....
decoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
),
focusedBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white),
),
),
textAlign: TextAlign.center,
);