![]() |
Vertically Centre Align Text in TextField Flutter - Printable Version +- 0Day Forums (https://0day.red) +-- Forum: Coding (https://0day.red/Forum-Coding) +--- Forum: Flutter & Dart (https://0day.red/Forum-Flutter-Dart) +--- Thread: Vertically Centre Align Text in TextField Flutter (/Thread-Vertically-Centre-Align-Text-in-TextField-Flutter) Pages:
1
2
|
Vertically Centre Align Text in TextField Flutter - hanleigh499 - 07-21-2023 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 ? RE: Vertically Centre Align Text in TextField Flutter - candrammet - 07-21-2023 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)), ) ), ), ], ), ) ``` RE: Vertically Centre Align Text in TextField Flutter - dilapidatedbhogketlkv - 07-21-2023 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 ), ), ), ``` RE: Vertically Centre Align Text in TextField Flutter - expressionisms762973 - 07-21-2023 Date time is picking perfect but hint alignment and date value is not align in same place. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> Container( child: Padding( padding: const EdgeInsets.only( left: 15.0, right: 15.0, top: 15.0, bottom: 10.0), child: Row( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Center( child: Image.asset( "assets/images/date.png", // width: 20, width: SizeConfig.safeBlockHorizontal * 4, ), ), SizedBox( width: 15, ), Flexible( child: Center( child: DateTimeField( decoration: InputDecoration.collapsed( hintText: "Start date and time", hintStyle: TextStyle( // fontSize: 14, fontSize: SizeConfig.safeBlockHorizontal * 3, ), border: InputBorder.none, ), validator: validateStartDate, onSaved: (DateTime val) { _startDate = val; }, format: format, style: TextStyle( fontSize: SizeConfig.safeBlockHorizontal * 3, ), onShowPicker: (context, currentValue) async { // FocusScope.of(context).previousFocus(); final Startdate = await showDatePicker( context: context, firstDate: DateTime.now() .subtract(Duration(days: 1)), initialDate: currentValue ?? DateTime.now(), lastDate: DateTime(2100)); if (Startdate != null) { final StartTime = await showTimePicker( context: context, initialTime: TimeOfDay.fromDateTime( currentValue ?? DateTime.now()), ); setState(() { StartDate = DateTimeField.combine( Startdate, StartTime); }); return DateTimeField.combine( Startdate, StartTime); } else { return currentValue; } }, ), ), ), ], ), ), ), <!-- end snippet --> `][1] [1]: RE: Vertically Centre Align Text in TextField Flutter - sharitygxtm - 07-21-2023 TextField( textAlign: TextAlign.center, decoration: InputDecoration( hintText: "Centered Hint", ), ) Hope so that this will be helpful. RE: Vertically Centre Align Text in TextField Flutter - polarogram64259 - 07-21-2023 [![enter image description here][1]][1] 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', ), ), ) [1]: RE: Vertically Centre Align Text in TextField Flutter - adolescently558886 - 07-21-2023 you can use textAlignVertical property availabe inside Textfield/ Textformfield. Demo: ` TextField( textAlignVertical: TextAlignVertical.center, decoration: InputDecoration( hintText: 'Text aligned vertically centered', ) )` RE: Vertically Centre Align Text in TextField Flutter - openband381412 - 07-21-2023 TextField( controller: controller, onSubmitted: (searchInfo) async {}, textAlignVertical: TextAlignVertical.center, textAlign: TextAlign.left, textInputAction: TextInputAction.go, decoration: InputDecoration( contentPadding: EdgeInsets.zero, isDense: true, hintText: hint, hintStyle: TextStyle( color: Colors.black.withOpacity(.35), fontSize: 15.0, ), prefixIcon: Padding( padding: const EdgeInsets.all(6), child: Image.asset( ImageConstant.searchbox, color: Colors.black.withOpacity(.7), ), ), focusedBorder: InputBorder.none, border: InputBorder.none, ), ), RE: Vertically Centre Align Text in TextField Flutter - elodiekcxjmng - 07-21-2023 If anything doesn't work, try to use: textAlignVertical: TextAlignVertical.bottom, RE: Vertically Centre Align Text in TextField Flutter - dichromatism703 - 07-21-2023 The simplest way would be to use the built-in `TextAlign` properties to align vertically or horizontally: TextField( textAlign: TextAlign.center, // Align horizontally textAlignVertical: TextAlignVertical.center, // Align vertically ) |