flutter_router_shell.dart

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

final GlobalKey<NavigatorState> _rootNavKey = GlobalKey<NavigatorState>();
final GlobalKey<NavigatorState> _shellNavKey = GlobalKey<NavigatorState>();

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

class ShellRouteExampleApp extends StatelessWidget {
  ShellRouteExampleApp({Key? key}) : super(key: key);

  final GoRouter _router = GoRouter(
    navigatorKey: _rootNavKey,
    initialLocation: '/overview',
    routes: <RouteBase>[
      ShellRoute(
        navigatorKey: _shellNavKey,
        builder: (BuildContext context, GoRouterState state, Widget child) {
          return ScaffoldWithNavBar(child: child);
        },
        routes: <RouteBase>[
          GoRoute(
            path: '/overview',
            builder: (BuildContext context, GoRouterState state) {
              return const OverviewPage();
            },
            routes: <RouteBase>[
              GoRoute(
                path: 'details',
                builder: (BuildContext context, GoRouterState state) {
                  return const DetailsScreen(label: 'Overview');
                },
              ),
              GoRoute(
                parentNavigatorKey: _rootNavKey,
                path: 'rootDetails',
                builder: (BuildContext context, GoRouterState state) {
                  return const DetailsScreen(label: 'Overview');
                },
              ),
            ],
          ),
          GoRoute(
            path: '/reporting',
            builder: (BuildContext context, GoRouterState state) {
              return const ReportingPage();
            },
            routes: <RouteBase>[
              GoRoute(
                path: 'details',
                parentNavigatorKey: _rootNavKey,
                builder: (BuildContext context, GoRouterState state) {
                  return const DetailsScreen(label: 'Reporting');
                },
              ),
            ],
          ),
          GoRoute(
            path: '/mToken',
            builder: (BuildContext context, GoRouterState state) {
              return const MtokenPage();
            },
            routes: <RouteBase>[
              GoRoute(
                path: 'details',
                builder: (BuildContext context, GoRouterState state) {
                  return const DetailsScreen(label: 'mToken');
                },
              ),
            ],
          ),
        ],
      ),
    ],
  );

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

class ScaffoldWithNavBar extends StatelessWidget {
  const ScaffoldWithNavBar({
    required this.child,
    Key? key,
  }) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.account_balance),
            label: 'Overview',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.note),
            label: 'Reporting',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.token),
            label: 'mToken',
          ),
        ],
        currentIndex: _calculateSelectedIndex(context),
        onTap: (int idx) => _onItemTapped(idx, context),
      ),
    );
  }

  static int _calculateSelectedIndex(BuildContext context) {
    final String location = GoRouterState.of(context).location;
    if (location.startsWith('/overview')) {
      return 0;
    }
    if (location.startsWith('/reporting')) {
      return 1;
    }
    if (location.startsWith('/mToken')) {
      return 2;
    }
    return 0;
  }

  void _onItemTapped(int index, BuildContext context) {
    switch (index) {
      case 0:
        GoRouter.of(context).go('/overview');
        break;
      case 1:
        GoRouter.of(context).go('/reporting');
        break;
      case 2:
        GoRouter.of(context).go('/mToken');
        break;
    }
  }
}

class OverviewPage extends StatelessWidget {
  const OverviewPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Overview"),
        backgroundColor: const Color(0xFFFF6200),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextButton(
              onPressed: () {
                GoRouter.of(context).go('/overview/details');
              },
              child: const Text('Accounts Details'),
            ),
            TextButton(
              onPressed: () {
                GoRouter.of(context).go('/overview/rootDetails');
              },
              child: const Text('Outside Shell'),
            ),
          ],
        ),
      ),
    );
  }
}

class ReportingPage extends StatelessWidget {
  const ReportingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Reporting"),
        backgroundColor: const Color(0xFFFF6200),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextButton(
              onPressed: () {
                GoRouter.of(context).go('/reporting/details');
              },
              child: const Text('Reporting Details'),
            )
          ],
        ),
      ),
    );
  }
}

class MtokenPage extends StatelessWidget {
  const MtokenPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("M-Token"),
        backgroundColor: const Color(0xFFFF6200),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextButton(
              onPressed: () {
                GoRouter.of(context).go('/mToken/details');
              },
              child: const Text('M-Token Details'),
            )
          ],
        ),
      ),
    );
  }
}

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

  final String label;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color(0xFFFF6200),
        title: Text(label),
      ),
      body: Center(
        child: Text(
          'Details for $label',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
    );
  }
}