Right side drawer in Flutter

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: