Flutter itself provides various widgets to create the industry level standard layout. One of the feature of flutter is creating default drawer in flutter with Scaffold. Using the drawer we can show our application menus list and hide show in sidebar.
In this s tutorial i will create a simple Drawer widget using Scaffold and will add some menus to it.
Let’s start the tutorial of drawer in flutter
Step 1 : Create flutter project
Very first step is to create the fluter application using command line tool or in Android studio.
flutter create example_appThis will create a new project with name my_app then go in to the folder .
Step 2 : Create a widget for drawer
Although we can create drawer in the same widget without creating a separate widget for it but i recommend to create a separate widget since its going to use in every other page of our application so let’s create a widget.
File : lib/drawer.dart
import 'package:flutter/material.dart';
class DrawerWidget extends StatelessWidget {
final BuildContext context;
const DrawerWidget({Key? key, required this.context}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return 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: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Home'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: const Text('Page 2'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
);
}
}
Here we added Drawer, DrawerHeader and ListTile widget to design the layout.
Step 3 : Add Drawer to main scaffold
Now add our new widget to scaffold thus in our main.dart file change as below
File : lib/main.dart
import 'package:example_app/drawer.dart';
import 'package:flutter/material.dart';
void main() {
runApp( MyApp());
}
class MyApp extends StatelessWidget {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
key: _scaffoldKey,
drawer: DrawerWidget(context:context),
appBar: AppBar(title: const Text("Readerstack")),
body: Center(
child: Row(
children: [
Text('This is drawer example'),
TextButton(onPressed: (){
_scaffoldKey.currentState!.openDrawer();
}, child: Text("Open Drawer"))
],
),
),
)
);
}
}Here we used Scaffold drawer
Scaffold(
drawer: // Add a Drawer layout here.
);and Drawer Material widget
Scaffold(
drawer: Drawer(
child: // add the layout for sidebar
),
);How to open close drawer from button?
To open the drawer from any button as you can see we have used scaffold GlobalKey and then we used it in TextButton in home page to open the drawer programmatically.
TextButton(onPressed: (){
_scaffoldKey.currentState!.openDrawer();
}, child: Text("Open Drawer"))Step 4: Run the project
Simply run the project using command line or in android studio to check the implementation.
flutter run lib/main.dartScreenshot :
