← ClaudeAtlas

flutter-setup-declarative-routinglisted

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.
izo/Ulk · ★ 1 · Web & Frontend · score 68
Install: claude install-skill izo/Ulk
# 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 Ru