Category

Flutter-Beginner

Category

3 Examples: How To Center Appbar Title in Flutter?

how to center appbar title in Flutter

In Flutter, it’s easy to make the AppBar title to center.

Let’s learn about that by doing below examples.

1. How To align AppBar Title To Center?

how to center appbar title flutter

You just need to put true as value, and it will make appbar title into center.

center appbar title flutter result2

...
AppBar(
          title: Text("ANDROIDRIDE"),
          centerTitle: true,
        ),
...

Complete source code is given below.


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("ANDROIDRIDE"),
        ),
        body: Container(
          child: Center(
            child: Text(
              'Center AppBar Title Example',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}


Let’s move on to the next example…

2. How To Make AppBar Title To Center Using Row Widget

center appbar title row example

In this example, you will learn how to use the Row widget and align the title to center. we won’t use centerTitle property here.

  • mainAxisAlignment: MainAxisAlignment.center – It aligns Text widget to center.
  • Using this method, you can change the position of Text however you want.
  • Use padding widget, if it is not aligned well.
 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Row(
            //children align to center.
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("ANDROIDRIDE"),
            ],
          ),
          //menu icon
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          actions: [
            //search icon
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }

3. SliverAppBar Center Title Example

sliverappbar center title example


@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SliverAppBar Center Title Example',
      home: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (context, innerBoxScrolled) {
            return [
              SliverAppBar(
 //appbar size when it fully expanded.
                expandedHeight: 160.0,
                //appbar remains visible after scrolling
                pinned: true,
                floating: false,
                flexibleSpace: FlexibleSpaceBar(
//make title centered.
                  centerTitle: true,
                  title: Text(
                    "ANDROIDRIDE",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
          
                ),
              ),
            ];
          },
          body: Center(
            child: Text("Flutter SliverAppBar Center Title Example"),
          ),
        ),
      ),
    );
  }

  • expandedHeight: 160.0 – The maximum size of the appbar when it expanded.

sliverappbar title example image

You can easily add an image behind SliverAppBar, using background property. Use the below code inside FlexibleSpaceBar.


background: Image.network(
                    "https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg",
                    fit: BoxFit.cover,
                  ),

  • You can also use Image.asset() – if you are loading image from the assets.

That’s all for now. Please share it with your friends and family.
Thank you.

Conclusion

Most of the apps nowadays showing titles at the top and center of the AppBar. So the idea is not new and you can easily set it in Flutter. By default, Flutter comes with what we need, Using first example you can easily understand that. If you want to customize a little bit then you can go for the second one. Third one is SliverAppbar example, which gives an animation look. Depends on your need customize it and use it in your app. Using those three examples, I assume you will learn how to center appbar title in Flutter.

SliverAppBar docs

Please disable your adblocker or whitelist this site!