Flutter Tutorials: Lesson 2, Setting up AppBar

An App Bar is an integral part of any type of application. It plays an important in Mobile applications. This is the place where you are showing title of your page or view, provide a way for users to open Drawer for additional actions and provide some important actions that a user need to have access to all the time.

In our second tutorial in Learn Flutter series, I will show you how to use AppBar Widget to set up a simple App Bar for your mobile application. In this lesson, I will briefly touch on subject of navigation in Flutter applications. You will get to see how to use Navigator to push and pop views in your application.

Here the code you will see in that tutorial.

Widget build(BuildContext context) {
    return Material(
        child: Scaffold(
            // There are three parts of AppBar.
            // 1. Leading 2. Title 3. Actions
            appBar: AppBar(
              // if you do not want framework to automatically insert
              // leading backbutton, when there is a previous route,
              // then turn the behavior off.
              automaticallyImplyLeading: true,
              // set up the leading widget. E.g if you need to add a Drawer
              // that opens when clicking on a hamburger icon, that will be
              // set up using leading property of AppBar
              leading: IconButton(
                icon: Icon(Icons.menu),
                tooltip: "Menu",
                // handling of onPressed event is required. Otherwise you
                // will get compile time errors.
                onPressed: () {},
              ),
              title: Text("My Title");
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.add_alert_sharp),
                    onPressed: () {
                      Navigator.push(context,
                          MaterialPageRoute(builder: (context) {
                        return AlertConfigurationPage();
                      }));
                    }),
                IconButton(icon: Icon(Icons.search), onPressed: () {})
              ],
            ),
            bottomNavigationBar: AppNavigationBar(),
            body: Center(child: Text("Crypto Currency Monitor"))));
  }