I have given the textfield a custom height with a container around it. The icons are stlii in the middle but the text is not in the center of the textfield. Do somebody know a way to fix this problem?
Container(
height: 45,
child: TextFormField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.grey[100],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
hintText: 'Hint Text',
),
style: TextStyle(
fontSize: 18,
),
),
),
For horizontally centered hint text: The hint text aligns according to the TextFormField's textAlign, so adding textAlign: TextAlign.center to the TextFormField will center the hint text horizontally.
For vertically centered hint text: Add a contentPadding, e.g., contentPadding: EdgeInsets.symmetric(vertical: 2) to the TextField.
Container(
height: 45,
child: TextFormField(
textAlign: TextAlign.center, // this is new
decoration: InputDecoration(
filled: true,
contentPadding: EdgeInsets.symmetric(vertical: 2), // this is new
fillColor: Colors.grey[100],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
hintText: 'Hint Text',
),
style: TextStyle(
fontSize: 18,
),
),
),
Related
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'm attempting to center my labelText in a TextField, but I cannot get it to center for the life of me. Anyone see a glaringly obvious issue that would be causing this? Thanks!
Container(
width:
MediaQuery.of(context).size.width * .85,
height:
MediaQuery.of(context).size.height * .12,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.all(
Radius.circular(12))),
child: TextField(
textAlign: TextAlign.center,
controller: _notesEditingController,
obscureText: false,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 40.0),
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(12.0)),
),
labelText: 'notes',
labelStyle: TextStyle(
color: Color.fromRGBO(105, 105, 105, 10),
)),
),
),
Please try this, replace labelText and use hintText
Container(
child: TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: 'Center the text',
),
),
)
I am developing a mobile application using Flutter. I am having an issue with aligning the text field's placeholder text and its value vertically centered.
This is my code for TextField.
return Container(
color: Colors.black,
child: Padding(
padding: EdgeInsets.all(10),
child: TextField(
onChanged: (text) {
this.filter = text.toLowerCase();
this._refreshListItems();
},
style: TextStyle(
height: 0.5
),
cursorColor: Colors.black12,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.search, color: Colors.black26,),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
hintText: "Search",
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
)
);
However, when it is rendered, the placeholder and its value are getting a little bit to the top vertically as in the screenshots below.
What's wrong with my code and how can I fix it?
Using text style height to 0.5 is causing the text span to be half of the size of the font size. Remove it as don't think that will help you.
style: TextStyle(
height: 0.5
),
In order to handle content size you can play with contentPadding
decoration: InputDecoration(
contentPadding: EdgeInsets.all(1),
....
),
I used the following code and it is working
contentPadding: EdgeInsets.fromLTRB(0, 8, 0, 0),
if you set a custom height, try this.
Container(
height: 36,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 17),
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
filled: true,
prefixIcon:
Icon(Icons.search, color: Theme.of(context).iconTheme.color),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(30))),
fillColor: Theme.of(context).inputDecorationTheme.fillColor,
contentPadding: EdgeInsets.zero,
hintText: 'Search',
),
),
)
TextField widget works fine with less text but when i adding long text it starts to cut from bottom.
Without text.
With less text
Problem starts here with long text
My widget code.
Opacity(
opacity: 0.5600000023841858,
child: Container(
padding: EdgeInsets.only(left: 10),
width: 213,
height: 36,
decoration: BoxDecoration(
color: boxShadowCreamColor,
borderRadius: BorderRadius.circular(48),
boxShadow: [BoxShadow(color: boxShadowColor, offset: Offset(0, 0), blurRadius: 8, spreadRadius: 0)],
),
child: TextField(
keyboardType: TextInputType.text,
textAlign: TextAlign.left,
maxLines: 1,
textAlignVertical: TextAlignVertical.center,
style: TextStyle(color: Colors.white,fontSize: fontMedium,fontWeight: fontWeightRegular),
decoration: InputDecoration(
hintText: "Search",
border: InputBorder.none,
hintStyle: TextStyle(color: Colors.white,fontSize: fontMedium,fontWeight: fontWeightRegular),
suffixIcon: Icon(
Icons.search,
color: Colors.white,
),
),
),
),
);
Use isDense property inside decoration and set it to true, which should resolve your issue.
isDense property helps to take less vertical space.
decoration: InputDecoration(
isDense: true,
hintText: "Search",
border: InputBorder.none,
hintStyle: TextStyle(color: Colors.white),
suffixIcon: Icon(
Icons.search,
color: Colors.white,
),
),
It happens just because of your height which you have given your Container. Just increase that it will be fine for you.
try height: 42, // -- its because textfield shrink the size of Textfield when its growing.
OR
Add isDense: true // inside InputDecoration
I am trying to build a form with custom textfield height, i would like to make the textfield text and hit text to be center vertically. Here is my code
SizedBox(
height: 40,
child:
TextField(
style: TextStyle(
fontSize: 14,
),
textAlignVertical: TextAlignVertical.center,
textAlign: TextAlign.left,
maxLines: 1,
decoration: InputDecoration(
filled: true,
fillColor: Color(0xff5a9fd6).withOpacity(0.15),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff5a9fd6).withOpacity(1.0),
),
borderRadius: BorderRadius.circular(2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
),
borderRadius: BorderRadius.circular(1.0),
)
),
)
),
When i decrease the font size then the text is aligned vertically but i would like to use the font size as 14 and above.
Do not wrap the TextField from SizeBox to manage the height of the TextField. You can do this by using vertical contentPadding as follows. It keeps your text in the center.
TextField(
style: TextStyle(
fontSize: 14,
),
textAlignVertical: TextAlignVertical.center,
textAlign: TextAlign.left,
maxLines: 1,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 50, horizontal: 20),
filled: true,
fillColor: Color(0xff5a9fd6).withOpacity(0.15),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff5a9fd6).withOpacity(1.0),
),
borderRadius: BorderRadius.circular(2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
),
borderRadius: BorderRadius.circular(1.0),
)
),
),
You can set the contentPadding of the TextField as 0 or according to your requirement.
SizedBox(
height: 40,
child:
TextField(
style: TextStyle(
fontSize: 14,
),
textAlignVertical: TextAlignVertical.center,
textAlign: TextAlign.left,
maxLines: 1,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0),
filled: true,
fillColor: Color(0xff5a9fd6).withOpacity(0.15),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff5a9fd6).withOpacity(1.0),
),
borderRadius: BorderRadius.circular(2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
),
borderRadius: BorderRadius.circular(1.0),
)
),
)
),
You can to adjust contentPadding to center your text vertically, for example:
TextField(
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(<your value>),
)