flutter-setup-declarative-routing

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.

By flutter · 30,896 installs

npx skills add flutter/agent-plugins --skill flutter-setup-declarative-routing

Source repository · Upstream listing

Implementing Routing and Deep Linking Contents [Core Concepts]( core concepts) [Workflow: Initializing the Application and Router]( workflow initializing the application and router) [Workflow: Configuring Platform Deep Linking]( workflow configuring platform deep linking) [Workflow: Implementing Nested Navigation]( workflow implementing nested navigation) [Examples]( examples) Core Concepts 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: 2. Configure the Router Define a top level GoRouter instance. Handle authentication or state based routing using the redirect parameter. Workflow: Configuring Platform Deep Linking Configure the native platforms to intercept specific URLs and route them into the Flutter application. Task Progress [ ] Determine target platforms (iOS, Android, or both). [ ] Apply conditional configuration for Android (Manifest + Asset Links). [ ] Apply conditional configuration for iOS (Plist + Entitlements + AASA). [ ] Run validator review errors fix. If configuring for Android: 1. Modify AndroidManifest.xml : Add the intent filter inside the <activity tag for .MainActivity . 2. Host assetlinks.json : Serve the following JSON at https://yourdomain.com/.well known/assetlinks.json . If configuring for iOS: 1. 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. 2. Modify Runner.entitlements : Add the associated domain. 3. Host apple app site association : Serve the following JSON (without a .json extension) at https://yourdomain.com/.well known/apple app site association . Validation Loop Run validator review errors fix. Android : Test using ADB. iOS : Test using xcrun on a booted simulator. Workflow: Implementing Nested Navigation Use StatefulShellRoute to implement persistent UI shells (like a bottom navigation bar) that maintain the state of their child routes. Task Progress [ ] Define StatefulShellRoute.indexedStack in the GoRouter configuration. [ ] Create StatefulShellBranch instances for each navigation tab. [ ] Implement the shell widget using StatefulNavigationShell . Examples High Fidelity Shell Widget Implementation Implement the UI shell that consumes the StatefulNavigationShell to handle branch switching. Programmatic Navigation Use the context.go() and context.push() extension methods provided by go router .