Flutter UI Essentials — AppBar

Photo by Nolan Issac on Unsplash

Flutter app bar is a Material Design app bar. By default, all Material widgets use Material 2. An app bar contains Toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar. There may be one or more common actions with IconButtons in an app bar.

With Material 3, we have both new and updated widgets in Flutter. AppBar is one of them. There are new colors, elevation, and layout with this update.

AppBar Updates with Material 3

• Color: New color mappings and compatibility with dynamic color
• Elevation: No drop shadow, instead a color fill creates separation from content
• Typography: Larger default text
• Layout: Larger default height
• Types: There are now four types of top app bar: center-aligned, small, medium, and large

With Flutter support for Material 3, we can use Material 3 app bar in our apps, by setting useMaterial3 property as true. In order to do this we can define a theme of ThemeData in our MaterialApp class.

An app bar is a fixed height widget at the top of the screen. In Flutter we use App bars in theScaffold.appBar property.

If we want to create customized top app bars, Flutter also has widgets to that. PreferredSize will help us to customize the height of the app bar and SliverAppBar can be used to create scrollable app bars.

We use these params more often

• title — Any Widget, mostly a Text widget
• actions — To provide a list of Icon buttons (If the app bar’s actions contains TextButtons, they will not be visible if their foreground (text) color is the same as the the app bar’s background color. To solve this, we can override TextButton.style)
• bottom — Eg : If we need a TabBar

Enable Material 3

    return MaterialApp(
      theme: ThemeData(
        colorSchemeSeed: const Color(0xff967be3),
        // add this line
        useMaterial3: true,
      ),
      home: const AppBarExample(),
    );

With Material design 2, the app bar will be like below images when the content is scrolling or not.