How To Easily Set Flutter Appbar Center Text

In this Flutter post, we will looking at how to practically set the Flutter appbar center text by using a proper and easy Flutter example. A step by step explanation will be provided to better understanding the implementation of Flutter appbar center text. After reading this post, you will easily set the Flutter appbar center text in your Flutter apps.

So what are we waiting for? Let’s just get right into it.

What is Flutter Appbar Center Text?

It means setting the title text of Flutter appbar to center. We will first see what the default position of title text is in Flutter appbar widget. After that, we will change its position to center with the help of a proper Flutter example code.

Default Flutter Appbar Title Text Position

So to see what the default positi0n of title text is in Flutter appbar widget, we have to define a simple Flutter appbar with a title. For title text, we will use the title constructor of appbar widget. It takes a Flutter widget so we will pass a Flutter text widget to it. See the below code:

AppBar(
        title: Text(
          'Flutter Appbar Text',
          style: TextStyle(fontSize: 17),
        ),
      )

You can see that this is the default position of Flutter title text. Let’s now see how to change the position of Flutter appbar text to center.

Implementing Flutter Appbar Center Text

For that, we have to use the center title constructor of the Flutter appbar widget. This constructor takes a Boolean(true/false) value. By default, it is set to false. For demonstration, we will pass true to the center title constructor. See the below code:

AppBar(
        centerTitle: true,
        title: Text(
          'Flutter Appbar Center Text',
          style: TextStyle(fontSize: 17),
        ),
      )

You can see that Flutter appbar center text is successfully implemented.

So this is how you can set the center text in Flutter appbar with ease. Do let me know if you still have any questions in mind regarding the implementation of Flutter appbar center title. I would be happy to answer all your questions.

The complete Flutter source code of the above implemented Flutter appbar center text is available in the below section.

Flutter Appbar Center Text Implementation 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(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'Flutter Appbar Center Text',
          style: TextStyle(fontSize: 17),
        ),
      ),
    ));
  }
}

Conclusion

In conclusion, I have practically discussed everything about how to set Flutter appbar center text. Do comment your thoughts about this post. Thank you for reading.