Cannot make bottom navigation bar and routing work together in flutter

Question

I am new to flutter and i cannot navigate to new page from bottom navigation bar

I have main app

    class MyApp extends StatelessWidget {
          @override
           Widget build(BuildContext context) {
            SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
              statusBarColor: Colors.transparent,
            ));
            return MaterialApp(
              title: 'Flutter Demo',
              theme: ThemeData(primarySwatch: Colors.blue),
              builder: (BuildContext buildContext, Widget widtget) => Scaffold(
                body: RootNavigator(),
                bottomNavigationBar: BottomNavigation(),
              ),
            );
          }
        }

and Rootnavigator

    class RootNavigator extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Navigator(
          initialRoute: '/',
          onGenerateRoute: (RouteSettings settings) {
            // final args = settings.arguments;

            return MaterialPageRoute(
                settings: settings,
                builder: (BuildContext context) {
                  switch (settings.name) {
                    case '/':
                      return Page1();
                    case '/page2':
                      return Page2();
                    case '/page3':
                      return Page3();
                    default:
                      return RouteErrorPage();
                  }
                });
              },
            );
          }
    }

And bottom navigator

class BottomNavigation extends StatefulWidget {
  @override
  BottomNavigationState createState() {
    return new BottomNavigationState();
  }
}

class BottomNavigationState extends State<BottomNavigation> {
  int currIndex = 0;

  onTap(int index) {
    setState(() => currIndex = index);
    switch (index) {
      case 0:
        Navigator.pushNamed(context, '/');
        break;
      case 1:
        Navigator.pushNamed(context, '/page2');
        break;
      case 2:
        Navigator.pushNamed(context, 'page3');
        break;
      default:
        Navigator.push(
            context, MaterialPageRoute(builder: (_) => RouteErrorPage()));
    }
  }
   ....
  // added app bar items
}

Tabs are switching but routes are not. It stays on home page. I feel like there is something with context but do not know how to solve it. Can anybody help? Thanks

p.s. if i move bottom navigation bar to each page separatly everything work sexcept selected tab (because of state) and also i want to keep one, shared app bar

Answer 1

Answer is - @LoVe comment was correct. Thats how flutter works. if you have bottom navigation you have to swipe through pages. Redirection means moving to completely new page and there you have to define Scaffold from sratch. If you want to have shared AppBar - make it reusable widget