Flutter Textfield Align Center With Example

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)),
          ),

We have implemented Flutter textfield and have also given it some decoration to make it look good. We have given it a Flutter textfield hint text and hint style, also we have given the Flutter textfield a focused and enabled border. Now we haven’t specified any Flutter textfield alignment. Let’s see the Flutter textfield default alignment now:

Default Alignment Of Flutter textfield Hint Text

flutter textfield align hint

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.

flutter textfield align default

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

By using the text align constructor of Flutter textfield, we can easily change the alignment. For demonstration, we have set the alignment to 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)),
          ),

As you can see, both the Flutter textfield hint text and the input text is aligned center and by that, you have achieved the purpose of reading this post which was how to make the Flutter textfield align center.

You can also implement Flutter textfield align right using the TextAlign.end and pass it to the textAlign constructor of the Flutter Textfield.

Hope you like this post. we have many other interesting articles on other beautiful and amazing Flutter widgets and we would not want you to miss them. Check them out as well.

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.