Flutter Drawer
Lear to use Drawer navigation in your Flutter App. Drawers are very important to place navigation menus.
The drawer is a slider navigation panel where you and put all menus and navigation route links of your app. When you add a drawer to Scaffold, the menu icon will appear on appBar.
To insert Drawer into your app, you need Scaffold() widget:
Scaffold(
drawer: Drawer(
child: Container(), //Content inside Drawer
)
)
Constructor of Drawer() widget.
Drawer(
{Key? key,
double elevation: 16.0,
Widget? child,
String? semanticLabel}
)
The properties of this constructor are explained below:
1. elevation - double
This property is used to raise the Drawer panel with shadow, you need to pass the double value which determines the height of elevation.
Drawer(
elevation: 5.0,
)
2. child - Widget
This property is used to pass the content widget of Drawer. Whenever you press menu icon on appBar, the drawer will open with the child content with a downline widget tree.
Drawer(
child: SingleChildScrollView(
child: Container(
child: Text("This is content of drawer"),
)
)
)
Open or close drawer manually:
First, in the class, define GlobalKey for the current Scaffold State.
GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
Assign that key to Scaffold:
Scaffold(
key: scaffoldKey,
)
Code to open Drawer:
if(scaffoldKey.currentState.isDrawerOpen){ //check if drawer is closed
scaffoldKey.currentState.openDrawer(); //open drawer
}
Code to close Drawer:
if(scaffoldKey.currentState.isDrawerOpen){ //check if drawer is open
Navigator.pop(context); //context of drawer is different
}
Example Code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return DefaultTabController( //controller for TabBar
length: 2, //lenght of tabs in TabBar
child: MaterialApp(
home: HomePage(),
)
);
}
}
class HomePage extends StatelessWidget{
GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
backgroundColor: Colors.blue[100], //background color of scaffold
appBar: AppBar(
title:Text("Drawer Example"), //title of app
backgroundColor: Colors.redAccent, //background color of app bar
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader( //header of drawer
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Text(
'My Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile( //menu item of Drawer
leading: Icon(Icons.home),
title: Text('Home Page'),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('My Profile'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Account Settings'),
),
ListTile(
onTap:(){
if(scaffoldKey.currentState.isDrawerOpen){ //check if drawer is open
Navigator.pop(context); //context of drawer is different
}
},
leading:Icon(Icons.close),
title: Text("Close Drawer")
)
],
),
),
body: Center( //content body on scaffold
child: ElevatedButton(
onPressed: (){
if(!scaffoldKey.currentState.isDrawerOpen){ //check if drawer is closed
scaffoldKey.currentState.openDrawer(); //open drawer
}
},
child: Text("OPEN DRAWER"),
)
)
);
}
}
Output:
Menu Icon on AppBar | Blank Drawer | Drawer with child content |