Flutter Drawer Tutorial

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

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

Getting Started

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

flutter create drawer
<span class="hljs-built_in">cd</span> drawer

Flutter Drawer Tutorial example

Let’s work with main.dart

<span class="hljs-keyword">import</span> <span class="hljs-string">'package:flutter/material.dart'</span>;

<span class="hljs-keyword">void</span> main() => runApp(MaterialApp(<span class="hljs-string">home:</span> MyApp()));

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

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

Download