I am creating a Flutter app. i made the design like this.
My TextFormField form field for email and password heights are small. I want it to be the same size of the button.
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'sathyabaman#gmail.com',
style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
);
Whats the syntax for the height in text form field.
Just adjust the contentPadding in InputDecoration.
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'sathyabaman#gmail.com',
style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: const EdgeInsets.symmetric(vertical: 25.0, horizontal: 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
You can change the height by changing the minLines value just try this
TextFormField(
keyboardType: TextInputType.multiline,
controller: _opTextController,
decoration: InputDecoration(
isDense: true,
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)
)
),
maxLines: 5,
minLines: 3,
// controller: cpfcontroller,
)
Use these two lines to control TextFormField Height inside InputDecoration .
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),
Full example
Material(
elevation: 4,
shadowColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.only(left: 12),
child: TextFormField(
controller: searchProvider.searchController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: 'hintText',
isDense: true, // important line
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),// control your hints text size
hintStyle: TextStyle(letterSpacing: 2, color: Colors.black54, fontWeight: FontWeight.bold),
fillColor: Colors.white30 ,
filled: true,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none)),
),
),
),
Set the expands attribute on TextFormField to be true then put TextFormField into a SizedBox with a height
SizedBox(
height: 40.0,
child: TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
expands: true, // Setting this attribute to true does the trick
initialValue: 'sathyabaman#gmail.com',
style: TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
),
)
You can user this code to customized your TextFormField
new SizedBox(
width: 200.0,
height: 300.0,
child: const Card(child: const Text('Hello World!')),
)
There's another alternative to adding extra, permanent padding to cover the errorText — which would probably mess up many designer's original project.
You could create a modified version of the source's TextFormField.
To achieve just that, you can:
Copy-paste all of the content in the source's TextFormField.
Rename your custom TextFormField just so you avoid naming conflicts with the original.
You should probably also rename the internal state class.
In VS Code, you can use Ctrl + H to replace TextFormField for, say, TextFormFieldWithErrorTextOption.
Add another parameter to the TextFormField's constructor (below this line), say, errorTextPresent:
// `true` is the current implicit default, i.e., showing the `errorText`
bool errorTextPresent = true
Change the decoration's initialization for the internal TextField:
From:
decoration: effectiveDecoration.copyWith(field.errorText)
To:
decoration: effectiveDecoration.copyWith(
errorText: errorTextPresent ? field.errorText : null)
Then, you can use your new TextFormField similarly to how you use any TextFormField:
TextFormFieldWithErrorTextOption(
errorTextPresent: false, // `false` will disable the `errorText`
...
),
Screenshot:
Code:
You need to use a SizedBox and TextField.maxLines property.
#override
Widget build(BuildContext context) {
final height = 100.0;
return Scaffold(
body: SizedBox( // <--- SizedBox
height: height,
child: TextField(
cursorColor: Colors.red,
maxLines: height ~/ 20, // <--- maxLines
decoration: InputDecoration(
filled: true,
hintText: 'Hint text',
fillColor: Colors.grey,
),
),
),
);
}
just add a Container. Adjust the height of the Container as per Your requirement and make textformfield the child of the container.
If anyone's searching for a different solution to change its height, besides changing the Theme. You can use the decoration's constraints parameter:
decoration: const InputDecoration(
constraints: BoxConstraints(maxHeight: 50, minHeight: 50),
labelText: "Your Label")
Use a TextField or a TextFormField, add this parameters, maxLines. See code below:
final inputBorder =
OutlineInputBorder(borderSide: Divider.createBorderSide(context));
TextFormField(
controller: _myController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
constraints: const BoxConstraints.expand(
height: 300, width: 400
),
hintText: 'What is Your Question?',
border: inputBorder,
focusedBorder: inputBorder,
enabledBorder: inputBorder,
filled: true,
contentPadding: const EdgeInsets.all(8),
),
maxLength: 250,
maxLines: 50,
),
Expanded(
child: TextFormField(
controller: emailAddressController,
obscureText: false,
decoration: InputDecoration(
labelText: 'Email Address',
labelStyle: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF95A1AC),
fontSize: 14,
fontWeight: FontWeight.normal,
),
hintText: ' Enter your email here ...',
hintStyle: TextStyle(
fontFamily: 'Lexend Deca ',
color: Color(0xFF95A1AC),
fontSize: 14,
fontWeight: FontWeight.normal,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: Colors.white,
contentPadding:
EdgeInsetsDirectional.fromSTEB(
10, 10, 0, 10),
),
style: TextStyle(
fontFamily: ' Lexend Deca',
color: Color(0xFF2B343A),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
)
Related
I have an textfield but the problem is that the icon is still centered in the middel while the textfield is expanded. How can i make the icon go on the left site of the hint text (left top)?
TextFormField reusableTextField2(String text, IconData icon,TextEditingController controller) {
return TextFormField(
controller: controller,
cursorColor: Colors.white,
style: TextStyle(color: Colors.white.withOpacity(0.9)),
decoration: InputDecoration(
prefixIcon: Icon(
icon,
color: Colors.white70,
),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
contentPadding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
labelText: text,
labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
filled: true,
floatingLabelBehavior: FloatingLabelBehavior.never,
fillColor: Colors.white.withOpacity(0.3),
alignLabelWithHint: true,
),
maxLines: null,
minLines: 7,
);
}
You can wrap it with Stack widget, then set the icon separately, but so it gets aligned vertically the same as the TextFormField widget, give it a vertical padding same as the TextFormField's contentPadding. like this:
Widget reusableTextField2(
String text, IconData icon, TextEditingController controller) {
final verticalPadding = EdgeInsets.symmetric(vertical: 20);
return Stack(
children: <Widget>[
TextFormField(
controller: controller,
cursorColor: Colors.white,
style: TextStyle(color: Colors.white.withOpacity(0.9)),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
contentPadding:
verticalPadding + EdgeInsets.symmetric(horizontal: 20),
labelText: text,
labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
filled: true,
floatingLabelBehavior: FloatingLabelBehavior.never,
fillColor: Colors.black.withOpacity(0.3),
alignLabelWithHint: true,
),
maxLines: null,
minLines: 7,
),
Container(
padding: verticalPadding,
child: Icon(icon),
),
],
);
}
How to make text typed in TextField undeletable?
I am fairly new to programming, after looking around I thought that id takes my chances with asking here. I basically need textField like the picture.
Simple way to archive using dotted_border
Code
DottedBorder(
color: Colors.grey,
dashPattern: [2, 3, 2, 3],
strokeWidth: 1,
padding: EdgeInsets.all(20),
child: Text(
"Basic Maths",
)),
Make your text readOnly: true
DottedBorder(
color: Colors.black,
strokeWidth: 1,
child: Container(
decoration: BoxDecoration(
color: Colors.tealAccent,
),
child: TextField(
readOnly: true,
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 17),
hintText: 'Search your trips',
suffixIcon: Icon(Icons.search),
border: InputBorder.none,
contentPadding: EdgeInsets.all(20),
),
),
),
)
I'm having a weird problem with the sliders of a selected text in a textfield as in the image below, it's only occurring in this screen and not in the rest
The problem image
and this is the code of the Textfield:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Maiden Name :',
style: TextStyle(
fontSize: 16, color: Colors.grey.shade700),
),
Flexible(
child: SizedBox(
width: MediaQuery.of(context).size.width / 2,
height: 30,
child: TextField(
cursorColor: Colors.grey.shade700,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
decoration: new InputDecoration(
hintText:
'As per your official documents',
hintStyle: TextStyle(
color: Colors.grey.shade900,
fontSize: 10,
fontStyle: FontStyle.italic),
isDense: true,
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(),
),
),
controller: familyNameController,
),
),
),
],
I've found a solution for the problem,
fixed by adding
contentPadding: EdgeInsets.symmetric(vertical: 5),
to the InputDecoration in the textfield and by removing Flexible widget, so it becomes like this:
Container(
width: MediaQuery.of(context).size.width / 2,
height: 30,
child: TextField(
cursorColor: Colors.grey.shade700,
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 16),
textAlignVertical: TextAlignVertical.center,
decoration: new InputDecoration(
hintText:
'As per your official documents',
hintStyle: TextStyle(
color: Colors.grey.shade900,
fontSize: 10,
fontStyle: FontStyle.italic),
isDense: true,
//focusColor: Colors.black,
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 5),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(),
),
),
controller: surnameController,
),
),
I'm building a social networking app with Flutter and all the TextFields are very tall. I have tried adjusting the contentPadding parameter but it doesn't work. The problem goes away when I remove the inputDecoration (i.e. set it to null) but in that case I am unable to display any hint text.
I've also tried wrapping the TextField inside a Container and setting the height of the Container but that doesn't help either. It just distorts the entire TextField.
Use these two lines to control TextFormField Height inside InputDecoration .
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),
Full example
Material(
elevation: 4,
shadowColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.only(left: 12),
child: TextFormField(
controller: searchProvider.searchController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: 'hintText',
isDense: true, // important line
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),// control your hints text size
hintStyle: TextStyle(letterSpacing: 2, color: Colors.black54, fontWeight: FontWeight.bold),
fillColor: Colors.white30 ,
filled: true,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none)),
),
),
),
Try this ! This will decrease slightly !
TextField(
decoration: InputDecoration(
contentPadding:EdgeInsets.fromLTRB(10,0,10,0),
//The above line will help !
border: OutlineInputBorder(),
labelText: 'Name',
labelStyle:
TextStyle(color: Colors.white, fontSize: 17),
),
style: TextStyle(color: Colors.white, fontSize: 17),
),
Try this:
TextField(
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
hintText: Strings.settingGoodsTitle
)
)
I am new to Flutter Development & tried certain work around but nothing really helped. I want my text to be center vertically in TextFormField in flutter.
textAlign: TextAlign.start brings my text to left but I want them to be center vertically also.
textAlign: TextAlign.center brings my text to center but I want them to be start from left also.
This is what I am getting,
This is what I want,
Snippet of my code:
#override
Widget build(BuildContext context) {
return new Form(
key: _formKey,
child: new SingleChildScrollView(
child: new Theme(
data: new ThemeData(
primaryColor: const Color(0xFF102739),
accentColor: const Color(0xFF102739),
hintColor: const Color(0xFF102739)),
child: new Column(
children: <Widget>[
new TextFormField(
textAlign: TextAlign.center,
maxLines: 1,
autofocus: true,
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
color: const Color(0xFF0f2638),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.italic,
fontSize: 16.0),
decoration: new InputDecoration(
contentPadding: const EdgeInsets.only(
top: 8.0, bottom: 8.0, left: 10.0, right: 10.0),
hintText: "YOUR E-MAIL",
hintStyle: new TextStyle(
color: const Color(0x703D444E),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.italic,
fontSize: 16.0),
border: new UnderlineInputBorder(
borderSide: new BorderSide(
color: const Color(0xFF0f2638), width: 0.2))),
validator: _validateEmail,
),
],
),
)));
}
There is no vertical align option for that. All you need to do is to set contentPadding for positioning:
TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero
)
Screenshot
Use the following property:
TextFormField(
textAlignVertical: TextAlignVertical.center,
//Remaining code.
),
The way I did it using "alignment: Alignment.center," for Container with "InputDecoration.collapsed" & ".copyWith(isDense: true)":
Scaffold(
body: Container(
color: Colors.white,
width: double.infinity,
height: double.infinity,
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Container(
height: 50.0,
alignment: Alignment.center,
color: Colors.greenAccent,
child: TextFormField(
cursorColor: Colors.red,
decoration: InputDecoration.collapsed(
hintText: 'Search',
).copyWith(isDense: true),
),
),
),
),
),
),
So it worked perfecly for me:
TextFormField(
// setting text alignment
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
// decorating and styling your Text
isCollapsed: true,
contentPadding: EdgeInsets.zero,
),
),
TextFormField(
textAlign: TextAlign.center,
)
You can use decoration attribute like this:
decoration: InputDecoration(
isCollapsed: true,
isDense: true,
contentPadding: EdgeInsets.symmetric(horizontal: 5),
),