In this tutorial, we will be understanding what the Flutter textfield align center is and how to implement it in our Flutter app. We will implement it using a simple and step-by-step approach so you don’t have any queries left at the end of this article.
So let’s jump right into understanding and implementing the Flutter textfield align center in the Flutter app.
Introduction: Flutter textfield Align Center
It’s used to align the text of the Flutter textfield to the center. It includes the textfield hint text and any other text that is used for input. Let’s now understand the concept of align center with proper implementation in the Flutter app.
Default Flutter textfield Alignment
We will cover only the Flutter textfield align center in this post, if you are interested in other properties of Flutter textfield as well then click here. The default alignment of the Flutter textfield is left. Let’s implement a simple textfield with a hint text and see the Flutter textfield alignment.
TextField( decoration: InputDecoration( enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(50)), focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(50)), border: InputBorder.none, hintText: 'I am a textfield...', hintStyle: TextStyle(color: Colors.grey.shade500)), ),
Default Alignment Of Flutter textfield Hint Text
As you can see that the Flutter textfield hint text default alignment is left. Now let’s see the default alignment of the input in the Flutter textfield.
The default alignment of and input in Flutter textfield is also left. That means that the default alignment is left.
Implement Flutter Textfield Align Center
Now let’s jump into the main thing for which you are reading this post and that is how to make Flutter textfield align center. For that see the code below:
textAlign: TextAlign.center
TextField( textAlign: TextAlign.center, decoration: InputDecoration( enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(50)), focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(50)), border: InputBorder.none, hintText: 'I am a textfield...', hintStyle: TextStyle(color: Colors.grey.shade500)), ),
You can also implement Flutter textfield align right using the TextAlign.end and pass it to the textAlign constructor of the Flutter Textfield.
For making it to the end, we have prepared a beautiful Flutter textfield for you. Hope you will like it and use it in your project. The completer source code is also given in the next section.
Beautiful Flutter Textfield Align Center Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 50),
child: TextField(
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight: Radius.circular(20))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight: Radius.circular(20))),
filled: true,
fillColor: Colors.blue.withOpacity(.4),
border: InputBorder.none,
hintText: 'I am a textfield...',
hintStyle: TextStyle(color: Colors.white)),
),
),
)),
);
}
}Conclusion
In conclusion, we have now learned how to implement the Flutter textfield align center in the Flutter app. We would love to hear your thoughts on this topic.
We’d be delighted to see you visit our other articles on Flutter app development and Python programming. Thank you for reading this one.
