Flutter go_router ShellRoute Hero example

main.dart

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

void main() {
  runApp(MyApp());
}

final _rootKey = GlobalKey<NavigatorState>();
final _nestedKey = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  // GoRouter configuration
  final _router = GoRouter(
    navigatorKey: _rootKey,
    routes: [
      ShellRoute(
        navigatorKey: _nestedKey,
        pageBuilder: (context, state, child) {
          return MaterialPage(
            child: HeroControllerScope(
              controller: MaterialApp.createMaterialHeroController(),
              child: MyScaffold(
                child: child,
              ),
            ),
          );
        },
        routes: [
          // Settings route config hidden
          GoRoute(
            path: '/a',
            pageBuilder: (context, state) => CustomTransitionPage(
              key: state.pageKey,
              child: MyHomePage(title: 'Flutter Demo Home Page'),
              transitionsBuilder: (BuildContext context,
                  Animation<double> animation,
                  Animation<double> secondaryAnimation,
                  Widget child) {
                return FadeTransition(
                  opacity: animation,
                  child: child,
                );
              },
            ),
            routes: [
              GoRoute(
                path: 'details',
                pageBuilder: (context, state) => CustomTransitionPage(
                  key: state.pageKey,
                  child: DetailsPage(),
                  transitionsBuilder:
                      (context, animation, secondaryAnimation, child) {
                    return FadeTransition(
                      opacity: animation,
                      child: child,
                    );
                  },
                ),
              ),
            ],
          ),
          // Second tab routing hidden
        ],
      ),
      GoRoute(
        parentNavigatorKey: _rootKey,
        path: '/',
        builder: (context, state) => Scaffold(
            body: Center(
          child: TextButton(
              onPressed: () => context.go('/a'), child: Text('Go A')),
        )),
      ),
    ],
  );

  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routerConfig: _router,
    );
  }
}

class MyScaffold extends StatelessWidget {
  final Widget child;

  const MyScaffold({
    super.key,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return Scaffold(
        appBar: AppBar(
          leading: BackButton(
            onPressed: () {
              context.go('/a');
            },
          ),
        ),
        body: child,
      );
    });
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Hero(
          tag: 'Hello World Hero',
          child: Card(
            child: Text('Hello World'),
          )),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Hero(
              tag: 'Hello World Hero', child: Card(child: Text('Hello World'))),
          TextButton(
            onPressed: () => GoRouter.of(context).go('/a/details'),
            child: Text('Go Details'),
          )
        ],
      ),
    );
  }
}