CODESUNDAR

Flutter Drawer Tutorial with Example

SUNDARAVEL    SUBSCRIBE

I teach how to build apps using ionic and flutter

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

Categories: FlutterFlutter Tutorial
Tags:FlutterFlutter Tutorial