How to make a Navigation Drawer in Flutter

What are Navigation Drawers?

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.

With this article, I would show us how to make a navigation drawer with the Flutter framework.

Firstly start by creating a fluter project by from your CMD by typing in flutter create yourappname and clicking on the enter key

In every flutter program, we first start with importing a basic package

import 'package:flutter/material.dart';

Then we create a class for the Navigation Drawer Icon with the name drawer_item.dart which extends a widget. The name of the class should be saved as

class DrawerItem extends StatelessWidget { final String name; final IconData icon; final Function() onPress; const DrawerItem( {Key? key, required this.name, required this.icon, required this.onPress}) : super(key: key); @override Widget build(BuildContext context) { return InkWell( onTap: onPress, child: SizedBox( height: 40, child: Row( children: [ Icon( icon, size: 20, color: Colors.white, ), const SizedBox( width: 40, ), Text( name, style: const TextStyle(fontSize: 20, color: Colors.white), ), ], ), ), ); } }

The usage of InkWell allows the animation to produce a ripple effect when tapped

*This should be what your code looks like

After creating a class for the icon we then have to create a class for the Navigation Drawer itself with the name navigation_drawer.dart. Here we would be doing a simple one for an application about sports.

We would also need to import a package and the class we earlier created into this new class (navigation_drawer.dart) we are creating

import 'package:flutter/material.dart'; ```import 'drawer_item.dart';

//We then go ahead with the creation of the NavigationDrawer with the name of the file saved as navigation_drawer.dart class

```class NavigationDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Material(
        color: Colors.blue[400],
        child: Padding(
          padding: const EdgeInsets.fromLTRB(24.0, 80, 24, 0),
          child: Column(
            children: [
              headerWidget(),
              const SizedBox(
                height: 40,
              ),
              const Divider(
                thickness: 1,
                height: 10,
                color: Colors.white,
              ),
              const SizedBox(
                height: 40,
              ),
              DrawerItem(
                name: "Home",
                icon: Icons.home,
                onPress: () => onItemPressed(context, index: 0), // this here calls the function press from "drawer_item.dart"
              ),
              const SizedBox(
                height: 30,
              ),
              DrawerItem(
                name: "Players",
                icon: Icons.people,
                onPress: () => onItemPressed(context, index: 1), // the index represents the number of the available drawer item since there are 6 items that is why the number runs from 0-5
              ),
              const SizedBox(
                height: 30,
              ),
              DrawerItem(
                name: "Trophies",
                icon: Icons.emoji_events,
                onPress: () => onItemPressed(context, index: 2),
              ),
              const SizedBox(
                height: 30,
              ),
              DrawerItem(
                name: "Staff",
                icon: Icons.people,
                onPress: () => onItemPressed(context, index: 3),
              ),
              const SizedBox(
                height: 30,
              ),
              DrawerItem(
                name: "Stadium",
                icon: Icons.stadium,
                onPress: () => onItemPressed(context, index: 4),
              ),
              const SizedBox(
                height: 30,
              ),
              DrawerItem(
                name: "Developer Info",
                icon: Icons.person,
                onPress: () => onItemPressed(context, index: 5),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void onItemPressed(BuildContext context, {required int index}) {
    Navigator.pop(context);

    switch (index) {
      case 0:
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => HomePage())); // The class MaterialPageRoute allows you to navigate to another page after clicking an invoking the press function
        break;
      case 1: // this alows us to decide what happens to each item as we click on it
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => Players()));
        break;
      default:
        Navigator.pop(context);
        break;
    }
  }

// creating a widget named headerWidget is the place where the image and text are together

  Widget headerWidget() {
    return Container(
      color: Colors.blue[400],
      width: double.infinity,
      height: 200,
      padding: EdgeInsets.only(top: 20.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            margin: EdgeInsets.only(bottom: 10),
            height: 140,
            decoration: const BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: AssetImage("assets/images/logo.png"))),
          ),
          // ignore: prefer_const_constructors
          Text(
            "Chelsea App",
            style: TextStyle(color: Colors.white, fontSize: 20),
          )
        ],
      ),
    );
  }
}

Then for the final step we would call the class of the navigation drawer in the home page which is the home.dart file which we would create

import 'package:chelsea_app/navigation_drawer.dart'; import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: Home(), )); } class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( drawer: NavigationDrawer(), appBar: AppBar( title: const Text("Chelsea App"), centerTitle: true, backgroundColor: Colors.blue[400], ), } }

With this we come to the end of this tutorial. If you know it helped please leave a like