Flutter AppBar Example – Complete Guide

by
flutter-appbar-example
flutter-appbar-example

In this article, I’m going to explain how to display AppBar in a flutter with multiple examples.

How to display AppBar in Flutter?


class AppBarExample extends StatelessWidget {
  const AppBarExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

There is a widget called AppBar() which goes inside Scaffold(appBar:) that helps you to display an AppBar. The output looks like this

flutter-appbar-example-1
flutter-appbar-example-1

How to display title inside AppBar in Flutter?


Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
      ),
    );
  }

To display a title inside AppBar(), you need to pass a Text() widget into the title parameter. The output looks like this

flutter-appbar-example-2

How to align title into center position in Flutter AppBar?


Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
      ),
    );
  }

To display a title into the center position, you need to pass a boolean value for centerTitle, so the output looks like this

flutter-appbar-example-3

How to change AppBar Color in Flutter?


Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
    );
  }

To change the background color of your Flutter AppBar, you need to pass Colors object into backgroundColor property. you can choose any colors you want. the output looks like this

flutter-appbar-example-2

How to add Icon / IconButton in AppBar in flutter?


Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.green,
        leading: Icon(Icons.menu),
        actions: [
          IconButton(onPressed: () => {}, icon: Icon(Icons.search)),
          IconButton(onPressed: () => {}, icon: Icon(Icons.more_vert)),
        ],
      ),
    );
  }

To add a buttons/icons into your AppBar, we have two methods.

  • If you want to pass the icon before the title, you need to pass Icon() into a leading property.
  • If you want to pass the icon after the title, you might need to add it under action:[], here you can pass multiple buttons.

flutter-appbar-example-4

Hope this article helps you to understand AppBar in a flutter.

Documentation