Checkout MyThemeBox.com for Ionic & Flutter Themes
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
Getting Started
Let's create new project & start working with flutter sidemenu
flutter create drawer
cd drawerFlutter Drawer Tutorial example
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("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
