I want to include the go router package in my flutter project, but I’m having trouble because I’m very new to this subject. The problem I’m having is that I created nested pages and when you give this kind of sub-page, a back button is automatically created in the appbar. When I click on this back button, it prints the same page again, while I expect it to return to the previous page.
below I share my code with you
class AppNavigation {
AppNavigation._();
static String initial = "/splashScreen";
// Private navigators
static final _rootNavigatorKey = GlobalKey<NavigatorState>();
static final _shellNavigatorHome =
GlobalKey<NavigatorState>(debugLabel: 'shellHome');
static final _shellNavigatorHomePageForBidder =
GlobalKey<NavigatorState>(debugLabel: 'shellHomePageForBidder');
static final _shellNavigatorBuyVehicleCategory =
GlobalKey<NavigatorState>(debugLabel: 'shellNavigatorBuyVehicleCategory');
static final _shellNavigatorSellCarPage =
GlobalKey<NavigatorState>(debugLabel: 'shellNavigatorSellCarPage');
static final _shellNavigatorServicesPage =
GlobalKey<NavigatorState>(debugLabel: 'shellNavigatorServicesPage');
static final _shellNavigatorMyOffersPage =
GlobalKey<NavigatorState>(debugLabel: 'shellNavigatorMyOffersPage');
static final _shellNavigatorMyFavCars =
GlobalKey<NavigatorState>(debugLabel: 'shellNavigatorMyFavCars');
static final _shellNavigatorMyCarsList =
GlobalKey<NavigatorState>(debugLabel: 'shellNavigatorMyCarsList');
static final _shellNavigatorMessages =
GlobalKey<NavigatorState>(debugLabel: 'shellMessages');
static final _shellNavigatorNotifications =
GlobalKey<NavigatorState>(debugLabel: 'shellNotifications');
// GoRouter configuration
static final GoRouter router = GoRouter(
initialLocation: initial,
debugLogDiagnostics: true,
navigatorKey: _rootNavigatorKey,
routes: [
/// MainWrapper
StatefulShellRoute.indexedStack(
builder: (context, state, navigationShell) {
return MainPage(
navigationShell: navigationShell,
);
},
branches: <StatefulShellBranch>[
/// Brach Home
StatefulShellBranch(
navigatorKey: _shellNavigatorHome,
routes: <RouteBase>[
GoRoute(
path: "/homePage",
name: "HomePage",
builder: (BuildContext context, GoRouterState state) =>
const HomePage(),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavigatorHomePageForBidder,
routes: <RouteBase>[
GoRoute(
path: "/homePageForBidder",
name: "HomePageForBidder",
builder: (BuildContext context, GoRouterState state) =>
const HomePageForBidder(),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavigatorBuyVehicleCategory,
routes: <GoRoute>[
GoRoute(
path: "/buyVehicleCategory",
name: "BuyVehicleCategory",
builder: (BuildContext context, GoRouterState state) {
return const BuyVehicleCategory();
},
routes: <GoRoute>[
GoRoute(
path: "buySubVehicleCategory",
name: "BuySubVehicleCategory",
builder: (BuildContext context, GoRouterState state) {
final CategoryModel params = state.extra as CategoryModel;
return BuySubVehicleCategory(
categoryModel: params,
);
},
routes: <GoRoute>[
GoRoute(
path: "buyCarPage",
name: "BuyCarPage",
builder: (BuildContext context, GoRouterState state) {
final CategoryModel params =
state.extra as CategoryModel;
final int jobCategoryId = params.id!;
return BuyCarPage(jobCategoryId: jobCategoryId);
},
),
],
),
],
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavigatorSellCarPage,
routes: <RouteBase>[
GoRoute(
path: "/sellCarPage",
name: "SellCarPage",
builder: (BuildContext context, GoRouterState state) =>
const SellCarPage(),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavigatorServicesPage,
routes: <RouteBase>[
GoRoute(
path: "/servicesPage",
name: "ServicesPage",
builder: (BuildContext context, GoRouterState state) =>
const ServicesPage(),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavigatorMyOffersPage,
routes: <RouteBase>[
GoRoute(
path: "/myOffersPage",
name: "MyOffersPage",
builder: (BuildContext context, GoRouterState state) =>
const MyOffersPage(),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavigatorMyFavCars,
routes: <RouteBase>[
GoRoute(
path: "/myFavCarsListPage",
name: "MyFavCarsListPage",
builder: (BuildContext context, GoRouterState state) =>
const MyFavCarsListPage(),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavigatorMyCarsList,
routes: <RouteBase>[
GoRoute(
path: "/myCarsListingPage",
name: "MyCarsListingPage",
builder: (BuildContext context, GoRouterState state) =>
const MyCarsListingPage(),
),
],
),
/// Brach Setting
StatefulShellBranch(
navigatorKey: _shellNavigatorMessages,
routes: <RouteBase>[
GoRoute(
path: "/messagesPage",
name: "MessagesPage",
builder: (BuildContext context, GoRouterState state) =>
const MessagesPage(),
),
],
),
/// Brach Setting
StatefulShellBranch(
navigatorKey: _shellNavigatorNotifications,
routes: <RouteBase>[
GoRoute(
path: "/notificationsPage",
name: "NotificationsPage",
builder: (BuildContext context, GoRouterState state) =>
const NotificationsPage(),
),
],
),
],
),
GoRoute(
path: '/splashScreen',
name: "Splash",
builder: (BuildContext context, GoRouterState state) =>
const SplashPage(),
),
GoRoute(
path: '/carDetailPage',
name: "CarDetailPage",
builder: (BuildContext context, GoRouterState state) {
final Map<String, dynamic> params =
state.extra as Map<String, dynamic>;
final int jobId = params['jobId'];
final CustomerViewModel customerViewModel =
params['customerViewModel'];
final String title = params['title'];
final Customer? customer = params['customer'];
final VoidCallback onJobStatusChanged =
params['onJobStatusChanged'];
return CarDetailPage(
title: title,
customer: customer,
jobId: jobId,
customerViewModel: customerViewModel,
onJobStatusChanged: onJobStatusChanged,
);
}),
GoRoute(
path: '/screenSelection',
name: "ScreenSelection",
builder: (BuildContext context, GoRouterState state) =>
const ScreenSelection(),
),
],
);
}
The part I have a problem with is the BuyVehicleCategory and its subpages
I changed the navigator keys and Parent keys, sometimes I used the same and sometimes I used different keys but I could not get a result.
Serhat Bilal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.