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…