Let’s make an awesome navigation menu with flutter. Navigation is a crucial aspect of most apps. As in the last articles, I picked today’s design from pinterest.com.

I assume you have a development environment set up, else you can follow the instructions here. Open your terminal and enter the following commands to create the app and change into the directory.

$ flutter create texty_navigation $ cd texty_navigation

Open the folder using your favourite text editor. The entire code will be written inside the lib/main.dart file. Open that file, delete its content and add the following lines of code

First, we imported material package as we are adopting material design. Next, we define the main function whose sole purpose is to start the app by calling the runApp widget. The runApp() inflates any widget passed into it, attaches it and fills the entire screen of the device with the widget. Add the following snippets of code below as parameter to the runApp widget.

The MaterialApp widget defines an application that uses material design. It wraps a couple of properties: title property is used by the device to identify the app for the user, theme property defines the colors to use for the application’s widgets, here we defined a primaryColor property with the value of rgba(55, 113, 170, 1); and the home property defines the widget for the default route of the app.

We have not define TextyNavigation(), next create a statefulWidget as shown below. (Please read about stateful and stateless widgets in the first episode). It returns the Scaffold widget.

Scaffold implements basic material design layout, it is used to create widgets like the application bar, drawer(side menu/navigation), bottom sheet etc. For this article, we need the AppBar and Drawer only. Modify the above code to look like the snippet below:

The AppBar widget displays a horizontal bar at the top of the scaffold and we set the title properties to Text(“Texty Navigation”). The drawer property takes the Drawer widget; Drawer is the horizontal panel that displays to the left of the body of your scaffold. It is usually hidden on mobile devices and you to swipe to reveal it. It has Container has a child, we set the color using the BoxDecoration widget. BoxDecoration is used to paint or decorate a box for example: to define borders, add images, draw shapes etc.

Save your changes, start the emulator and run the application

$ open -a Simulator

$ flutter run

Your app should look like this:

The design contains two sections: The profile and navigation items sections. We will create the profile section first. It contains a picture, you will add the profile image to your project. To do this, create a folder called assets inside the application folder(you can call it whatever name) and add your profile image. Open pubspec.yaml file and add the following lines of code under flutter key as shown below. This is required to access and use the image you just added:

flutter:

assets:

- image-name.png

We will create a widget to display the profile section. Let’s call it makeProfileAvatar().

So our widget returns a Column with a list of children. The children include CircleAvatar widget to display the profile image, a SizedBox widget with a height of 10.0, and two Center widgets to centrally display the profile name and location.

Next, we will create each menu item. Create a widget that takes an icon image and text as parameters; and it returns Column widget. Each call to the widget will create a menu item for the navigation.

The above code is quite straightforward. The widget returns a list of children: Center to display the menu Icon, a SizedBox and a Center widget to display the menu label. We have applied sizes and font styles to the icon and text respectively.

We need to place the menu items in a grid. Flutter has a GridView widget for this purpose. We will create a new menuGrid() widget that will return a GridView.count of the menu items. Here is the code for this:

We set the crossAxisCount to a value of 2 to display a two column grid. The children property takes a list of menu items by calling makeMenuItem(Icon, text).

Finally, we need to add the makeProfileAvatar() and menuGrid() to the Drawer. Let’s revisit our Scaffold widget again, this time a child property to the Container inside the Drawer and set it the value to a Column which will, in turn, return a list of children. We used the Expanded widget expands a child of a Row, Column, or Flex and use the flex factor to divide the available space among the children. We will set the children to makeProfileAvatar() and menuGrid(). See the code below

Save your changes and test your design

$ flutter run

Your app should be looking similar to this:

In future refinements, we will attempt to fix the text fonts for the menu items and the Drawer background image. I don’t have those at the time of writing this. Also, Flutter does not provide support to outline material design icons at the time I wrote this article.

HERE IS THE SOURCE CODE FOR THIS EXAMPLE https://github.com/shubie/texty-navigation

You can hit me up on twitter https://twitter.com/@afegbuas

Thanks for reading and keep fluttering..!!!