Flutter App Bar - Everything you need to know

Flutter App Bar – Everything you need to know

June 26, 2020

In this article I am going to discuss about most common questions related to App bar in Flutter app.

Change App bar colour

You can set color value to backgroundColor property of the app bar to change the app bar color.

    
        AppBar (
          backgroundColor: Colors.red,
        )

If you want to use gradient color to app bar you can check “Different gradient effects and app bar gradient in Flutter app“ article.

Center the title of an App bar in Flutter

centerTitle property will help to align title to center of the appbar

    
        AppBar (
           centerTitle: true,
        )

Add icon to front in the App bar (leading icon)

leading property of the app bar allow to set any widget as a leading part. But usually we use some Icon for quick action or some indicator action.

    
        AppBar (
           leading: Icon(Icons.home)
        )

Add trailing icons to App bar

actions property allow to set arrays of widgets as a trailing widgets.

    
        AppBar (
           actions: [Icon(Icons.ac_unit)],
        )

Add menu to App bar (3 dot menu)

To create a 3 dot menu to app bar you have to set a PopupMenuButton widget as a one of a widget inside a actions widget list. Also the menu selection need to handle properly

    
        AppBar (
            actions: [
                                Icon(Icons.ac_unit),
                                PopupMenuButton(
                                  onSelected: _select,
                                  itemBuilder: (BuildContext context) {
                                    return {'Home','Order'}.map((String choice) {
                                      return PopupMenuItem(
                                        value: choice,
                                        child: Text(choice),
                                      );
                                    }).toList();
                                  },
                                ),],
            )

When you change the selection it calls _select method. In there you can perform various action based on the selection

    
        void _select(value){
          switch(value){
            case 'Home':
              break;
            case 'Order':
              break;
          }
          print(value);
        }

Create transparent App bar

You can set the transparent as a background color to make a the app bar transparent. But because of the shadow it will not show completely transparent. Therefore you can set elevation property to 0 to remove the elevation and shadow.

    
        AppBar (
            elevation: 0,
            backgroundColor: Colors.transparent,
        )

Change the shape of the App Bar

You can change the shape of the app bar by setting shape property. shape property accept ShapeBorder widget. You can use RoundedRectangleBorder widget to set round rectangle corner widget. Also if you need more shape edge you can use BeveledRectangleBorder widget for that.

    
        AppBar (
            shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.circular(20)
          ),
        )

Create custom App bar Flutter

I have a separate article about discussing how to create a custom app bar in Flutter. You can check it from here

You Will Like Also

Flutter