CODEWITHSUNDEEP
flutternavigation-drawer
TheCattyDev
TheCattyDev

Reputation: 111

Click on each item in Navigation Drawer with Multiple Fragments in Flutter reloads the screen

I have implemented a Navigation Drawer with Multiple Fragments in Flutter as below tutorial but when I click on each navigation drawer item, it rebuilds each screen again. How can I keep it alive? I don't want each screen to rebuild. Thanks in advance for your help :)

https://medium.com/@kashifmin/flutter-setting-up-a-navigation-drawer-with-multiple-fragments-widgets-1914fda3c8a8?fbclid=IwAR2uur5NsehbJkh9FK8O6ZigmbQBx0V50i-DzyGlaJSpN7IkvijqhWL9GGw

class DrawerItem {
  String title;
  IconData icon;

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

class HomePage extends StatefulWidget {
  final drawerItems = [
    new DrawerItem("Sales", Icons.shopping_basket),
    new DrawerItem("Items", Icons.category),
    new DrawerItem("Setting", Icons.settings)
  ];

  @override
  State<StatefulWidget> createState() {
    return new _HomepageState();
  }
}

class _HomepageState extends State<HomePage> with TickerProviderStateMixin {
  int _selectedDrawerIndex = 0;

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new SaleGrid();
      case 1:
        return new ItemsList();

      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.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(new ListTile(
        leading: new Icon(d.icon),
        title: new Text(d.title),
        selected: i == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }

    return new Scaffold(
      appBar: new AppBar(
        // here we display the title corresponding to the fragment
        // you can instead choose to have a static title
        title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
      ),
      drawer: new Drawer(
        child: new Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text('Kimsung'),
              accountEmail: Text('[email protected]'),
              currentAccountPicture: ClipOval(
                child: Image.asset(
                  'assets/profile.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            new Column(children: drawerOptions)
          ],
        ),
      ),
      body: _getDrawerItemWidget(_selectedDrawerIndex),
    );
  }
}

Upvotes: 1

Views: 2323

Answers (1)

Miguel Ruivo
Miguel Ruivo

Reputation: 17766

You can add the AutomaticKeepAliveClientMixin to your Drawer fragment so to speak, and set the automatic keep alive flag to true as well as call the super.build() in the build method.

class Fragment1 extends StatelessWidget with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    // return your widget tree
  }

}

Upvotes: 1

Related Questions