How To Make Flutter Appbar Title Center-2022 Guide

flutter appbar title center

In this article, we will be looking at what Flutter appbar title center is and how to easily implement it in our Flutter ap. We will understand it with the help of a practical Flutter code example so we can have a better understanding of it.

Outline

  1. Introduction: Flutter Appbar Title Center
  2. Flutter Appbar Title
  3. Flutter Appbar Title Center Alignment
  4. Custom Flutter Appbar Source Code
  5. Conclusion

Introduction: Flutter Appbar Title Center

Flutter appbar title can be used to show a title in the appbar like homepage, post page etc. It’s not supposed to be only a text, instead it can be any other widget like image, container etc.

Flutter appbar has a title constructor which takes a widget. We usually use it to give our appbar a title text but by default, it is aligned to left so if we want the title text to be shown in the center the we need to use another constructor for it.

Let’s now leave the boring part and understand it through proper code implementation.

Flutter Appbar Title

appBar: AppBar(
          title: Text('Appbar title'),
              )
flutter appbar title left
We can see that we can give any Flutter widget we want to Flutter appbar title constructor. For demonstration, we have passed the title constructor a Flutter text widget. We can see in the image above that the text is displayed in the appbar and by default, it is aligned to left. But we can change this default title alignment.

Flutter Appbar Title Center Alignment

centerTitle: true
flutter appbar title center
If we want to display the title in the center then we’ve to use the center title constructor of Flutter appbar widget which takes a Boolean(true/false) value. It is set to false by default, just make it true and you will see that the title is now showing in the center of our appbar.

Congrats, now you have a complete understanding of how to make the Flutter appbar title center. We have made a beautiful Flutter appbar design for you as a treat.

Don’t hesitate to ask if you still have any questions in mind regarding the implementation of centered title in Flutter appbar. We’ll be very glad to answer all your questions.

The source code is given below in which Flutter appbar title center is also implemented. You can use it in your own apps as well and don’t forget you share your experience here with us using the comment section.

Also, do feel free to customize this design according to the requirements of your own project.

Custom Flutter Appbar Source Code

flutter appbar title center

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        debugShowCheckedModeBanner: false,

        title: 'Flutter Appbar Title Center',

        home: flutterAppbarColor());

  }

}

class flutterAppbarColor extends StatefulWidget {

  @override

  State<flutterAppbarColor> createState() => _flutterAppbarColorState();

}

class _flutterAppbarColorState extends State<flutterAppbarColor> {

  @override

  Widget build(BuildContext context) {

    return SafeArea(

      child: Scaffold(

        appBar: AppBar(

            backgroundColor: Colors.pink,

            toolbarHeight: 70,

            centerTitle: true,

            leading: Container(

                margin: const EdgeInsets.all(8.0),

                alignment: Alignment.center,

                decoration: BoxDecoration(

                    shape: BoxShape.circle,

                    color: Colors.pink,

                    boxShadow: [

                      BoxShadow(blurRadius: 5, color: Colors.grey.shade800)

                    ]),

                child: Icon(Icons.arrow_back)),

            title: Text(

              'Let Me Flutter',

              style: TextStyle(fontWeight: FontWeight.w900),

            ),

            actions: [

              Container(

                  margin: const EdgeInsets.all(8.0),

                  padding: const EdgeInsets.all(8.0),

                  decoration: BoxDecoration(

                      shape: BoxShape.circle,

                      color: Colors.pink,

                      boxShadow: [

                        BoxShadow(blurRadius: 5, color: Colors.grey.shade800)

                      ]),

                  child: Icon(Icons.notifications_active)),

              Container(

                  margin: const EdgeInsets.all(8.0),

                  padding: const EdgeInsets.all(8.0),

                  decoration: BoxDecoration(

                      shape: BoxShape.circle,

                      color: Colors.pink,

                      boxShadow: [

                        BoxShadow(blurRadius: 5, color: Colors.grey.shade800)

                      ]),

                  child: Icon(Icons.logout)),

            ]),

      ),

    );

  }

}

Conclusion

In conclusion, hope you now have a complete practical idea of how to implement Flutter appbar title center. Don’t forget to share your amazing feedback with us.

We’d be very glad to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this article.

Leave a Comment

Your email address will not be published.