Flutter AppBar Basics

Flutter Appbar
  • We are setting the appBar property value as the AppBar() Widget.
Simple AppBar
Color changed Appbar
  • 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.
Home icon pressed
  • Likewise, we can change the title as notification as well.
Notification Icon pressed
  • The leading menu icon will be on the left of the appbar.
Leading menu icon




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A quick Introduction to Java 14

Add two numbers represented by Linked Lists

How to Fail as an Agile Coach in Scrum

A Human, A Story, And Load Balancer.

Generate SQL script using beloved C#

Embedded System

Upstream our changes to isQuorumSetSan, Leader selection needs to be improved, etc.

Running RabbitMQ in Linux containers on Windows using Docker Compose

RabbitMQ Management

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
Vishnuvarshan P

Vishnuvarshan P

More from Medium

Flutter MethodChannel

Flutter Web Template — Flutter Web Drawer Widget Example

Introduction to Flutter