Vertically Centre Align Text in TextField Flutter
Solution 1
I have solution for Single-line TextField. Placing TextField inside a Container with height property,(in my case, also width) and then giving a contentPadding value inside decoration with a value of height / 2.
Code is below:
Container(
height: textfieldDimension,
width: textfieldDimension,
alignment: Alignment.center,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
bottom: textfieldDimension / 2, // HERE THE IMPORTANT PART
)
),
// textAlignVertical: TextAlignVertical.center, THIS DOES NOT WORK
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10, // This is not so important
),
),
),
Solution 2
TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "Centered Hint",
),
)
Hope so that this will be helpful.
Solution 3
To align the vertically center text in the TextField. You can just set the contentPadding
of your TextField
into the EdgeInsets.zero
.
here is how to achieve this
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
hintText: "password",
),
)
Here is output
Solution 4
Please try to wrap by Column and add 'mainAxisAlignment' property with 'MainAxisAlignment.center'
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start, // If you want align text to left
children: <Widget>[
TextField(
textAlignVertical: TextAlignVertical.center,
textAlign: TextAlign.left,
maxLines: 1,
style: TextStyle(
fontSize: 13,
),
decoration: InputDecoration(
suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: (){}),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
)
),
),
],
),
)
Solution 5
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',
),
),
)
TheNoobDeveloper0299
Updated on July 09, 2022Comments
-
TheNoobDeveloper0299 almost 2 years
I tried finding in a lot of resources but unfortunately i could not find a way to align the text vertically centre in a textfield. I also tried using suffixIcon instead of suffix but still not luck. Here is my code :
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } class HomePage extends StatefulWidget { @override State<StatefulWidget> createState() { return _HomePageState(); } } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: Icon( Icons.menu, color: Colors.black, ), backgroundColor: Colors.white, title: Container( margin: EdgeInsets.only(bottom: 10), child: Image.asset( "icons/logo.png", ), ), bottom: PreferredSize( child: Padding( padding: EdgeInsets.only( left: 10, right: 10, bottom: 10, ), child: Container( height: 40, child: TextField( textAlignVertical: TextAlignVertical.center, textAlign: TextAlign.left, maxLines: 1, style: TextStyle( fontSize: 13, ), decoration: InputDecoration( suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: (){}), border: OutlineInputBorder( borderSide: BorderSide( color: Colors.black, ), borderRadius: BorderRadius.all(Radius.circular(15)), ) ), ), ), ), preferredSize: Size(MediaQuery.of(context).size.width, 50), ), ), body: Container( margin: EdgeInsets.only(top: 11), child: Column( children: <Widget>[ Carousel(), ], ), ), ); } } class Carousel extends StatefulWidget { @override State<StatefulWidget> createState() { return _CarouselState(); } } class _CarouselState extends State<Carousel> { List<String> urls = []; @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.symmetric(horizontal: 10), child: Stack( children: <Widget>[ Image.network( "someImageUrlHere."), Positioned( bottom: 5, width: MediaQuery.of(context).size.width - 20, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("•"), Text("•"), Text("•"), Text("•"), Text("•"), ], ), ), ], ), ); } }
What could be the issue that is causing this problem ? and how can i solve this issue ?