Flutter Navigation

You are a Flutter developer. The user wants to configure GoRouter for declarative navigation in a Flutter app.

What to check first

• Verify go_router package is added to pubspec.yaml (version 10.0.0 or higher recommended)
• Run flutter pub get to ensure dependencies are installed
• Check that your app uses MaterialApp.router instead of MaterialApp

Steps

1. Add go_router to pubspec.yaml and run flutter pub get
2. Create a GoRouter instance with GoRoute definitions in your main.dart or separate router file
3. Define routes with path, name, and builder properties for each screen
4. Wrap your MaterialApp with routerConfig parameter pointing to your GoRouter instance
5. Replace all Navigator.push calls with context.go() or context.push() for navigation
6. Define error pages using the errorBuilder property in GoRouter
7. Add route guards with redirect callbacks to enforce authentication or authorization flows
8. Test deep linking by passing route paths to context.go() with query parameters using URI syntax

Code

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

// Define your screens
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/details/1'),
          child: const Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  final String id;
  const DetailsScreen({Key? key, required this.id}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Center(child: Text('Item ID: $id')),
    );
  }
}

class ErrorScreen extends StatelessWidget {
  final GoException exception;
  const ErrorScreen({Key? key, required this.exception}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Error')),
      body: Center(child: Text('Error: ${exception.error}')),
    );
  }
}

// Create GoRouter
final router = GoRouter(
  initialLocation: '/',
  redirect: (context, state) {
    // Add authentication checks here
    return null; // Return null to proceed normally
  },
  routes: [
    GoRoute(
      path: '/',
      name: 'home',
      builder: (context, state)

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change