Named Routes trong Flutter
1. Giới thiệu
Named routes cho phép định nghĩa routes bằng tên thay vì tạo MaterialPageRoute mỗi lần:
Navigator.pushNamed(context, '/profile');2. Định nghĩa Routes
Trong MaterialApp
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/profile': (context) => ProfileScreen(),
'/settings': (context) => SettingsScreen(),
'/login': (context) => LoginScreen(),
},
)3. Navigate với Named Routes
pushNamed
Navigator.pushNamed(context, '/profile');pushReplacementNamed
Navigator.pushReplacementNamed(context, '/home');pushNamedAndRemoveUntil
Navigator.pushNamedAndRemoveUntil(
context,
'/home',
(route) => false, // Xóa tất cả
);popAndPushNamed
Navigator.popAndPushNamed(context, '/profile');4. Truyền Arguments
Gửi arguments
Navigator.pushNamed(
context,
'/profile',
arguments: {'userId': 123, 'name': 'John'},
);
// Hoặc với object
Navigator.pushNamed(
context,
'/profile',
arguments: User(id: 123, name: 'John'),
);Nhận arguments
class ProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Nhận arguments
final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
final userId = args['userId'];
// Hoặc với object
// final user = ModalRoute.of(context)!.settings.arguments as User;
return Scaffold(
appBar: AppBar(title: Text('User $userId')),
);
}
}5. onGenerateRoute - Dynamic Routes
Xử lý routes động với arguments:
MaterialApp(
initialRoute: '/',
onGenerateRoute: (settings) {
switch (settings.name) {
case '/':
return MaterialPageRoute(builder: (_) => HomeScreen());
case '/profile':
final args = settings.arguments as Map<String, dynamic>?;
return MaterialPageRoute(
builder: (_) => ProfileScreen(userId: args?['userId']),
);
case '/product':
final productId = settings.arguments as int;
return MaterialPageRoute(
builder: (_) => ProductScreen(productId: productId),
);
default:
return MaterialPageRoute(builder: (_) => NotFoundScreen());
}
},
)6. onUnknownRoute
Xử lý route không tồn tại:
MaterialApp(
onUnknownRoute: (settings) {
return MaterialPageRoute(
builder: (_) => NotFoundScreen(),
);
},
)7. Route Constants
Best practice: định nghĩa route names là constants:
class AppRoutes {
static const home = '/';
static const login = '/login';
static const profile = '/profile';
static const settings = '/settings';
static const productDetail = '/product';
}
// Sử dụng
Navigator.pushNamed(context, AppRoutes.profile);8. Ví dụ thực tế
Route Configuration
class AppRouter {
static const home = '/';
static const login = '/login';
static const profile = '/profile';
static const product = '/product';
static Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
case home:
return MaterialPageRoute(builder: (_) => HomeScreen());
case login:
return MaterialPageRoute(builder: (_) => LoginScreen());
case profile:
final userId = settings.arguments as int?;
return MaterialPageRoute(
builder: (_) => ProfileScreen(userId: userId ?? 0),
);
case product:
final product = settings.arguments as Product;
return MaterialPageRoute(
builder: (_) => ProductDetailScreen(product: product),
);
default:
return MaterialPageRoute(
builder: (_) => Scaffold(
body: Center(child: Text('Route not found: ${settings.name}')),
),
);
}
}
}
// main.dart
MaterialApp(
initialRoute: AppRouter.home,
onGenerateRoute: AppRouter.generateRoute,
)Navigation Helper
class NavigationService {
static void goToProfile(BuildContext context, int userId) {
Navigator.pushNamed(context, AppRoutes.profile, arguments: userId);
}
static void goToProduct(BuildContext context, Product product) {
Navigator.pushNamed(context, AppRoutes.product, arguments: product);
}
static void logout(BuildContext context) {
Navigator.pushNamedAndRemoveUntil(
context,
AppRoutes.login,
(route) => false,
);
}
}9. Hạn chế của Named Routes
- Không type-safe (arguments là dynamic)
- Khó refactor
- Không hỗ trợ deep linking tốt
💡 Khuyến nghị: Dùng GoRouter cho apps phức tạp (xem bài tiếp theo)
📝 Tóm tắt
| Method | Mô tả |
|---|---|
pushNamed | Navigate đến named route |
pushReplacementNamed | Replace với named route |
pushNamedAndRemoveUntil | Push và xóa stack |
popAndPushNamed | Pop và push named |
| Config | Mục đích |
|---|---|
routes | Map tĩnh route → widget |
onGenerateRoute | Dynamic route handling |
onUnknownRoute | Route không tồn tại |
Last updated on