In Flutter, there are several Options for Navigation between screens or routes. Here are some common ones that come build-in – without external libraray:
- Navigator: This is a basic navigator that allows you to push new routes onto the navigator’s history stack and pop them when necessary.
- MaterialPageRoute: A material design-themed navigator that provides a smooth transition between screens, often used in Material Design apps.
- CupertinoPageRoute: An iOS-themed navigator that provides a similar experience to MaterialPageRoute but with an iOS look and feel.
- ModalRoute: A base class for routes that appear modally on top of the current screen (e.g., dialogs, alert boxes).
- Navigator.pushReplacement: Replaces the current route with a new one, removing all previous routes from the history stack.
- Navigator.pop: Removes the current route from the history stack and navigates back to the previous route.
For the named routes. You just need to define them in your MateerialApp:
routes: {
'/my_items': (context) => const MyItemsPage(),
'/people': (context) => const PeoplePage(),
'/my_items/item/:id': (context) => const ItemPage(),
'/people/person/:id': (context) => const PersonPage(),
},
Some other important widget include:
- WillPopScope: A widget that allows you to intercept the “back” button press before navigating away from a screen. With this, you may optionally
- restrict the back button
- make some more than one route – navigation back
You can use these navigation options to implement various types of routing in your Flutter app, including:
- Simple navigation with a single navigator stack
- Advanced routing with multiple stacks (e.g., nested navigators)
- Modal dialog-style navigation for specific use cases
What abount Navigation 2.0?
Navigation 2.0 is a new set of APIs introduced in Flutter 2.0, which provides a more efficient and flexible way to handle navigation between routes.
Here are some key features of Navigation 2.0:
- Improved performance: Navigation 2.0 uses a more efficient routing system that reduces the overhead associated with traditional navigator widgets.
- Route-based architecture: Navigation 2.0 encourages a route-based architecture, where each screen is represented as a separate route in the app’s navigation graph.
- Navigator 2.0 widget: The
Navigator 2.0
widget replaces the traditionalNavigator
widget and provides more fine-grained control over routing. - Route management: Navigation 2.0 introduces a new
routeInfo
property, which provides information about the current route, such as its path, parameters, and whether it’s modally presented.
Some benefits of using Navigation 2.0 include:
- Improved app startup times
- Reduced memory usage
- Easier navigation between routes
auto_route
A package that simplifies the process of setting up a navigator in your Flutter app.
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () => AutoRouter.of(context).pushNamed('/details'),
child: Text('Navigate to Details Screen'),
);
}
}
GetX
GetX
is a state management library that provides a simple way to manage state and navigate between screens.
import 'package:get/get.dart';
class AppRouter extends GetxController {
final _navigatorKey = Get.key;
void navigateToDetails() {
Get.toNamed('/details');
}
}
void main() {
runApp(GetMaterialApp(
home: HomeScreen(),
router: AppRouter(),
));
}
In this example, GetX
is used to manage the state of the app and provide a way to navigate between screens. The AppRouter
class extends GetXController
and provides a method to navigate to the details screen.
Go Router
Go Router
is a library that provides a simple way to implement a router in Flutter.
import 'package:go_router/go_router.dart';
class AppRouter {
final _router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => HomeScreen(),
),
GoRoute(
path: '/details',
builder: (context, state) => DetailsScreen(),
),
],
);
void navigateToDetails() {
_router.push('/details');
}
}
In this example, Go Router
is used to define the routes of the app. The AppRouter
class provides a method to navigate to the details screen.
You can use either GetX
or Go Router
to implement navigation in your Flutter app, depending on your personal preference and the specific requirements of your project.
Here are some pros and cons of each library:
GetX
Pros:
- Simple to use
- Provides a simple way to manage state and navigate between screens
- Well-documented
Cons:
- Not as customizable as
Go Router
- May require additional setup for complex routing scenarios
Go Router
Pros:
- Highly customizable
- Can handle complex routing scenarios
- Supports nested routes and parameter passing
Cons:
- Steeper learning curve compared to
GetX
- May be more verbose than
GetX
for simple routing scenarios