Possible to have 2 end drawer in a single page?

Question

I added a button in the AppBar by triggering the enddrawer which works exactly what I wanted. However, I wanted to add another button in the body to trigger another Drawer which also slides out from the right.

How can I achieve this? So far I haven't found any solution except making the Drawer slides from the left.

Scaffold(
    key: scaffoldKey
    appBar: AppBar(actions: [
            IconButton(
                onPressed: () {
                  scaffoldKey.currentState!.openEndDrawer();
                },
                icon: const Icon(Icons.filter_alt_outlined))
          ],),
    endDrawer: Drawer(...),
    body: Column(
            children: [
                IconButton(
                        icon: Icon(Icons.sort),
                        onPressed:() {
                            // how to open 2nd endDrawer here.. 
                        }
                    )
            ]
        )
)

Answer 1

You can achieve a full example of a Flutter app with two EndDrawer options, you can follow this code:

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<HomeScreen> {


  bool isDrawer1Visible = false;

  bool isDrawer2Visible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Two End Drawers'),
      ),
      body: Stack(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  // Toggle the visibility of Drawer 1
                  setState(() {
                    isDrawer1Visible = !isDrawer1Visible;
                  });
                },
                child: Text('Drawer 1'),
              ),
              ElevatedButton(
                onPressed: () {
                  // Toggle the visibility of Drawer 2
                  setState(() {
                    isDrawer2Visible = !isDrawer2Visible;
                  });
                },
                child: Text('Drawer 2'),
              ),
            ],
          ),
          if (isDrawer1Visible)
            Align(
              alignment: Alignment.centerRight,
              child: Container(
                width: 200,
                child: Drawer(
                  child: Center(
                    child: Text("End Drawer 1"),
                  ),
                ),
              ),
            ),
          if (isDrawer2Visible)
            Align(
              alignment: Alignment.centerRight,
              child: Container(
                width: 200,
                child: Drawer(
                  child: Center(
                    child: Text("End Drawer 2"),
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}

I hope this will help you.

Answer 2

A solution would be using the drawer in the body, and using a PopupMenuButton in the appBar

Answer 3

Try this out hopefully this will work

class MyPage extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

  bool isDrawer1Open = false;
  bool isDrawer2Open = false;

  void openDrawer1() {
    scaffoldKey.currentState!.openEndDrawer();
    isDrawer1Open = true;
    isDrawer2Open = false;
  }

  void openDrawer2() {
    scaffoldKey.currentState!.openEndDrawer();
    isDrawer1Open = false;
    isDrawer2Open = true;
  }

  void closeDrawer() {
    scaffoldKey.currentState!.openEndDrawer();
    isDrawer1Open = false;
    isDrawer2Open = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () {
              if (isDrawer1Open) {
                closeDrawer();
              } else {
                openDrawer1();
              }
            },
            icon: Icon(isDrawer1Open ? Icons.close : Icons.filter_alt_outlined),
          ),
        ],
      ),
      endDrawer: Drawer(
        child: Column(
          children: [
            ListTile(
              title: Text('Drawer 1 Item 1'),
              onTap: () {
                // Handle item tap for drawer 1
                closeDrawer();
              },
            ),
            // Add more items for drawer 1
          ],
        ),
      ),
      body: Column(
        children: [
          IconButton(
            icon: Icon(Icons.sort),
            onPressed: () {
              if (isDrawer2Open) {
                closeDrawer();
              } else {
                openDrawer2();
              }
            },
          ),
          // Add more content
        ],
      ),
    );
  }
}