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

LeetCode Patterns Adventure 31 — Squares of a Sorted Array

Restore S3 folder quickly

Wave System

sed: remove all digits from file

K8s Certification: Everything you need to know about k8s and CKAD!

Impact of a digital transformation on software development

Create your own Inverse Dynamics in Unity

Course Review: Udacity’s Intro to Algorithms

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 Version Management

Flutter Web — IOS Crashing on animations

How to Maintain Browser Data in Flutter Web Between Chrome Runs?

Var and Dynamic Difference in Dart Programming