AppBar Widget in Flutter

In this article, we are going to learn about the flutter AppBar widget and its all properties. Almost Every mobile application uses an AppBar. Since everything in flutter is basically a widget, the app bar is also a widget that is placed in a scaffold widget. That means the app bar is one of the child widget of the scaffold, which places the AppBar as a fixed-height widget at the top of the screen.
  The AppBar widget is based on Material Design, so we need to import the Material Components package for the flutter

 import 'package: flutter/material.dart'

 The following snippet is the constructor of the AppBar 

AppBar({
 Key key,
 this.leading,
 this.automaticallyImplyLeading = true,
 this.title,
 this.actions,
 this.flexibleSpace,
 this.bottom,
 this.elevation,
 this.shadowColor,
 this.shape,
 this.backgroundColor,
 this.brightness,
 this.iconTheme,
 this.actionsIconTheme,
 this.textTheme,
 this.primary = true,
 this.centerTitle,
 this.excludeHeaderSemantics = false,
 this.titleSpacing = NavigationToolbar.kMiddleSpacing,
 this.toolbarOpacity = 1.0,
 this.bottomOpacity = 1.0,
 this.toolbarHeight,
 this.leadingWidth,
})
//Flutter AppBar widget - Flutterant

Here we can see there is no required property in the AppBar constructor. So we can use AppBar without parameters.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: Text("www.flutterant.com")),
    );
  }
Flutter AppBar widget - Flutterant
Empty AppBar

AppBar widget properties:


1. Key key: A Widget key is an identifier of the widget.
2. Widget leading: The leading property holds the small widget which is like an Icon or an IconButton and displays before the title.

Flutter AppBar widget - Flutterant
Flutter AppBar

If this property is null and automaticallyImplyLeading is set to true the app bar will display the appropriate widget.
For example, AppBar is in a Scaffold with a Drawer,  then a menu button will be inserted to open the drawer

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("AppBar Demo")),
      //Here we can see the leading property is null in AppBar
      drawer: Drawer(...),
    );
  }
Flutter AppBar widget - Flutterant

Or, if there is no Drawer and the parent navigator can go back, then a Back Button is inserted to call Navigator.maybePop.

//First Screen
class MyAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("AppBar Demo")),
      //Here we can see the leading property is null in AppBar
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => SecondScreen()));},
          child: Text("Second Screen"),
        ),
      ),
    );
  }
}
//Flutter AppBar widget - Flutterant
//Second Screen
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
    //Here we can see the leading property is null in AppBar
    );
  }
}
//Flutter AppBar widget - Flutterant
Flutter AppBar widget - Flutterant
  • Changing the Default Drawer icon
    The following snippet shows to change the default Drawer Icon
Scaffold(
      appBar: AppBar(
          title: Text("AppBar Demo"),
          leading: Builder(builder: (BuildContext context) {
            return IconButton(
                icon: Image.asset("images/custom_menu.png"),
                onPressed: () {
                  Scaffold.of(context).openDrawer();
                });
          })),
      drawer: Drawer(...),
    );
//Flutter AppBar widget - Flutterant
Flutter AppBar widget - Flutterant

3. bool automaticallyImplyLeading: If this property is True and leading is null, it will give the appropriate widget. If it is False and leading is null, leading space is given to the title. If leading is not null, this parameter has no effect

4. Widget title: This property uses a Text widget to display the description of the current contents of the app

5. List<Widget> actions: This property allows to display the list of widgets in a row after the title, These widgets are basically IconButtons for common operations, and for less common operations we should use PopupMenuButton.

AppBar(
        actions:[
          IconButton(
              icon: Icon(Icons.search), onPressed: () => {print("Search action")}),
          IconButton(
              icon: Icon(Icons.duo), onPressed: () => {print("Duo action")})
        ],
        title: Text("AppBar Demo"),
      ),
//Flutter AppBar widget - Flutterant

Flutter AppBar widget - Flutterant

6. Widget flexibleSpace: This widget is stacked behind the toolbar and tab bar, It’s height is the same as app bar height. Flexible space will be flexible when the AppBar size changes. A SliverAppBar in a CustomScrollView changes the AppBars height when the app scrolled. We will discuss SilverAppBar in a separate article.

7. PreferredSizeWidget bottom: This widget appears at the bottom of the app bar. The bottom property is usually used for a TabBar.

8. double elevation: This property controls the size of the shadow below the appbar. AppBarTheme.elevation will be used when this property is null. If that is also null the default value will be considered i.e. 4. The value should be non-negative.

 AppBar(
   title: Text("AppBar Demo"),
   elevation: 50.0
)
Flutter AppBar widget - Flutterant

9. Color shadowColor: This property gives the shadow color below the app bar. AppBarTheme.shadowColor will be used when this property is null. If that is also null the default value is fully opaque black will be used.

AppBar(
        title: Text("AppBar Demo"),
        elevation: 20.0,
        shadowColor: Colors.red,
      )
Flutter AppBar widget - Flutterant

10. ShapeBorder shape: This property is used to give the shape to app bar

AppBar(
        title: Text("AppBar Demo"),
        elevation: 10.0,
        shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(15),
          ),
        ),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: () => {})
        ],
      )
//Flutter AppBar widget - Flutterant
Flutter AppBar widget - Flutterant

11. Color backgroundColor: This property is used to change the background colors of the app bar. AppBarTheme.color is used when this property is null. If that is also null ThemeData.primaryColor will be used.

AppBar(
        title: Text("AppBar Demo"),
        backgroundColor: Colors.red,
      )
Flutter AppBar widget - Flutterant

12. Brightness brightness:  To give brightness to the appbar. AppBarTheme.brightness will be used when this property is null. If that is also null, then ThemeData.primaryColorBrightness is used.

13. IconThemeData iconTheme:  This property allows to change the Theme (color, opacity, and size) of app bar icons. AppBarTheme.iconTheme will be used when this property null, If that is also null, then ThemeData.primaryIconTheme is used.

AppBar(
        title: Text("AppBar Demo"),
        iconTheme: IconThemeData(
          color: Colors.red,
        ),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: () => {})
        ],
      ),
//Flutter AppBar widget - Flutterant
iconTheme- lutter AppBar widget - Flutterant

14. IconThemeData actionsIconTheme:  This property allows to change the Theme (color, opacity, and size) of the app bar’s action icons. This should be only used when app bar action icons themed differently than the leading widget icon. AppBarTheme.actionsIconTheme will be used when this property null, if that is also null iconTheme will be used.

AppBar(
        title: Text("AppBar Demo"),
        actionsIconTheme: IconThemeData(
          color: Colors.red,
        ),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: () => {})
        ],
      ),
//AppBar widget -flutterant
actionsIconTheme - Flutter AppBar widget - Flutterant

15. TextTheme textTheme: This property is allowed to use typographic styles for text in the app bar AppBarTheme.textTheme will be used when this property is null, If that is also null, then ThemeData.primaryTextTheme will be used.

16. bool primary: If this property is True, appbar elements and the bottom widget will be padded on top by the system status bar. 

17. bool centerTitle: If this property is True, the title will be displayed on the center of the appbar.

18. bool excludeHeaderSemantics: If this property is True, the title will be wrapped with header Semantics. The default value is false.

19. double titleSpacing: This property is allowed to give space to title content on the horizontal axis, even if there is no leading or actions on the appbar. The default value is NavigationToolbar.kMiddleSpacing.

20. double toolbarOpacity: This property is allowed to give the opacity value to the toolbar. A value of 1.0 is fully opaque which is the default value and 0.0 is fully transparent. This property is used for animating the toolbar opacity when the app scrolled in SilverAppBar.

21. double bottomOpacity: This property is allowed to give the opacity value to the bottom part of the app bar. A value of 1.0 is fully opaque which is the default value and 0.0 is fully transparent. This property is used for animating the toolbar opacity when the app scrolled in SilverAppBar

22. double toolbarHeight: This property is allowed to give the toolbar height of an app bar. The default value is kToolbarHeight.

23.  double leadingWidth: This property is allowed to give the width to the leading widget. The default width is 56.0

Here you can find the source code for how to develop the AppBar widget of Youtube, Whatsapp, and Messenger.

For official document of AppBar Widget click here

6 thoughts on “AppBar Widget in Flutter”

  1. Hello,

    Great post! This is really a nice stuff to increase knowledge on flutter. SEO is very important to place high rank in Google. I like your posts.

    Thanks for sharing:)

    Regards,
    M Siva Sankar.

  2. Pingback: URL

Leave a Reply

Your email address will not be published. Required fields are marked *