CODEWITHSUNDEEP
flutter
Paul Coshott
Paul Coshott

Reputation: 1031

Flutter: Using a drawer menu to navigate pages

I'm using a Drawer to give the user a menu, and the menu items open different pages of the app. But what's happening, is each new page opened is being loaded on top of the previous page. What I need is to replace the current page with the newly requested page.

My main starts the app as:

void main() {  
  runApp(
    MaterialApp(
      home: MyJobs(),
    ),
  );
}

Each menu item loads the new screen as:

ListTile(
  title: Text('Time Off Requests'),
  leading: Icon(Icons.timer_off, color: Colors.redAccent),
  onTap: () {
    Navigator.of(context).pop();
    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => TimeOffRequests()));
  },
),

I realize I'm not unloading the current page. But i'm not sure how to do this. Or is there a better way to do this? In a more web way of thinking, I would like to create a blank body and then insert a page into that body (maybe using setState) and then each time another page is requested, the body is redrawn with the requested page (each page created as a custom widget?). Would this be a possible way of doing this?

Thanks for any help or suggestions.

Paul

Upvotes: 0

Views: 4604

Answers (2)

griffins
griffins

Reputation: 8274

from what i get you want to use a drawer with multiple pages. Here is a way of doing it .

first we create a drawer menu item

 //drawer class
    class DrawerItem {
      String title;
      IconData icon;
      IconThemeData iconThemeData;       

 DrawerItem(this.title, this.icon, this.iconThemeData);
}

then we setup our class as follows

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState()
final drawerItem = [
    DrawerItem("0", Icons.home, IconThemeData(color: Colors.black)),
    DrawerItem("1", Icons.card_giftcard,
        IconThemeData(color: Colors.redAccent)),
    DrawerItem("3", Icons.directions_bike,
        IconThemeData(color: Colors.black)),
    DrawerItem("3", Icons.account_balance_wallet,
        IconThemeData(color: Colors.black)),
    DrawerItem("4", Icons.settings, IconThemeData(color: Colors.black)),
    DrawerItem("5", Icons.live_help, IconThemeData(color: Colors.black)),
  ];
...
class _HomeState extends State<Home> {
 int _selectedDrawerIndex = 0;
 _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return ScreenZero();
      case 1:
        return ScreenOne(

        );
      case 2:
        return TwoScreen();
      case 3:
        return new Three();
      case 4:
        return Settings();
      case 5:
        return Help();

      default:
        return new Text("Error");
    }
  }
 _onSelectItem(int index) {
    setState(() => _selectedDrawerIndex = index);
    Navigator.of(context).pop(); // close the drawer
  }

...
 @override
  Widget build(BuildContext context) {
    var drawerOptions = <Widget>[];
    for (var i = 0; i < widget.drawerItem.length; i++) {
      var d = widget.drawerItem[i];
      drawerOptions.add(new ListTile(
        leading: new Icon(d.icon),
        title: new Text(d.title),
        selected: i == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }

    return Scaffold(
      //appbar
      appBar: AppBar(
        elevation: 0.0,
        iconTheme: IconThemeData(color: Colors.white),
        title: Text(widget.drawerItem[_selectedDrawerIndex].title,
            style: TextStyle(color: Colors.white)),
      ),
      drawer: Drawer(Column(children: drawerOptions)
       body: _getDrawerItemWidget(_selectedDrawerIndex),
....

Upvotes: 2

Darshan
Darshan

Reputation: 11679

Instead of Navigator.pop() and then Navigator.push(), use Navigator.pushReplacement() that will replace the previous / current screen with new one.

Hope this answers your question.

Upvotes: 5

Related Questions