In this post, you will learn to add a drawer to the right side of the screen in Flutter. In case you want a step-by-step guide on how to add a drawer in flutter, then here’s the link to my post on this topic – https://developerxon.com/2022/04/13/how-to-create-a-drawer-in-flutter/
How to add a right-side drawer in flutter?
We use the endDrawer property of the Scaffold to place the drawer to the right side of the screen. Let’s see an example now.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return MaterialApp(
home: MyHomePage()
);
}
}
class MyHomePage extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: Text("Drawer Example"),
backgroundColor: Colors.deepPurple,
),
body: const Center(
child: Text("Flutter Drawer Example"),
),
endDrawer: Drawer(
//Add a ListView to the Drawer.
child: ListView(
//Ensure that ListView doesn't have any padding.
// This line will remove any padding from the ListView
padding: EdgeInsets.zero,
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.deepPurple
),
child: Image.asset("assets/images/mail.png"),
),
ListTile(
leading: Icon(Icons.email),
title: const Text('Inbox'),
onTap: (){
//Here you can update the state of the app,
//like, navigating to the screen the user has selected
//...
//After user has selected the option,
//close the drawer
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.send),
title: const Text('Sent'),
onTap: (){
//Here you can update the state of the app,
//like, navigating to the screen the user has selected
//...
//After user has selected the option,
//close thye drawer
Navigator.pop(context);
},
)
],
),
),
);
}
}
You can see in the above code that I have used the endDrawer property here. If you only use drawer property, then the drawer shows up on the left side of the screen.
Output:
The hamburger icon appears at the right side of the screen.
DeveloperXon 
Leave a Reply