Deep Dive into Flutter Drawer

Thinking about creating sidemenu or drawer for your flutter application? Let’s do that

flutter create flutterdemo
cd flutterdemo

Let’s work with main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("FlutterOwl"), backgroundColor: Colors.lightBlue[900]),
      drawer: Drawer(
          child: ListView(
        children: <Widget>[
            leading: CircleAvatar(backgroundImage:  NetworkImage("")),
            title: Text("FlutterOWl"),
            subtitle: Text(""),
          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")),


  • We can create drawer using drawer property from Scafold. If you want to show drawer in right side, you need to user endDrawer
  • These properties are required Drawer() Widget
  • This example we have create a menu using ListView and ListTile


Share on:

Download Source Code: