Flutter AppBar Basics

3 min readJul 4, 2020

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

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.

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.

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.
IconButton widget has the onPressed property if the icon has been clicked or pressed, it will perform the function written inside the onPressed property.
We are setting the state of the titlename string to home, if we press the home icon using the onPressed and setState() properties.

Note: titlename = “Home”