Flutter Drawer Tutorial with Example

In our flutter tutorial series, I'm going to write a flutter drawer tutorial. we can also call this drawer as sidemenu

Doc: https://flutter.dev/docs/cookbook/design/drawer

flutter-drawer-tutorial

Getting Started

Let's create new project & start working with flutter sidemenu

flutter create drawer
cd drawer

Flutter Drawer Tutorial example

Let's work with main.dart

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("codesundar"), backgroundColor: Colors.lightBlue[900]),
      drawer: Drawer(
          child: ListView(
        children: <Widget>[
          ListTile(
            leading: CircleAvatar(backgroundImage:  NetworkImage("https://i1.wp.com/codesundar.com/wp-content/uploads/2019/08/cropped-codesundar-favicon.png")),
            title: Text("codesundar"),
            subtitle: Text("me@codesundar.com"),
          ),
          ListTile(leading: Icon(Icons.home), title: Text("Home")),
          ListTile(leading: Icon(Icons.grid_on), title: Text("Products")),
          ListTile(leading: Icon(Icons.contacts), title: Text("Contact Us")),
        ],
      )),
    );
  }
}

Explanation:

In our scaffold appbar, we have a property called drawer which you can pass Drawer() widget.
Inside Drawer() widget child, you can display any child widgets. In our example, we have used ListView with ListTile
Each ListTile widget contains a leading icon and text

Output

flutter-drawer-example