go_router_push_animation.dart

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:animation_metadata/animation_metadata.dart';
import 'package:diagram_capture/diagram_capture.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'diagram_step.dart';
import 'utils.dart';

const Duration _pauseDuration = Duration(seconds: 1);
const Duration _openDuration = Duration(milliseconds: 300);
const Duration _closeDuration = Duration(milliseconds: 300);
final Duration _totalDuration = _pauseDuration +
    _pauseDuration +
    _openDuration +
    _pauseDuration +
    _closeDuration +
    _pauseDuration;

final GlobalKey _pushShell1 = GlobalKey();
final GlobalKey _pushShell2 = GlobalKey();
final GlobalKey _pushRegularRoute = GlobalKey();

final GlobalKey<NavigatorState> _innerNavigator = GlobalKey<NavigatorState>();
final GlobalKey<NavigatorState> _outerNavigator = GlobalKey<NavigatorState>();

class PushRegularRouteDiagram extends StatefulWidget with DiagramMetadata {
  const PushRegularRouteDiagram({super.key});

  @override
  String get name => 'push_regular_route';

  @override
  VideoFormat get videoFormat => VideoFormat.gif;

  @override
  State<PushRegularRouteDiagram> createState() =>
      _PushRegularRouteDiagramState();

  @override
  Duration? get duration => _totalDuration;
}

class _PushRegularRouteDiagramState extends State<PushRegularRouteDiagram>
    with TickerProviderStateMixin, LockstepStateMixin {
  Future<void> _tap(GlobalKey key) async {
    final RenderBox target =
        key.currentContext!.findRenderObject()! as RenderBox;
    final Offset targetOffset =
        target.localToGlobal(target.size.center(Offset.zero));
    final WidgetController controller = DiagramWidgetController.of(context);
    final TestGesture gesture = await controller.startGesture(targetOffset);
    await waitLockstep(_pauseDuration);
    await gesture.up();
    await waitLockstep(_openDuration);
  }

  Future<void> _pause() async {
    await waitLockstep(_pauseDuration);
  }

  Future<void> startAnimation() async {
    await _pause();
    await _tap(_pushRegularRoute);
    await _pause();
    _outerNavigator.currentState!.pop();
    await waitLockstep(_closeDuration);
    await _pause();
  }

  @override
  void initState() {
    super.initState();
    startAnimation();
  }

  @override
  Widget build(BuildContext context) {
    return _MainApp();
  }
}

class PushSameShellDiagram extends StatefulWidget with DiagramMetadata {
  const PushSameShellDiagram({super.key});

  @override
  String get name => 'push_same_shell';

  @override
  VideoFormat get videoFormat => VideoFormat.gif;

  @override
  State<PushSameShellDiagram> createState() => _PushSameShellDiagramState();

  @override
  Duration? get duration => _totalDuration;
}

class _PushSameShellDiagramState extends State<PushSameShellDiagram>
    with TickerProviderStateMixin, LockstepStateMixin {
  Future<void> _tap(GlobalKey key) async {
    final RenderBox target =
        key.currentContext!.findRenderObject()! as RenderBox;
    final Offset targetOffset =
        target.localToGlobal(target.size.center(Offset.zero));
    final WidgetController controller = DiagramWidgetController.of(context);
    final TestGesture gesture = await controller.startGesture(targetOffset);
    await waitLockstep(_pauseDuration);
    await gesture.up();
    await waitLockstep(_openDuration);
  }

  Future<void> _pause() async {
    await waitLockstep(_pauseDuration);
  }

  Future<void> startAnimation() async {
    await _pause();
    await _tap(_pushShell1);
    await _pause();
    _innerNavigator.currentState!.pop();
    await waitLockstep(_closeDuration);
    await _pause();
  }

  @override
  void initState() {
    super.initState();
    startAnimation();
  }

  @override
  Widget build(BuildContext context) {
    return _MainApp();
  }
}

class PushDifferentShellDiagram extends StatefulWidget with DiagramMetadata {
  const PushDifferentShellDiagram({super.key});

  @override
  String get name => 'push_different_shell';

  @override
  VideoFormat get videoFormat => VideoFormat.gif;

  @override
  State<PushDifferentShellDiagram> createState() =>
      _PushDifferentShellDiagramState();

  @override
  Duration? get duration => _totalDuration;
}

class _PushDifferentShellDiagramState extends State<PushDifferentShellDiagram>
    with TickerProviderStateMixin, LockstepStateMixin {
  Future<void> _tap(GlobalKey key) async {
    final RenderBox target =
        key.currentContext!.findRenderObject()! as RenderBox;
    final Offset targetOffset =
        target.localToGlobal(target.size.center(Offset.zero));
    final WidgetController controller = DiagramWidgetController.of(context);
    final TestGesture gesture = await controller.startGesture(targetOffset);
    await waitLockstep(_pauseDuration);
    await gesture.up();
    await waitLockstep(_openDuration);
  }

  Future<void> _pause() async {
    await waitLockstep(_pauseDuration);
  }

  Future<void> startAnimation() async {
    await _pause();
    await _tap(_pushShell2);
    await _pause();
    _outerNavigator.currentState!.pop();
    await waitLockstep(_closeDuration);
    await _pause();
  }

  @override
  void initState() {
    super.initState();
    startAnimation();
  }

  @override
  Widget build(BuildContext context) {
    return _MainApp();
  }
}

class _MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      key: UniqueKey(),
      constraints: BoxConstraints.tight(const Size(350, 622)),
      child: Navigator(
        key: _outerNavigator,
        initialRoute: '/',
        onGenerateRoute: (RouteSettings settings) {
          return PageRouteBuilder<void>(
            pageBuilder: (
              BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
            ) {
              return Scaffold(
                appBar: AppBar(
                  title: const Text('Shell1'),
                ),
                body: _Shell1(),
              );
            },
          );
        },
      ),
    );
  }
}

class _Shell1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: _innerNavigator,
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        return PageRouteBuilder<void>(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                TextButton(
                  key: _pushShell1,
                  onPressed: () {
                    _innerNavigator.currentState!
                        .push(MaterialPageRoute<void>(builder: (_) {
                      return const Center(child: Text('shell1 body'));
                    }));
                  },
                  child: const Text('push the same shell route /shell1'),
                ),
                TextButton(
                  key: _pushShell2,
                  onPressed: () {
                    _outerNavigator.currentState!
                        .push(MaterialPageRoute<void>(builder: (_) {
                      return Scaffold(
                          appBar: AppBar(
                            title: const Text('shell2'),
                          ),
                          body: const Center(child: Text('shell2 body')));
                    }));
                  },
                  child: const Text('push the different shell route /shell2'),
                ),
                TextButton(
                  key: _pushRegularRoute,
                  onPressed: () {
                    _outerNavigator.currentState!
                        .push(MaterialPageRoute<void>(builder: (_) {
                      return const Scaffold(
                          body: Center(child: Text('Regular Route')));
                    }));
                  },
                  child: const Text('push the regular route /regular-route'),
                ),
              ],
            );
          },
        );
      },
    );
  }
}

class GoRouterDiagramStep extends DiagramStep {
  @override
  final String category = 'go_router';

  @override
  Future<List<DiagramMetadata>> get diagrams async => <DiagramMetadata>[
        const PushRegularRouteDiagram(),
        const PushSameShellDiagram(),
        const PushDifferentShellDiagram(),
      ];
}