Flutter Top and Bottom App Bar example.

Flutter Top and Bottom App Bar example.

Any mobile App or web app we start our development with application bar or menu bar. in web menu bar plays crucial role it attracts users based on styling. but men it come to mobile we tend to keep Application bar very minimal, so let proceed in creating menu bars in flutter application.

Flutters's Top Bar

Flutter widgets focus on Material design inspired by google, and styling is default as per materiel design specs usually in Top Application will have Screen Name or hamburger menu to open side navigation, so we shall see the example of creating Simple App bar with side Navigation.

So just to create App bar in flutter we have AppBar widget and snippet is pasted below

AppBar(
  title: Text("Categories"),
),

So if we have to include this in our Application we have combine with Scaffold Widget and Snippet is pasted below.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Categories"),
      ), 
    );
  }

And adding Hamburger menu and integrating side nav drawer is also very simple.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Categories"),
        drawer:Drawer(
        child: ListView(children:[....])
      ), 
    );
  }

Flutters's Bottom Menu Bar

Bottom menu bar is a traditional style of Ios application of apple, but few android also try to implement those, and implementation of Bottom menu bar is also very simple like top bar just by adding widgets this is achievable.Widget for bottom application bar is pasted below

BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        Children:[]
        )

To include this in the view this has to be coupled with Scaffold widget like in Top App bar,so the code snippet is pasted below.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Categories"),
      ),
      bottomNavigationBar:BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        Children:[]
        ),
    );
  }

In row part we can add multiple button or menu and icons which navigates to different views as per our application requirement. so this covers basic tutorial on creating App bar and bottom navigation bar,Adoption rate of flutter is picking up rapidly as its simplicity, and quick development,As compared with other hybrid framework, As google is putting lot of effort in development and support.As i was very new to front end development,it was very easy for me to pick up the concepts and creat an actual working apps in no time.  

How to write custom reusable `App Bar` Widget in Flutter
I have a habit of developing utility apps for my own use, And I was old school so preferred jQuery and Bootstrap for developing until flutter came along, SoI started developing the app which I used more frequently. Its a very simple appwhich has the collection of articles and news and manage m…

Subscribe to Just Chatterbox

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe