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:
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
An app bar is a fixed height widget at the top of the screen. In Flutter we use App bars in the
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
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
Enable Material 3
colorSchemeSeed: const Color(0xff967be3),
// add this line
home: const AppBarExample(),
With Material design 2, the app bar will be like below images when the content is scrolling or not.