'Drawer navigation that preserves state

I've got a basic navigation drawer with three options: Home, Settings, & About. I'm reusing this Drawer in each of my views.

Abbreviated version:

Drawer(
  ...
      children: [
        InkWell(
          onTap: () {
            Navigator.of(context).pop(); //Close drawer
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => HomepageView(),
              ),
            );
          },
...
        ),
        InkWell(
          onTap: () {
            Navigator.of(context).pop(); //Close drawer
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SettingsView(),
              ),
            );
          },
...
        ),
        InkWell(
          onTap: () {
            Navigator.of(context).pop(); //Close drawer
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => AboutView(),
              ),
            );
          },
...
        ),
      ],
...
);

This works, but it creates a new state of each view every time. That ends up causing a refresh of state every time the user clicks on the "Home" option (creating a new HomepageView) and causes a large stack when navigating back with the "back" button.

What's the best way to create a navigation drawer that preserves the state of each view?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source