As you all know drawer is a hidden side screen. If we tap the drawers icon it will open up a list.
How to Create the Empty Drawer
Now we just create an empty drawer screen. First, you should create a Scaffold Widget. To provide the visual structure you should add Scaffold Widget.
Class MyApp extends StatelessWidget
@override
Widget build (BuildContext context)
{
Return new Scaffold(
appBar: new AppBar(
Title: new Text(widget,title
),
Drawer: new Drawer(),
);
}
How to Add Drawer Header
For creating header Drawer Header widget is used. While using this widget you should create a child and then it allows to decorate the header.
Here I’m using BoxDecoration for decorating the box style, color, size.
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text("Huge ", style: new TextStyle(fontSize: 20.0,color: Colors.white),
),
),
),
How to Add Items in the Drawer
For creating an item in a drawer you should use ListView. If your item contains more space. For scroll down the screen, ListView is used.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
),
),
new ListTile(
title: new Text("About us"),
trailing: new Icon(Icons.supervisor_account),
),
new ListTile(
title: new Text("Share"),
trailing: new Icon(Icons.share),
),
new ListTile(
title: new Text("Review"),
trailing: new Icon(Icons.rate_review),
),
],
),
),
Navigator
This is used for close the drawer screen.
new ListTile(
title: new Text("Review"),
trailing: new Icon(Icons.rate_review),
Navigator.pop(Review);
),
