Flutter Drawer

Add a Drawer to a screen:

In any apps that employ Material Design, We have  two primary options for navigation: tabs and drawers. When there is insufficient space to support tabs, Drawers provide a handy alternative.

In Flutter, we can achieve this with Drawer Widget in combination with a Scaffold to create a layout with a Material Design Drawer!

Using Drawers in Flutter App:

  • Create a Scaffold
  • Add a drawer
  • Populate the drawer with items
  • Close the drawer programmatically

Create a Scaffold:

 

To add a Drawer to our app, we’ll need to wrap it in a Scaffold Widget. The Scaffold Widget provides a consistent visual structure to apps that follow the Material Design Guidelines. Scaffold also supports special Material Design components, such as Drawers, AppBars, and SnackBars.

 

In below example code we are creating a Scaffold  with drawer.

Scaffold(
drawer: // We'll add our Drawer here in the next step!
);

Add a drawer:

Now add a drawer to our Scaffold. A drawer could be any Widget, but it’s often best to use the Drawerwidget from the material library, which adheres to the Material Design specifications to our app.

 

Scaffold(
drawer: Drawer(
child: // We'll populate the Drawer in the next step!
)
);

Populating the drawer with items:

3. Populate the drawer with items

Now  we have a Drawer ready in place to use, we can now  add content to it! In this example, we will use a ListView. But we also use a Column Widget, ListView is handy in this situation because it will allow users to scroll through the drawer.

 

Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the Drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app
// ...
},
),
],
),
);

Close the drawer programmatically:

After a user taps on an item, we often want to close the drawer. Therefore, to close the drawer, we can call Navigator.pop(context).

 

ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),

Below is the complete example code  for Flutter Drawer:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
final appTitle = '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('My Page!')),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the Drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
);
}
}

Congratulations you have learned using Drawers in Flutter..!

 

If It is  Useful Share it with your friends

Leave a Reply

Categories