'Flutter TextField Hint Text Not Align Center
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0)
),
color: Colors.white,
),
padding: EdgeInsets.only(left: 15.w, right: 15.w),
child: TextField(
maxLines: 1,
style: TextStyle(
fontSize: 12, //This line!!!!!!!!!
textBaseline: TextBaseline.alphabetic,
),
decoration: InputDecoration(
border: InputBorder.none,
hintText: configNotifier.translationObject["SearchOrder"],
hintStyle: TextStyle(
color: fromCSSColor("#808080"),
textBaseline: TextBaseline.alphabetic
),
),
),
)
Before I add "fontSize: 12"
After I add "fontSize: 12"
How to apply font size to textfield with vertical center alignment?
Remark: I've tried "textAlignVertical: TextAlignVertical.center" and hint->textstyle "height:1.0" which is not working
========Edit 1===========
IOS Device is work fine but not on Samsung Galaxy Tab A (8.0", 2019) which model is SM-T295C).
========Edit 2===========
With Parent Widget
Container(
margin: EdgeInsets.only(left: 70, right: 70),
height: 50.h,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0)
),
color: Colors.white,
),
padding: EdgeInsets.only(left: 15.w, right: 15.w),
child: TextField(
maxLines: 1,
style: TextStyle(
fontSize: 12, //This line!!!!!!!!!
textBaseline: TextBaseline.alphabetic,
),
decoration: InputDecoration(
border: InputBorder.none,
hintText: configNotifier.translationObject["SearchOrder"],
hintStyle: TextStyle(
color: fromCSSColor("#808080"),
textBaseline: TextBaseline.alphabetic
),
),
),
),
),
GestureDetector(
onTap: (){
//...
},
child: Container(
width: 100.w,
height: 50.h,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: fromCSSColor("#000000"),
),
child: Center(
child: Text(
"Submit",
style: TextStyle(
color: fromCSSColor("#000000"),
fontSize: 12
),
textAlign: TextAlign.center,
),
)
)
),
GestureDetector(
onTap: (){
//...
},
child: Container(
width: 65.w,
height: 50.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: fromCSSColor("#000000"),
),
child: Center(
child: Container(
width: 41.w,
height: 41.h,
alignment: Alignment.center,
child: Image.asset('assets/images/icon_scan_white.png', fit: BoxFit.contain),
),
),
)
)
],
)
)
Solution 1:[1]
Try to textalign.center in TextField like below
TextField(
textAlign : TextAlign.center,
),
your screen look like this- 
Solution 2:[2]
try contentPadding inside decoration. and dont need to use padding on Expanded Container.
import 'package:flutter/material.dart';
class CounterList extends StatefulWidget {
@override
_CounterListState createState() => _CounterListState();
}
class _CounterListState extends State<CounterList> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.red,
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
children: [
CustomField(
fontSize: 17,
),
SizedBox(
height: 22,
),
CustomField(
fontSize: 37,
),
SizedBox(
height: 20,
),
CustomField(
fontSize: 11,
),
SizedBox(
height: 20,
),
CustomField(
fontSize: 22,
),
],
),
));
}
}
class CustomField extends StatelessWidget {
final double fontSize;
CustomField({
Key? key,
required this.fontSize,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 70, right: 70),
height: 50,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0)),
color: Colors.white,
),
// padding: EdgeInsets.only(left: 15.w, right: 15.w),
child: TextField(
maxLines: 1,
style: TextStyle(
fontSize: fontSize, //This line!!!!!!!!!
textBaseline: TextBaseline.alphabetic,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 15, right: 15),
border: InputBorder.none,
hintText: "search",
// hintText: configNotifier.translationObject["SearchOrder"],
hintStyle: TextStyle(
// color: fromCSSColor("#808080"),
color: Colors.grey,
textBaseline: TextBaseline.alphabetic,
),
),
),
),
),
GestureDetector(
onTap: () {
//...
},
child: Container(
width: 100,
height: 50,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
// color: fromCSSColor("#000000"),
color: Colors.black,
),
child: Center(
child: Text(
"Submit",
style: TextStyle(
// color: fromCSSColor("#000000"),
color: Colors.black,
fontSize: 12,
),
textAlign: TextAlign.center,
),
))),
GestureDetector(
onTap: () {
//...
},
child: Container(
width: 65,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
// color: fromCSSColor("#000000"),
color: Colors.black,
),
child: Center(
child: Container(
width: 41,
height: 41,
alignment: Alignment.center,
child: Image.asset(
// 'assets/images/icon_scan_white.png',
"assets/me.jpg",
fit: BoxFit.contain,
),
),
),
))
],
));
}
}
Solution 3:[3]
Try it:
TextField(
textAlign : TextAlign.center,
textAlignVertical: TextAlignVertical.center,
),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Ravindra S. Patil |
| Solution 2 | |
| Solution 3 | M Karimi |