Make a Flutter Navigation Drawer in Flutter

 

In this tutorial, I'm going to show you how to make a Navigation Drawer using Flutter.

for this app we are going to create two files, one for the main page and the other will be the layout of our Drawer.

import 'package:flutter/material.dart';

import 'maindrawer.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: HomePage(),

    );

  }

}

class HomePage extends StatefulWidget {

  @override

  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("Navigation Drawer"),

      ),

      //Now we are going to open a new file

      // where we will create the layout of the Drawer

      drawer: Drawer(

        child: MainDrawer(),

      ),

    );

  }

}

maindrawer.dart

import 'package:flutter/material.dart';

class MainDrawer extends StatelessWidget {

  const MainDrawer({Key key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Column(children: [

      Container(

        child: Padding(

          padding: EdgeInsets.only(top: 50.0),

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,

            crossAxisAlignment: CrossAxisAlignment.center,

            children: [

              CircleAvatar(

                radius: 50.0,

                backgroundImage: NetworkImage(

                  "https://images.unsplash.com/photo-1594616838951-c155f8d978a0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",

                ),

              ),

              SizedBox(

                height: 5.0,

              ),

              Text(

                "Lee Wang",

                style: TextStyle(

                  fontSize: 22.0,

                  fontWeight: FontWeight.w800,

                ),

              ),

              SizedBox(

                height: 5.0,

              ),

              Text(

                "Software Engenieer",

                style: TextStyle(

                  fontSize: 16.0,

                  fontWeight: FontWeight.w400,

                ),

              ),

            ],

          ),

        ),

      ),

      SizedBox(

        height: 20.0,

      ),

      //Now let's Add the button for the Menu

      //and let's copy that and modify it

      ListTile(

        onTap: () {},

        leading: Icon(

          Icons.person,

          color: Colors.black,

        ),

        title: Text("Your Profile"),

      ),

      ListTile(

        onTap: () {},

        leading: Icon(

          Icons.inbox,

          color: Colors.black,

        ),

        title: Text("Your Inbox"),

      ),

      ListTile(

        onTap: () {},

        leading: Icon(

          Icons.assessment,

          color: Colors.black,

        ),

        title: Text("Your Dashboard"),

      ),

      ListTile(

        onTap: () {},

        leading: Icon(

          Icons.settings,

          color: Colors.black,

        ),

        title: Text("Settings"),

      ),

    ]);

  }

}