Configure `MaterialApp.router` using a package like `go_router` for advanced URL-based navigation. Use when developing web applications or mobile apps that require specific deep linking and browser hi
1---2name: flutter-setup-declarative-routing3description: Configure `MaterialApp.router` using a package like `go_router` for advanced URL-based navigation. Use when…4---56# skills/flutter-setup-declarative-routing/SKILL.md
F
SKILL.mdAgent skill
Transport
File
Status
Listed
SKILL.md
Install
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
shterminal
1npx skills add flutter/agent-plugins --skill flutter-setup-declarative-routing -a cursor -y
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
Configure `MaterialApp.router` using a package like `go_router` for advanced URL-based navigation. Use when developing web applications or mobile apps that require specific deep linking and browser history support.
How do I install flutter-setup-declarative-routing?
Download skills/flutter-setup-declarative-routing/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does flutter-setup-declarative-routing live?
The publisher keeps it at https://github.com/flutter/agent-plugins.
Which agents can use flutter-setup-declarative-routing?
Claude, Cursor, Codex, and Grok Build can read a SKILL.md you add from the publisher's repository. Grok Bot installs it when you send the skill's GitHub folder link in a chat.
From the publisher
SKILL.md
name
flutter-setup-declarative-routing
description
Configure `MaterialApp.router` using a package like `go_router` for advanced URL-based navigation. Use when developing web applications or mobile apps that require specific deep linking and browser history support.
Use the go_router package for declarative routing in Flutter. It provides a robust API for complex routing scenarios, deep linking, and nested navigation.
GoRouter: The central configuration object defining the application's route tree.
GoRoute: A standard route mapping a URL path to a Flutter screen.
ShellRoute / StatefulShellRoute: Wraps child routes in a persistent UI shell (e.g., a BottomNavigationBar). StatefulShellRoute maintains the state of parallel navigation branches.
Path URL Strategy: Removes the default # fragment from web URLs, essential for clean deep linking across platforms.
Workflow: Initializing the Application and Router
Follow this workflow to bootstrap a new Flutter application with go_router and configure the root routing mechanism.
Task Progress
Create the Flutter application.
Add the go_router dependency.
Configure the URL strategy for web/deep linking.
Implement the GoRouter configuration.
Bind the router to MaterialApp.router.
1. Scaffold the Application
Run the following commands to create the app and add the required routing package:
flutter create <app-name>
cd <app-name>
flutter pub add go_router
2. Configure the Router
Define a top-level GoRouter instance. Handle authentication or state-based routing using the redirect parameter.
Modify Info.plist: Opt-in to Flutter's default deep link handler.
Note: If using a third-party deep linking plugin (e.g., app_links), set this to NO to prevent conflicts.
<key>FlutterDeepLinkingEnabled</key>
<true/>
Modify Runner.entitlements: Add the associated domain.
Host apple-app-site-association: Serve the following JSON (without a .json extension) at https://yourdomain.com/.well-known/apple-app-site-association.
Implement the UI shell that consumes the StatefulNavigationShell to handle branch switching.
class ScaffoldWithNavBar extends StatelessWidget {
const ScaffoldWithNavBar({
required this.navigationShell,
super.key,
});
final StatefulNavigationShell navigationShell;
void _goBranch(int index) {
navigationShell.goBranch(
index,
// Support navigating to the initial location when tapping the active tab.
initialLocation: index == navigationShell.currentIndex,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: navigationShell,
bottomNavigationBar: NavigationBar(
selectedIndex: navigationShell.currentIndex,
onDestinationSelected: _goBranch,
destinations: const [
NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
}
}
Programmatic Navigation
Use the context.go() and context.push() extension methods provided by go_router.
// Replaces the current route stack with the target route (Declarative)
context.go('/details/123');
// Pushes the target route onto the existing stack (Imperative)
context.push('/details/123');
// Navigates using a named route and path parameters
context.goNamed('details', pathParameters: {'id': '123'});
// Pops the current route
context.pop();