Flutter persistent bottom navigation bar and page view replacement approach

Question

I have a Navbar state full widget that tracks current page and returns a widget with a bottom navbar and dynamic body based of current page which is stored as a state

class _PullingoNavbarState extends State<PullingoNavbar> {
      static int _page = 1;
      final _screens = {0: PullingoMap(), 1: Dashboard(), 2: Dashboard()};
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: _screens[_page],
          bottomNavigationBar: CurvedNavigationBar(
            animationDuration: Duration(milliseconds: 200),
            backgroundColor: Colors.blueAccent,
            index: _page,
            items: <Widget>[
              PullingoIcon(icon: Icons.favorite),
              PullingoIcon(icon: Icons.chrome_reader_mode),
              PullingoIcon(icon: Icons.person),
            ],
            onTap: (index) {
              setState(() {
                _page = index;
              });
            },
          ),
        );
      }
    }

and the root widget as follows:

class RoutesWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
      title: 'PULLINGO',
      theme: pullingoTheme,
      routes: {
        "/": (_) => PullingoNavbar(),
      },
    );
}

pre creating instances of _screens in a map doesn't feel like a good approach to me. this probably will create states of those screens regardless of user visits them or not. There are few suggestions given here . does the above method look okay or should I completely avoid this approach.

Answer 1

You can use PageView and AutomaticKeepAliveClientMixin to persist your widgets when navigating. With this approach a widget is only created when a user navigates to it by bottom navigation bar. I have recently written an article about how to use it, might be useful.

https://cantaspinar.com/persistent-bottom-navigation-bar-in-flutter/