AppBar

AppBar is one of the very commonly used widget in Flutter. AppBar is the widget that is placed on the top of the screen which can be fixed and usually contains headings, navigation and other icons which the developers wants to be available to the user easily while they are using that particular page.

Since the AppBar widget gets noticed by the users almost definitely, using this widget efficiently can leave a significant impression on the users.

We will try to cover as many things about AppBar as possible here. If you are looking for some functionality that is not covered here, please let us know through a comment below. We will try to cover it.

In its very basic form, an AppBar looks like this

 appBar: AppBar(
        title: Text('How to Flutter') ,
      ),

How to Center the AppBar Title

Centering title in an AppBar widget is straight forward. All we need to do is to pass an option centerTitle  to the widget and set its value to true.

with that option, now the app bar looks like this

appBar: AppBar(
        title: Text('How to Flutter') ,
        centerTitle: true,
      ),

How to Change the AppBar Background Color

We can change the background color of AppBar in Flutter in couple of ways.

1. By Changing the Global Theme color
2. By Adding backgroundColor option to AppBar widget

1. Changing the Global Theme data

The default color of global theme in Flutter is blue. We can change this color in main.dart file in MaterialApp widget.

MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(        
        primarySwatch: Colors.pink ,
      ),
      home: AppBarHowTo() ,
    );

2. Changing Background Color at Widget level

We can override the global theme colors at any widget level. For AppBar, Flutter provides a straight forward backgroundColor option (overriding global theme colors for other widgets may not be straight forward).

AppBar(
        title: Text('How to Flutter') ,
        centerTitle: true,
        backgroundColor: Colors.green,
      )

How to Change AppBar Back Button Color

When we use routing in Flutter and pushes a page, Flutter will automatically adds a white colored Back Button ( back arrow icon) to the app bar of pushed page. If you want to change this color from white to any other color, we can do it in different ways

1. By Using ‘leading’ option of AppBar

We can use the leading option of AppBar to change the color of the back button (or even to change the icon itself, which we will see in a moment)

example:

AppBar(
        title: Text('How to Flutter'),
        backgroundColor: Colors.green,
        leading: BackButton(
          color: Colors.black,
        ),
      ),

2.By using IconThemeData

Another way to change the color of the back button in AppBar is by using iconTheme option which accepts IconThemeData as its value

example:

AppBar(
        title: Text('How to Flutter'),
        backgroundColor: Colors.green,
        iconTheme: IconThemeData(
          color: Colors.redAccent
        ),
      ),

How to Change the Back Button Icon of AppBar

We can also change the default back button that flutter automatically adds to a page’s  app bar when pushed onto another page. When we use a custom icon, we also need to implement the pop functionality of the back button manually.

The leading option of AppBar widget accepts a widget as its value and we can pass an IconButton or GestureDetector to mock the functionality of the back button (we can literally pass any widget here such as Text or Image or Container, but mostly we use an icon) .

example:

AppBar(
          centerTitle: true,
          title: Text('How to Flutter',  ),
          backgroundColor: Colors.green,
          leading: IconButton(
            icon: Icon(Icons.arrow_left, size: 50,),
            onPressed: () {
              Navigator.pop(context);
            } ,
          ),
      ),

How to Add Multi-line Title to AppBar

By Default the title of the app bar will be of one line. That is not because of any restriction in AppBar, that is because of the Text widget we pass to the title option. We can edit this Text widget to allow multi line titles.

appBar: AppBar(
          centerTitle: true,
          title: Text('How to Flutter, this is a very long title',
            maxLines: 2,
          ),
      ),

How to Increase the Height of the AppBar

The default height of the AppBar may not be sufficient for some requirements especially when we want to fit several icons, multi line titles inside the app bar. We can increase the height of the AppBar by using the toolbarHeight option and set its value like this

example:

AppBar(
          toolbarHeight: 200.0,
          centerTitle: true,
          title: Text('How to Flutter, this is a very long title, not just very long but very very long title',
            maxLines: 3,
            style: TextStyle(fontSize: 24),
          ),
      ),

Adding Actions to the AppBar

We can easily add actions to app bar by using the readily available actions options of AppBar which takes a list of widgets as its value.

example:

AppBar(
        title: Text('How to Flutter'),
        leading: IconButton(onPressed: () {} ,icon: Icon(Icons.menu),),
        actions: [
          IconButton(onPressed: () {} , icon: Icon(Icons.home) ),
          IconButton(onPressed: () {} , icon: Icon(Icons.logout) ),
          IconButton(onPressed: () {} , icon: Icon(Icons.account_circle ) )
        ],

      ),

Actions in a Separate Line below to Title in AppBar

If you have more number of actions or if you want to display them below to the title in AppBar, we can achieve this by using couple of ways.

One way is by using container. Yes, instead of Text widget we can assign any other widget also to the title property and that can be a container too. You can design the layout inside the container just like the way you do at any other place.

Another way is by using the bottom option of the AppBar.

In this example we will show how to use the bottom option of the AppBar.

AppBar(
        title:  Text('How to Flutter'),
        centerTitle: true,
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(50.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(onPressed: (){} , icon: Icon(Icons.home)),
              IconButton(onPressed: (){} , icon: Icon(Icons.logout)),
              IconButton(onPressed: (){} , icon: Icon(Icons.account_circle))
            ],
          ),
        ),
      ),

How to Add Gradient Background Color to AppBar

By default we can change the background color of AppBar using the backgroundColor option, which is going to be a plain color. If you want to add gradient background color, then we can use the flexibleSpace option of the AppBar and pass a Container widget to it.

example:

AppBar(
          title: Text('How to Flutter'),
          centerTitle: true,
          flexibleSpace: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    colors: <Color>[Colors.purple, Colors.blue])),
          ))

How to Add Background Image to AppBar

Similar to the way we added gradient background, we can set background image to AppBar. Instead of using gradient in BoxDecoration, we can use the image option.

example:

AppBar(
        title: Text('How to Flutter', style: TextStyle(
            color: Colors.white,
            fontSize: 28
        ),) ,
        centerTitle: true,
        flexibleSpace: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('assets/sample.png'),
                  fit: BoxFit.fill
              )
          ),
        ),

      )

How to Extend Background Image of Body to AppBar

Often times we want to have the same background image for both app bar and body of the page. To achieve this in flutter, we need to set the property extendBodyBehindAppBar value to true in Scaffold widget and also set the background color value of AppBar to transparent by using Colors.transparent.

We may also want to set the value of elevation property of AppBar to 0 since its default value is not zero.

example:

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Text('How to Flutter', style: TextStyle(
            color: Colors.white,
            fontSize: 28
        ),) ,
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/bgimg.jpg'),
            fit: BoxFit.fill
          )
        ),
      ),
    )