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.

score 0 · Answer 1 · answered Oct 29 '19 at 11:24

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/

Flutter persistent bottom navigation bar and page view replacement approach

1 Answers1