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

Solution

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

Comments

[Haidar]

so you need to swipe pages when user click on icon in the bottom bar?If yes have a look at PageView youtube.com/watch?v=J1gE9xvph-A

[Vytautas Pranskunas]

hmm yyes i want to navigate to another page on bootm nav bar item click. If i understand correctly PageView it is something that belongs to one feature (account has different tabs). However bottom tabs are different features so like Account, Search etc. I think Routing here is better fit (maybe i am mistaking and do not understand when to use pageView and when to use Routing)? But my question remains - why navigation does not work when i have bottomnavigation in mainApp but it does work when i have bottomNavBar in seperate pages.

[SardorbekR]

Have you found a solution for this? is so could you please post it here in the answers

[abdalmonem]

see : stackoverflow.com/questions/60515525/…