AppBar in Flutter
Hello Flutter developers, this is my first blog and here I’ll discuss how to design and theme AppBar widget in Flutter applications.
About app bar
The app bar, also known as an action bar in Android or navigation bar in iOS is an important design element which stays generally on top of each screen below the status bar. It provides better user interaction and experience by allowing screen navigation and views switching.
Introduction to AppBar widget in Flutter
Everything in Flutter is a Widget. AppBar is also a widget which exposes common actions (e.g. Search, View Cart) using icons while some less common actions (e.g Settings, Filters, Delete) using pop up menu (sometimes called “overflow menu”).
App bars are typically used in the Scaffold.appbar property, which places the app bar as a fixed-height widget at the top of the screen. (Scaffold implements the basic material design visual layout structure.)
On AppBar widget we can set multiple properties like leading (To set a leading icon button like a drawer menu, a left chevron), title, actions (To set some common and less common actions) and many more. The following diagram shows where each of these properties appears in the app bar.
Like this
Let us see how we can code the above AppBar in Flutter. You’ll first need to import material.dart file like this
import 'package:flutter/material.dart';1.) Adding AppBar with the title property
To begin with, let us create a new StatelessWidget and name it AppBarDemoWidget which returns MaterialApp. Further, we can set the home property to Scaffold and add AppBar widget in it with just title property. You can try the same code in DartPad.
import 'package:flutter/material.dart';void main() => runApp(AppBarDemoWidget());class AppBarDemoWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'AppBar Demo App',
home: Scaffold(
appBar: AppBar(
title: const Text('AppBar Demo'),
),
body: Container(),
),
);
}
}
The output is as below
2.) Adding leading property on AppBar
To add an icon in front of the title (e.g. Menu icon or back icon), we can set the leading property on AppBar like below. IconButton is a widget and as the name implies, it is a clickable icon. We can set its onPressed property to perform an action.
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
//Do Something
},
),The output is as below
Note: If the leading widget is omitted, but the AppBar is in a Scaffold with a Drawer, then a button will be inserted to open the drawer. Otherwise, if the nearest Navigator has any previous routes, a BackButton is inserted instead. This behaviour can be turned off by setting the automaticallyImplyLeading to false. In that case, a null leading widget will result in the title widget stretching to start.
3.) Adding multiple actions on AppBar.
To add icons at the end of AppBar, we can set its actions property. It takes a list of widgets to be displayed on AppBar like below. Both common and less common actions can be added. Let us first add some common actions which we always want to display on AppBar.
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
//Do something
},
),
IconButton(
icon: Icon(Icons.shopping_cart_rounded),
onPressed: () {
//Do something
},
),
],The output is as below
4.) Adding less common actions on AppBar.
To add some less common actions like filters, settings, delete we can create a pop-up menu (“overflow menu”). We can do that by adding PopUpMenuButton which takes a list of PopupMenuItem in actions list at the end. For each PopupMenuItem, we can assign a unique value to identify when that action is selected. The onSelected option is called when any pop-up item is selected and based on that, we can decide what action to perform. Let’s have a look at the code.
PopupMenuButton(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 8),
child: Icon(Icons.more_vert),
),
onSelected: (MenuOptions selectedOption) {
//Do something
},
itemBuilder: (context) => [
PopupMenuItem(
child: const Text('Filters'),
value: MenuOptions.FILTERS,
),
PopupMenuItem(
child: const Text('Settings'),
value: MenuOptions.SETTINGS,
),
],
),MenuOptions is an enum which we define to identify each menu item uniquely.
enum MenuOptions { FILTERS, SETTINGS }
To display the pop-up menu below the AppBar we can set the offset property on PopUpMenuButton like this.
offset: Offset(0, 100),Here is the final output
We are all done with the basic AppBar. Yey! Still, theming is remaining. Here is the link to the code.
5.) Theming the AppBar (Global theme)
To style the AppBar we can use MaterialApp itself. We can change the background colour of AppBar, title theme, icon theme universally (i.e Throughout the application). On MaterialApp, we can set the theme property which expects a ThemeData object.
Let’s say that we want our AppBar to have a purple background with bold text and a font size of 18. Furthermore, we also want the title and icons to have amber colour. We can do that as below.
Note: headline6 property is used for the primary text in app bars and dialogs (e.g., AppBar.title and AlertDialog.title).
theme: ThemeData(
primarySwatch: Colors.purple,
appBarTheme: Theme.of(context).appBarTheme.copyWith(
centerTitle: true,
elevation: 16,
shadowColor: Colors.black,
),
primaryTextTheme: Theme.of(context).primaryTextTheme.copyWith(
headline6: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.amber,
),
),
primaryIconTheme: Theme.of(context).primaryIconTheme.copyWith(
color: Colors.amberAccent,
),
),The output is as below
To change fonts, we can add custom fonts in our project and update the pubspec.ymal file. Then we can set fontFamily property on headline6 in primaryTextTheme. To know more about how to add custom fonts, click on this link.
You can find the code snippets here.
Yey! 🌟🥳
I hope this article was helpful and If you have any questions or would like to give feedback, you can leave a comment. I’d appreciate it. If you find this helpful please give a clap.
You can connect with me on Github and LinkedIn. Happy coding!
Thank you for reading.😄
