Hello friends, When I was working on my previous tutorial then I had noticed a thing in TextField widget. The thing is that by default when we apply Border on TextField widget then the Hint vertically alignement is not right that time and even the entered text alignment is incorrect. This looks inappropriate a viewer. So this can be fixed by using contentPadding property of InputDecoration. All we have to do is apply contentPadding on our TextField widget and it looks fine. So in this tutorial we would learn about Set TextField Hint Text Alignment Vertically Center in Flutter.
Screenshot without setting up vertical alignment using contentPadding :-
Contents in this project Set TextField Hint Text Alignment Vertically Center in Flutter :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our main runApp() method, Here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating our main TextField widget. Here we would apply the contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),. This would the padding from Left side to 10 pixels and Zero from Top, bottom and right side.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
SizedBox( width: 340, height: 44, child: TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Enter Text Here...', hintStyle: TextStyle(color: Colors.grey), filled: true, fillColor: Colors.white, contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(7.0)), borderSide: BorderSide(color: Colors.blue, width: 2), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(7.0)), borderSide: BorderSide(color: Colors.red), ), |
5. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: SafeArea( top: true, child: Center( child: SizedBox( width: 340, height: 44, child: TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Enter Text Here...', hintStyle: TextStyle(color: Colors.grey), filled: true, fillColor: Colors.white, contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(7.0)), borderSide: BorderSide(color: Colors.blue, width: 2), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(7.0)), borderSide: BorderSide(color: Colors.red), ), ))), )))); } } |
Screenshot :-
