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

how can i isolate drawer in flutter?

**Hello guys, I need to isolate the drawer so that I can use it on any screen and on any button in my application, how can I do that?

This is the default drawer example…….

How can I use an IconButton or an ElevatedButton for example that are on another screen?
**

class NavigationDrawerDemo extends StatefulWidget {
  const NavigationDrawerDemo({Key? key}) : super(key: key);

  @override
  State<NavigationDrawerDemo> createState() => _NavigationDrawerDemoState();
}

class _NavigationDrawerDemoState extends State<NavigationDrawerDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Navigation Drawer',
        ),
        backgroundColor: const Color(0xff764abc),
      ),
      endDrawer: Drawer(
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              child: Text("Header"),
            ),
            ListTile(
              leading: Icon(
                Icons.home,
              ),
              title: const Text('Page 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(
                Icons.train,
              ),
              title: const Text('Page 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    In other screens you can open it or close it by calling

    Scaffold.of(context).openEndDrawer();

    and

    Scaffold.of(context).closeEndDrawer();
    Login or Signup to reply.
  2. 0

    I don’t get why would you would try to open the drawer from another screen when is not showing it. For your example to work just made few changes:

    • Add and index variable to know what "page" is showing
    • Add widgets to show in different pages

    I understand that this is what you’re lookin for:

    Modified code:

    class NavigationDrawerDemo extends StatefulWidget {
const NavigationDrawerDemo({Key? key}) : super(key: key);
int page = 1; // This would hold the pageIndex that's shown
  @override
  State<NavigationDrawerDemo> createState() => _NavigationDrawerDemoState();
}

class _NavigationDrawerDemoState extends State<NavigationDrawerDemo> {
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Navigation Drawer',
        ),
        backgroundColor: const Color(0xff764abc),
      ),
      drawer: Drawer(
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              child: Text("Header"),
            ),
            ListTile(
              selected: widget.page == 1, //adding selected to make it consistent
              leading: Icon(
                Icons.home,
              ),
              title: const Text('Page 1'),
              onTap: () {
                setState(() {
                  widget.page = 1; //When tapping change page
                });

                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(
                Icons.train,
              ),
              selected: widget.page == 2, //adding selected to make it consistent
              title: const Text('Page 2'), //When tapping change page
              onTap: () {
                Navigator.pop(context);
                setState(() {
                  widget.page = 2;
                });
              },
            ),
          ],
        ),
      ),
    /* THIS IS THE WIDGETS SHOWN ON THE "MAIN PAGE" */
      body: widget.page == 1 //Conditional to show the widgets corresponding to the pageSelected
          ? Center(child: Text("Page ${widget.page}"))
          : Container(
              color: Colors.green,
              child: Center(
                child: Text(
                  "Page ${widget.page}",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search