The navigation in this project is designed to centralize route management, making it easier to navigate between screens, handle undefined routes, and initialize necessary modules. The Routes class defines the available routes, while the RouteGenerator class handles the logic of generating the appropriate MaterialPageRoute for each route.
1. Navigation is defined and managed in lib/presentation/resources/routes_manager.dart
2. Define Routes
Routes class.class Routes {
static const String splashRoute = "/";
static const String onboardingRoute = "/onboarding";
static const String loginRoute = "/login";
static const String homeRoute = "/home";
static const String settingRoute = "/setting";
// Add more routes here
}
3. Generate Routes
RouteGenerator.getRoute method is responsible for returning the appropriate view based on the route name.class RouteGenerator {
static Route<dynamic> getRoute(RouteSettings settings) {
switch (settings.name) {
case Routes.splashRoute:
return MaterialPageRoute(builder: (_) => const SplashView());
// Add other cases here...
default:
return unDefinedRoute();
}
}
static Route<dynamic> unDefinedRoute() {
return MaterialPageRoute(
builder: (_) => Scaffold(
appBar: AppBar(
title: Text("No route found"),
),
body: Center(child: Text("No route found")),
),
);
}
}
4. Integration in main.dart
main.dart file, ensure that your MaterialApp uses the RouteGenerator for navigation:void main() {
runApp(MaterialApp(
initialRoute: Routes.splashRoute,
onGenerateRoute: RouteGenerator.getRoute,
));
}
5. How to Navigate Between Screens
Navigation between screens is straightforward using the Navigator class, with the routes defined in the Routes class.
Using Named Routes:
Navigator.pushNamed or Navigator.pushReplacementNamed.Navigator.pushNamed(context, Routes.loginRoute);LoginView as defined in RouteGenerator.getRoute.Navigating with Replacement:
Navigator.pushReplacementNamed when you want to navigate to a new screen and remove the current screen from the navigation stack.Navigator.pushReplacementNamed(context, Routes.homeRoute);HomeView, so pressing the back button will not return to the previous screen.Passing Arguments:
Navigator.pushNamed(
context,
Routes.settingRoute,
arguments: {"userId": 1},
);RouteGenerator, retrieve the arguments:case Routes.settingRoute:
final args = settings.arguments as Map<String, dynamic>;
return MaterialPageRoute(builder: (_) => SettingView(userId: args["userId"]));
6. Handling Back Navigation
Handling back navigation is an important aspect of managing the user's journey within the app. The default back navigation behavior in Flutter allows users to go back to the previous screen in the navigation stack, but you can customize this behavior if necessary.
Default Back Navigation:
Navigator.pop(context);Intercepting Back Button:
WillPopScope widget. This is useful if you need to perform additional actions before navigating back, such as showing a confirmation dialog.WillPopScope(
onWillPop: () async {
bool shouldLeave = await _showExitConfirmationDialog();
return shouldLeave;
},
child: Scaffold(
appBar: AppBar(title: Text("Home")),
body: Center(child: Text("Home View")),
),
);Custom Back Navigation Logic:
Navigator.popAndPushNamed method to immediately push a new route after popping the current one.Navigator.popAndPushNamed(context, Routes.loginRoute);
7. Handling Undefined Routes
When a user attempts to navigate to a route that is not defined in the Routes class, the unDefinedRoute method is triggered. This prevents the app from crashing and provides a user-friendly message.
Customizing Undefined Routes:
unDefinedRoute method returns a Scaffold with an AppBar and a message indicating that the route was not found.static Route<dynamic> unDefinedRoute() {
return MaterialPageRoute(
builder: (_) => Scaffold(
appBar: AppBar(
title: Text("Page Not Found"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Oops! This page does not exist."),
ElevatedButton(
onPressed: () {
Navigator.pushReplacementNamed(context, Routes.homeRoute);
},
child: Text("Go to Home"),
),
],
),
),
),
);
}