2. Flutter for Android Developer- App Bar & Drawer

Go to index to find out all the articles in this series.

In the last blog , we created our first Flutter app but it was pretty ugly. In this blog we will try to implement App Bar and Navigation Drawer. In Android, app bar is provided using style file or using AppBar in xml, but in Flutter , app bar, bottom bar, navigation bar are all provided by Scaffold.

In general meaning , Scaffold is temporary wood or metal pipe structure to support construction. In the same way, Scaffold don’t have any structure of its own , but provide space to attach app bar and other things.

Empty Scaffold

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold()
    );
  }
}

This is a empty scaffold. As you can see, their is nothing on the screen but now background is white. Let’s see what scaffold constructor has to offer…..

Scaffold({
  Key key,
  this.appBar,
  this.body,
  this.floatingActionButton,
  this.floatingActionButtonLocation,
  this.floatingActionButtonAnimator,
  this.persistentFooterButtons,
  this.drawer,
  this.endDrawer,
  this.bottomNavigationBar,
  this.bottomSheet,
  this.backgroundColor,
  this.resizeToAvoidBottomPadding,
  this.resizeToAvoidBottomInset,
  this.primary = true,
  this.drawerDragStartBehavior = DragStartBehavior.start,
  this.extendBody = false,
}) : assert(primary != null),
     assert(extendBody != null),
     assert(drawerDragStartBehavior != null),
     super(key: key);

This is Scaffold Constructor, as you can see all the parameter are named paramter. It has appBar, body , floatingActionButton, drawer,endDrawer, bottonNavigatinoBar and bottomSheet.

Let’s now add them one by one.

1. Adding Appbar

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar:  AppBar(
          title: Text("Sweet App"),
          leading: Icon(Icons.arrow_back_ios),
        ),
      )
    );
  }
}

App Bar

That’s all you have to do add a app bar. Let’s understand the code. We have passed AppBar() in the named parameter of MaterialApp(). AppBar also have a lot of named Parameter, one among them is title which represent the … Title. Title parameter accept a Widget. Therefore we can pass Text() in there. Although you can pass anything in the title as everything in flutter is widget.

Next we have leading parameter , it also accept a widget. We can you this paramter to show back arrow, or banner.

To center title in app

appBar:  AppBar(
  title: Text("Sweet App"),
  centerTitle: true,
  leading: Icon(Icons.arrow_back_ios),
),

2. Adding Navigation Drawer

From the previous example, I think you know what we are going to do.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            drawer: Drawer()
        )
    );
  }

That’s all. It will add an empty drawer in the app , with hamburger icon (don’t forget to remove leading icon from appbar in the previous example, let system handle icon) and animation. Is it not magic. For me , it was.

Now , next thing we have is to add option in the drawer. Drawer has named parameter child which accepts widgets. So , let’s implement it..

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title:Text("Sweet App")),
            drawer: Drawer(
              child: getDrawerChild(),
            )
        )
    );
  }

  ListView getDrawerChild() {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(
            Icons.map,
            color: Colors.green,
          ),
          title: Text("Open Map"),
          subtitle: Text("Google Map"),
          trailing: Icon(Icons.arrow_forward),
        ),
        ListTile(
          leading: Icon(
            Icons.call,
            color: Colors.grey,
          ),
          title: Text("Call"),
          subtitle: Text("Emergency call"),

        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 20.0),
        ),
        Text(
          "Simple Text",
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20.0),
        ),
      ],
    );
  }
}

Simple Drawer

This is simplest example of drawer. Drawer offer a lot to play around but we will deep dive into it after clearing all the basic.

Now , we have a starting point or a blank project in android. Now , in the next part we will learn how to build UI in Android.

Thanks for your precious time.

If you like it, give it a clap.