Trying to add router with bottom navigation bar in CupertinoApp

Question

I am trying to add router with bottom navigation bar in CupertinoApp, but Navigator.pushNamed(context,anotherPage) is giving error

Could not find a generator for route RouteSettings("/anotherPage", null) in the _CupertinoTabViewState.

but Navigator.push(context, CupertinoPageRoute(builder: (context)=>AnotherPage())); is working Sample code:

return CupertinoApp(
  localizationsDelegates: <LocalizationsDelegate<dynamic>>[
    DefaultMaterialLocalizations.delegate,
    DefaultWidgetsLocalizations.delegate,
    DefaultCupertinoLocalizations.delegate,
  ],
  theme: CupertinoThemeData(brightness: Brightness.light),  
 onGenerateRoute: Router.generateRoute,
  initialRoute: splashScreen,
); }} 

//router class

    class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case homeRoute:
        return CupertinoPageRoute(builder: (_) => CupertinoHomePage()); 
      case productDetails:
        final ProductDetails args = settings.arguments;
        return CupertinoPageRoute(
            builder: (_) =>
                ProductDetails(args.productsPojo, args.userId));
      case anotherPage:
        return MaterialPageRoute(builder: (_) => AnotherPage());   
        case splashScreen:
        return MaterialPageRoute(builder: (_) => SplashScreen());    
      default:
        return MaterialPageRoute(builder: (_) => UndefinedView(name: settings.name));
    }
  }
}

Solution

I struggled with this for some time. CupertinoTabView has a 'routes' property. Put your app routes here

return CupertinoTabView(
      routes: appRoutes,
      builder: (BuildContext context) {
        return CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text(
              titles[currentRoute]
            ),
            trailing: FlatButton(
              child: Icon(Icons.search, color: Colors.white,),
              onPressed: openSearch,
            ),
          ),
          child: Material(
            child: Center(
              child: routes[currentRoute],
            ),
          ),
        );
      },
    );

appRoutes:

final appRoutes = {
  '/exampleRoute': (context) => ExampleRoute(),
  '/exampleRoute2': (context) => ExampleRoute2(),
}

You'll basically have to copy the routes you already declared in main.dart

Comments

[Sayed Talha]

the bottom nav bar is from google codelabs

[Sondre]

This looks similar to stackoverflow.com/questions/51663793/… so have a look if you can find the answer there. Are the variables you use in the switch cases strings that match what you pass to pushNamed? Got no experience with CupertinoApp so it might be correct, but why are some routes CupertinoPageRoute and some MaterialPageRoute?

[Sayed Talha]

Sir, variables are never a problem. I have a constant class which stores all variables. In the past I was using metarialApp and that is working fine with routes. Now when I switch on, the CupertinoApp issue begins. And i also tried that solution but it also not working with Cupertino tab bar

[Sayed Talha]

i think the issue is with BottomNavigationBar of CupertinoTabBar

[Sayed Talha]

yeah man it is working thanks for the help I will remember you lifetime

[Fabrunet]

Searched a longtime for that solution, thank you!

[Fatima ayaa]

thanks its helped, i have an issue is i want to get the current page name of CupertinoTabView but i get null , any idea ?