Question 270636 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Possible to have 2 end drawer in a single page?

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.. 
                        }
                    )
            ]
        )
)
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search