How do I achieve a responsive master/detail split view using AutoRoute?

[Adam-Langley]

Here is an example:
https://maikub.github.io/masterdetailscaffold/#/

Below an X dimension, the master (list) and detail (detailed information about the list selected item) should be sequential navigated views, shown on separate screens.

After this X dimension, both views are shown side by side.

I havent been able to get this to work.

The tricky bit appears to be, if the user is in split screen (wide) mode, they have a list on the left, detail on the right, and nothing in the back stack.
If they resize the window to be narrow, the left (left pane) should disappear, and move to the back-stack, leaving only the detail view on screen.
The user can the hit a "back" button, to pop the detail screen, and return to the master list.

How do I make this work?

[Adam-Langley]

@Milad-Akarie has kindly worked up a demonstration to achieve my requirements.
Thank you!

split_routing_demo.mp4

See below:

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

import 'demo_router.gr.dart';

void main() => runApp(MyApp());

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

  final router = DemoRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router.config(),
    );
  }
}

@AutoRouterConfig()
class DemoRouter extends $DemoRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          page: MasterRoute.page,
          initial: true,
          children: [
            AutoRoute(page: DetailsRoute.page, path: 'details'),
            AutoRoute(page: SubDetailsRoute.page, path: 'sub-details'),
          ],
        ),
      ];
}

@RoutePage()
class MasterScreen extends StatelessWidget {
  const MasterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.sizeOf(context).width;
    final splitMode = screenWidth > 600;
    final splitPosition = splitMode ? screenWidth / 2 : 0.0;
    return AutoRouter(
      builder: (context, subRouterWidget) {
        final subRouter = context.router;
        // in split mode we show the back button only if the sub router can pop (entries.length > 1)
        final showBackButton = splitMode ? subRouter.canPop() : subRouter.hasEntries;
        return Scaffold(
          appBar: AppBar(
            /// we use router.popForced to always pop even if we have one entry in the stack
            leading: showBackButton ? BackButton(onPressed: subRouter.popForced) : null,
          ),
          body: Stack(
            children: [
              Positioned.fill(
                right: splitPosition,
                child: MasterScreenContent(),
              ),
              Positioned.fill(
                left: splitPosition,
                child: AnimatedSwitcher(
                  duration: Duration(milliseconds: 200),
                  transitionBuilder: (child, animation) {
                    /// mimic route transition
                    return SlideTransition(
                      position: Tween<Offset>(
                        begin: Offset(1, 0),
                        end: Offset.zero,
                      ).animate(animation),
                      child: child,
                    );
                  },
                  child: subRouter.hasEntries ? subRouterWidget : SizedBox(),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: Colors.grey.shade300,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: Text('Show details'),
            onPressed: () {
              context.navigateTo(DetailsRoute());
            },
          ),
        ],
      ),
    );
  }
}


@RoutePage()
class DetailsScreen extends StatefulWidget {
  const DetailsScreen({super.key});

  @override
  State<DetailsScreen> createState() => _DetailsScreenState();
}

class _DetailsScreenState extends State<DetailsScreen> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Details'),
            Text('$_counter'),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Increment'),
              onPressed: () {
                setState(() {
                  _counter++;
                });
              },
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Sub Details'),
              onPressed: () {
                context.pushRoute(SubDetailsRoute());
              },
            ),
          ],
        ),
      ),
    );
  }
}

@RoutePage()
class SubDetailsScreen extends StatelessWidget {
  const SubDetailsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Text('Sub Details'),
      ),
    );
  }
}