Navigation drawer implementation in flutter app

 

Flutter Navigation Drawer :

Flutter Navigation Drawer is used to make user transaction’s easier and simpler.The use of navigation drawer is almost in every app.

The flutter navigation drawer example make you understand how to make use of widget which slides in from left side and close  in the same direction.

In some app’s the slide may be from right side too depending upon the user interface we can make sure the direction in which it slides to and fro.

In general you might have noticed this in gmail, facebook, and more social networking apps where the user related fields are shown in the top level like username, email id , and also a profile picture if exists.

The middle section of the navigation drawer consists of the modules in the app where the user can move.

The bottom section of the navigation drawer consists of the app version, app related info if any and also a logout button sometimes.

It’s not the mandatory style of implementation it might change depending upon the app style byt the general scenario is explained here.

 

Flutter navigation drawer video tutorial :

Go through the below tutorial for more details in navigation drawer implementation.

 

Project Structure :

This image depicts the usage of flutter navigation drawer example implementation.

 

In flutter navigation drawer example we are going to consider three variables using which we define each menu item in the navigation list.

class DrawerItem {
  String title;
  IconData icon;
  Function body;
  DrawerItem(this.title, this.icon, this.body);
}

 

provide the list of the 3 fragments

final drawerFragments = [
  new DrawerItem("Home", Icons.home, () => new HomeFragment()),
  new DrawerItem("Profile", Icons.supervised_user_circle, () => new ProfileFragment()),
  new DrawerItem("Settings", Icons.settings, () => new SettingsFragment())
];

 

creating a list tile specifying the lead icon, title i..e, option name and onTap functionality.

new ListTile(
  leading: new Icon(d.icon),
  title: new Text(d.title),
  selected: i == _selectedDrawerFragmentIndex,
  onTap: () => _onSelectFragment(i),
)

 

handling onTap:()

_onSelectFragment(int index) {
  setState(() => _selectedDrawerFragmentIndex = index);
  Navigator.of(context).pop();
}

 

Full Code :

Providing the full source code for flutter navigation drawer example.

import 'package:flutter/material.dart';

import 'HomeFragment.dart';
import 'ProfileFragment.dart';
import 'SettingsFragment.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Drawer',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyHomePage(),
    );
  }
}

class DrawerItem {
  String title;
  IconData icon;
  Function body;
  DrawerItem(this.title, this.icon, this.body);
}

class MyHomePage extends StatefulWidget {

  final drawerFragments = [
    new DrawerItem("Home", Icons.home, () => new HomeFragment()),
    new DrawerItem("Profile", Icons.supervised_user_circle, () => new ProfileFragment()),
    new DrawerItem("Settings", Icons.settings, () => new SettingsFragment())
  ];

  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int _selectedDrawerFragmentIndex = 0;

  _getDrawerFragmentWidgetIndex(int pos) {
    if (widget.drawerFragments[pos] != null) {
      return widget.drawerFragments[pos].body();
    } else {
      return new Text("Error");
    }
  }

  _onSelectFragment(int index) {
    setState(() => _selectedDrawerFragmentIndex = index);
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> drawerOptions = [];

    for (var i = 0; i < widget.drawerFragments.length; i++) {
      var d = widget.drawerFragments[i];
      drawerOptions.add(
          new ListTile(
            leading: new Icon(d.icon),
            title: new Text(d.title),
            selected: i == _selectedDrawerFragmentIndex,
            onTap: () => _onSelectFragment(i),
          )
      );
    }

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.drawerFragments[_selectedDrawerFragmentIndex].title),
      ),
      drawer: new SizedBox(
        width: MediaQuery.of(context).size.width * 0.60,
        child: new Drawer(
          child: new Column(
            children: <Widget>[
              new UserAccountsDrawerHeader(accountName: new Text("Androidcoding.in"), accountEmail: new Text("abhi@androidcoding.in")),
              new Column(children: drawerOptions)
            ],
          ),
        ),
      ),
      body: _getDrawerFragmentWidgetIndex(_selectedDrawerFragmentIndex),
    );
  }
}

 

HomeFragment.dart

Declaring the home fragment with a sample text.

import 'package:flutter/material.dart';

class HomeFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Text("Home"),
    );
  }

}

 

ProfileFragment.dart

Declaring the profile fragment with a sample text.

import 'package:flutter/material.dart';

class ProfileFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Text("Profile"),
    );
  }

}

 

SettingsFragment.dart

Declaring the settings fragment with a sample text.

import 'package:flutter/material.dart';

class SettingsFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Text("Settings"),
    );
  }

}

 

Output :

This screen depicts the flutter navigation drawer example

If you have any query’s on the tutorial flutter navigation drawer example do let us know in the comment section below.If you like this tutorial do like and share for more interesting tutorials.