Almost every app has an appbar in it. In this article, we will see how to create an appbar in flutter and its properties.

Flutter Appbar

Let us first create a flutter project and inside the lib/main.dart file, import the material package.

Then inside the void main() function, call the runApp() function, and inside it call the class name that we are going to use.

In our case, we are going to create a class named “MyApp” which is a stateful widget. We are going to return a MaterialApp and inside it, we are assigning the home property value as a Scaffold Widget. Inside the Scaffold widget,

  • We are setting the appBar property value as the AppBar() Widget.

Inside the AppBar Widget, we are giving the title as “AppBar”. By default in iOS devices, the appbar title will be in the center. But for android devices, we have to position it to the center. For that, we can set the centerTitle property to true.

Simple AppBar

The default background color of the appbar is sky blue and the text color will be set to white color accordingly. We can change the background color by using the backgroundcolor property to the color we want. To change the font color, we can use the style property and the TextStyle widget. Inside it, we can set the color for our font.

Color changed Appbar

We have set the background color of the appbar as purple and the font color as yellow.

Note: We have created a variable that is of String data type named “titlename” to hold the text “AppBar” which is our title.

Now that, we are done the basics in the appbar. Next, we dive a little deeper inside it. There are some useful properties for us to use, which are leading, elevation, and actions.

  • leading is the property which will be on the left side of the appbar. We can assign its value as text or icons to represent. We will use the menu icon in our example.
  • elevation is the property that is used to display the appbar above or floating over the screen with a little shadow underneath it.
  • actions property will take a list of widgets as its input. In this example, we will use two IconButtons as the widgets and perform a simple operation with those buttons. One icon will be the home button and then another button will be a notification. If we click home iconbutton, the title should change to “Home”, and if we click the notification iconbutton, the title should change to “Notification”.
  • Though we are using a stateful widget, we can use the setState() property to change the state of the titlename in the onPressed property.

Note: titlename = “Home”

Home icon pressed
  • Likewise, we can change the title as notification as well.

Note: titlename = “Notification”

Notification Icon pressed
  • The leading menu icon will be on the left of the appbar.
Leading menu icon

Full code:

GitHub Code: https://github.com/vishnuvichu14/flutter_appbar

The end.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store