declarative-routinglisted
Install: claude install-skill smicolon/ai-kit
# Declarative Routing with GoRouter
Guide for configuring declarative routing, deep linking, and nested navigation in Flutter apps using `go_router`.
## Setup & Initialization
Add dependency:
```yaml
dependencies:
go_router: ^14.0.0
```
Configure in `MaterialApp.router`:
```dart
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: appRouter,
title: 'My App',
);
}
}
```
## Router Configuration
```dart
final appRouter = GoRouter(
initialLocation: '/',
routes: [
GoRoute(
path: '/',
builder: (context, state) => const HomeScreen(),
routes: [
GoRoute(
path: 'details/:id',
builder: (context, state) {
final id = state.pathParameters['id']!;
return DetailsScreen(id: id);
},
),
],
),
GoRoute(
path: '/login',
builder: (context, state) => const LoginScreen(),
),
],
redirect: (context, state) {
final isAuthenticated = authService.isLoggedIn;
final isGoingToLogin = state.matchedLocation == '/login';
if (!isAuthenticated && !isGoingToLogin) {
return '/login?redirect=${state.matchedLocation}';
}
if (isAuthenticated && isGoingToLogin) {
return '/';
}
return null;
},
);
```
## ShellRoute for Nested Navigation (Bottom Nav / Drawer)
```dart
ShellRoute(
builder: (context, state, child) {