image 1.01 Final Snapshot

This is the first part of Keeper. Keeper is a simple app to capture quickly what’s on your mind. I mean a simple notes app. we will also see how to create an offline app with SQLite as backend and then we will implement Firebase Realtime Database . After that we will implement Reminder feature to our mobile app to learn Push Notification.

Note 1: Keeper is clone of Google Keep App 😉.

Note 2: Remaining posts will be available soon.

Tip 1: I have created a github repo with branch wise Exercise and Solution.

Prerequisites for this article are Basic knowledge in object oriented programming language. If you have developed any mobile application then you will find it much easier.

Before, we go on I will give you a small introduction on Flutter. Flutter is mobile application development SDK to build cross platform apps for Android and iOS. Fuschia is also in list but currently being developed by Google. Flutter is a Reactive framework just like React. To know more about flutter visit https://flutter.io

Index

Flutter 1: Navigation Drawer & Routes Flutter 2: Dynamic Drawer List, Stateful Widgets, Forms and Validation

Lets implement Navigation Drawer.

1.1 Navigation Drawer

I have skipped the installation part. To install flutter, visit here, select operating system and follow the steps.

We will write most of our code into lib directory. To get started just comment out code in test/widget_test.dart or delete it. As shown

snippet 1.01 comment out test/widget_test.dart

Next Remove all the code in lib/main.dart and write the code shown in below snippet 1.02 in lib/main.dart .

snippet 1.02 Flutter Navigation Drawer

Now connect mobile device and turn on USB debugging in Developer options.

To enable Developer options, go to Settings > Tap on About phone > scroll to Build number and Tap it seven times.

Go to project directory in command line terminal and type command $ flutter run or Click on Run IntelliJ Idea IDE. Now app will be installed and open with name of project directory. Click on hamburger icon to see drawer. currently drawer is empty. see image 1.03 Navigation Drawer.

image 1.03 Navigation Drawer

On line no. 16 in snippet 1.02, we have initialized drawer object as

Drawer drawer = new Drawer();`

And passed to Scaffold constructor as(line no.21, snippet 1.02)

new Scaffold(

drawer: drawer,

‎ .

‎ .

);

that’s it. we have now drawer in our app. Let’s add a header to our app.

1.2 Drawer Header

Change lib/main.dart as shown in snippet 1.03.

snippet 1.03 Drawer Header

Let’s see what’s going on. we are passing new Column as Drawer(child:...) . Column is a widget that displays its children in a vertical list with array of widget children, new Column(children: <Widget>[...]) . Column widget doesn’t scroll. To know more visit here. we are passing UserAccountsDrawerHeader object as a child to Column.

UserAccountsDrawerHeader accepts following type of properties.

accountEmail → A widget that represents the email address of the user’s current account. It is displayed on the left, below the accountName .

accountName → A widget that represents the user’s current account name. It is displayed on the left, below the currentAccountPicture .

currentAccountPicture → A widget placed in the upper-left corner that represents the current user’s account. Normally a CircleAvatar .

decoration → The header’s background. If decoration is null then a BoxDecoration with its background color set to the current theme's primaryColor is used.

margin → The margin around the drawer header.

onDetailsPressed → A callback that is called when the horizontal area which contains the accountName and accountEmail is tapped.

otherAccountsPictures → List<Widget>A list of widgets that represent the current user’s other accounts. Up to three of these widgets will be arranged in a row in the header’s upper-right corner. Normally a list of CircleAvatar widgets.

We need to setup only three properties to see Account Name, Account Email, and Account Image. That’t it we have now a nice Drawer Header in image 1.04 Drawer Header.

image 1.04 Drawer Header

1.3 Adding Lists

Let’s see how to add list.

snippet 1.04 Navigation Drawer List

In snippet 1.04 we added otherAccountsPictures with GestureDetector. Refer docs for GestureDetector class.

Drawer child, Column Widget doesn’t support scroll. So we replaced it with ListView. ListView adds padding at the top, that makes drawer header with a white background under notification bar. So we added top padding as 0.0.

ListTile is a single fixed-height row that typically contains some text widgets as well as a leading or trailing widgets. Please refer to the flutter docs for more information. If we run the above snippet then we see drawer as shown in image 1.01 Final Snapshot.

1.4 Routing

Let’s see how routing works.

snippet 1.05 Navigation Routing

step 1 -> create Notes class. (see line no. 80 ,snippet 1.05).

step 2 -> create a static final routeName for the Notes class.

step 3 -> set MaterialApp routes property with Notes object. routes accepts a Map<String, WidgetBuilder>. Now, as we added routes when we push the Notes.routName to Navigator then it will route to Notes widget with the widget that returns through Notes#build method. To push routName to Navigator we simply call

Navigator.of(context).pushNamed(Notes.routName)

But, the animation is not accepted as it will open it as a new Activity or Modal.

So to add smooth Fade transition we use PageRouteBuilder . As show in the following snippet.

snippet 1.06 Routing

step 4 -> push PageRouteBuilder to Navigator. PageRouteBuilder provides properties as transitionDuration and transitionBuilder to define animations. In our case we need FadeTransition.So, FadeTransition widget returned to transitionBuilder and transitionDuration set to default if not specified explicitly.

Then, change primaryColor to Colors.amber.shade500 in MaterialApp themes property. (line no 15, snippet 1.05).

That’s it. See image 1.01 Final Snapshot for the output. Notice the Fade Transition in the appBar between Keeper and Notes.

Summary

Building an application following Navigation Drawer makes app, user friendly and easy to access all features at one place. It makes more room for the app to display content as compared to bottom or tabs navigation.

Next we will see Dynamic Labels in Drawer, StatefulWidgets, Forms and Validations in Flutter.

If you have any suggestion, or found any mistakes or improvements do drop a comment.

You can watch my github repo at https://github.com/vemarav/keeper for more updates. You can contact me at vemaravv@gmail.com.