Labsco
flutter logo

flutter-setup-declarative-routing

✓ Official★ 2,600

by flutter · part of flutter/skills

Configure `MaterialApp.router` using a package like `go_router` for advanced URL-based navigation. Use when developing web applications or mobile apps that…

🔥🔥🔥✓ VerifiedFreeQuick setup
#automation#git#maps#translation
🧩 One of 7 skills in the flutter/skills package — works on its own, and pairs well with its siblings.

Configure `MaterialApp.router` using a package like `go_router` for advanced URL-based navigation. Use when developing web applications or mobile apps that…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by flutter

Configure MaterialApp.router using a package like go_router for advanced URL-based navigation. Use when developing web applications or mobile apps that… npx skills add https://github.com/flutter/skills --skill flutter-setup-declarative-routing Download ZIPGitHub2.6k

Implementing Routing and Deep Linking

Contents

  • Core Concepts

  • Workflow: Initializing the Application and Router

  • Workflow: Configuring Platform Deep Linking

  • Workflow: Implementing Nested Navigation

  • 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:

Copy & paste — that's it
flutter create 
cd 
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.

Copy & paste — that's it
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:flutter_web_plugins/url_strategy.dart';

void main() {
 // Use path URL strategy to remove the '#' from web URLs
 usePathUrlStrategy();
 runApp(const MyApp());
}

final GoRouter _router = GoRouter(
 initialLocation: '/',
 routes: [
 GoRoute(
 path: '/',
 builder: (context, state) => const HomeScreen(),
 routes: [
 GoRoute(
 path: 'details/:id',
 builder: (context, state) => DetailsScreen(id: state.pathParameters['id']!),
 ),
 ],
 ),
 ],
 errorBuilder: (context, state) => ErrorScreen(error: state.error),
);

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
 return MaterialApp.router(
 routerConfig: _router,
 title: 'Routing App',
 );
 }
}

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.

Copy & paste — that's it
final GoRouter _router = GoRouter(
 initialLocation: '/home',
 routes: [
 StatefulShellRoute.indexedStack(
 builder: (context, state, navigationShell) {
 return ScaffoldWithNavBar(navigationShell: navigationShell);
 },
 branches: [
 StatefulShellBranch(
 routes: [
 GoRoute(
 path: '/home',
 builder: (context, state) => const HomeScreen(),
 ),
 ],
 ),
 StatefulShellBranch(
 routes: [
 GoRoute(
 path: '/settings',
 builder: (context, state) => const SettingsScreen(),
 ),
 ],
 ),
 ],
 ),
 ],
);

Examples

High-Fidelity Shell Widget Implementation

Implement the UI shell that consumes the StatefulNavigationShell to handle branch switching.

Copy & paste — that's it
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.

Copy & paste — that's it
// 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();