Step By Step Tutorial In Learning Flutter: Lesson 04 — The Drawer
In this lesson we will be exploring how we can add a Drawer to our Flutter application. Below is the final product of what we will be doing today.
If you been following along, the lesson 3 main.dart code will be like below
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
leading: new Icon(Icons.menu),
titleSpacing: 0.0,
title:
Text('TREES'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.white,
),
onPressed: () {
// do something
},
),
],
),
body: Center(
child: Text('This is the third lesson in Flutter'),
),
),
);
}
}Let us just change the text title from TREES to POKEMON
And the body text from “This is the third lesson in Flutter” to This is the fourth lesson in Flutter
So the new main.dart will be
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
leading: new Icon(Icons.menu),
titleSpacing: 0.0,
title:
Text('POKEMON'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.white,
),
onPressed: () {
// do something
},
),
],
),
body: Center(
child: Text('This is the fourth lesson in Flutter'),
),
),
);
}
}Now let us add the Drawer code
So the code will now be like
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
leading: new Icon(Icons.menu),
titleSpacing: 0.0,
title:
Text('Pokemon'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {
// do something
},
),
],
),
body: Center(
child: Text('This is the fourth lesson in Flutter'),
),
drawer: Drawer(
), //Drawer
), //Scaffold
); //MaterialApp
}
}Hot Reload the application, then click the Drawer
But nothing happens…
Yes, it is my intention :)
To make it work, remove the entire line for leading: new Icon(Icons.menu),
The code will now be
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
titleSpacing: 0.0,
title:
Text('Pokemon'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {
// do something
},
),
],
),
body: Center(
child: Text('This is the fourth lesson in Flutter'),
),
drawer: Drawer(
), //Drawer
), //Scaffold
); //MaterialApp
}
}Click Hot Reload again, then click the Drawer
See what happens now
That looks better :)
So now, let do below
Copy below between the Drawer code
// 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: <Widget>[
DrawerHeader(
child: Text('POKEDEX'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
],
),This is,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
//leading: new Icon(Icons.menu),
titleSpacing: 0.0,
title:
Text('Pokemon'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {
// do something
},
),
],
),
body: Center(
child: Text('This is the fourth lesson in Flutter'),
),
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: <Widget>[
DrawerHeader(
child: Text('POKEDEX'),
decoration: BoxDecoration(
color: Colors.blue,
), //BoxDecoration
), //DrawerHeader
], //<Widget> []
), //ListView
), //Drawer
), //Scaffold
); //MaterialApp
}
}Now perform a hot reload and check the Drawer
Let us dissect the code and what it is for
Next, how about the list or items inside the Drawer?
Sure, let us explore one by one
The code to add an item or list to the Drawer is
ListTile(
title: Text('Electric'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),That will be added after the DrawerHeader
So the code after doing that will be as below
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
//leading: new Icon(Icons.menu),
titleSpacing: 0.0,
title:
Text('Pokemon'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {
// do something
},
),
],
),
body: Center(
child: Text('This is the fourth lesson in Flutter'),
),
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: <Widget>[
DrawerHeader(
child: Text('POKEDEX'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Electric'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
}, //onTap
), //ListTile
], //<Widget> []
), //ListView
), //Drawer
), //Scaffold
); //MaterialApp
}
}Perform a hot reload and click the Drawer, you should see as below
So it will be easy to add one more item, for this example, we want to add Fire
It is as easy as adding ListTile as shown below
That is we add below code after the previous ending ListTile
ListTile(
title: Text('Fire'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),So the updated code will now be
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
//leading: new Icon(Icons.menu),
titleSpacing: 0.0,
title:
Text('Pokemon'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {
// do something
},
),
],
),
body: Center(
child: Text('This is the fourth lesson in Flutter'),
),
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: <Widget>[
DrawerHeader(
child: Text('POKEDEX'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Electric'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Fire'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
}, //onTap
), //ListTile
], //<Widget> []
), //ListView
), //Drawer
), //Scaffold
); //MaterialApp
}
}Perform hot reload and now check the Drawer
As an exercise, complete the rest of the needed items to be added
Hope you enjoyed as much as I do, also I wish you learned something today.
Thank you till next time :)
Tell me what you think.
