Flutter Drawer
Material Design has two primary options for navigation which are Tabs and Drawers. A drawer is an alternative for tabs because we don’t have sufficient space in the devices.
Let’s learn how the drawer works. Drawer widget is a sliding left menu layout with a Material Design widget.
Let us see example code:
Tabs are common in Android and iOS apps which follow the Material Design guidelines. Flutter provides an easy way to add a tab layout. We use a TabBar and TabBarView with a TabController to add tabs. The controller is used to sync between both.
Lets see an example to explore tabs
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final appTitle = 'Flutter Drawer Demo'; @override Widget build(BuildContext context) { return MaterialApp( title: appTitle, home: MyHomePage(title: appTitle), ); } } class MyHomePage extends StatelessWidget { final String title; MyHomePage({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(title)), body: Center(child: Text( 'A drawer is an invisible part on the side.', style: TextStyle(fontSize: 20.0), ) ), drawer: Drawer( child: ListView( // Remove any padding from the ListView using EdgeInsets.zero. padding: EdgeInsets.zero, children:[ UserAccountsDrawerHeader( accountName: Text("Abhishek Mishra"), accountEmail: Text("abhishekm977@gmail.com"), currentAccountPicture: CircleAvatar( backgroundColor: Colors.orange, child: Text( "A", style: TextStyle(fontSize: 40.0), ), ), ), ListTile( leading: Icon(Icons.home), title: Text("Home"), onTap: () { Navigator.pop(context); }, ), ListTile( leading: Icon(Icons.settings), title: Text("Settings"), onTap: () { Navigator.pop(context); }, ), ListTile( leading: Icon(Icons.contacts), title: Text("Contact Us"), onTap: () { Navigator.pop(context); }, ), ], ), ), ); } }
Output
When you click on the burger icon top left screen, you can see the drawer sliding left.