Tuesday, September 17, 2019

App Bar in Flutter with Example and Video Explanation

AppBar is the Top Bar in any mobile application UI. AppBar is an integral part of Scaffold widget in Flutter.

In Flutter, Appbar typically consists of the following elements which constitutes its making.
  • Leading
  • Title
  • Actions
  • Flexible Space
  • Bottom
In these properties, Leading is usually a back button or any text or any icon, Title usually is the Text, Actions consists of one or more group of icons and Bottom is usually for Tabs. But, again this is completely optional and you can use any of the widgets from Flutter widgets catalog to make your own customize AppBar for your mobile application.

Following is the Appbar Created using its elements, Leading, Title and Action.

We can also customize the App bar by using the various styling properties like elevation, change the default shape etc, I tried creating the customized AppBar as following which I have explained in detail in the video attached below.

Check out the following video to see the demonstration of creating AppBar in flutter from scratch.

Following is the Github link for the code done in the video explanation.
App Bar Demo in Flutter

Happy Coding!
Mayuri Ruparel

No comments:

Animated Container in Flutter

Please check this flutter video tutorial for detailed example and implementation of Animated Container in Flutter.