Support navigation during a Cupertino back gesture

[justinmc]

Programmatically performing navigation during a Cupertino back gesture was causing buggy state. This PR attempts to fix it by canceling the gesture when any navigation happens.

Currently this is just a proof of concept. It only fixes the case of a pop happening during the gesture, but weird things also happen with a push. I tried it, and if I hold the drag gesture so that it's more than halfway back, then it gets stuck when the push happens.

Listening to isCurrent instead of using PopScope didn't work because the change came after the drag gesture had already ended.

CC @maRci002

Fixes #141268

The example app I was ultimately using to test this

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class AppScrollBehavior extends MaterialScrollBehavior {
  const AppScrollBehavior();

  @override
  Set<PointerDeviceKind> get dragDevices => const {...PointerDeviceKind.values};
}

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: ScreenOne(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: TextButton(
          onPressed: () {
            Navigator.of(context).push(
              CupertinoPageRoute(
                title: 'Two',
                builder: (_) => const ScreenTwo(),
              ),
            );
          },
          child: const Text('Go to Screen Two'),
        ),
      ),
    );
  }
}

class ScreenTwo extends StatefulWidget {
  const ScreenTwo({super.key});

  @override
  State<ScreenTwo> createState() => _ScreenTwoState();
}

class _ScreenTwoState extends State<ScreenTwo> {
  int seconds = 5;
  late Timer timer;

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

    timer = Timer.periodic(
      const Duration(seconds: 1),
      (Timer timer) {
        final ModalRoute<dynamic>? route = ModalRoute.of(context);
        if (!mounted || route == null || !route.isCurrent) {
          timer.cancel();
          return;
        }
        setState(() => seconds--);

        if (seconds == 0) {
          timer.cancel();
          //pop();
          //maybePop();
          navigate();
        }
      },
    );
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  void pop() {
    Navigator.of(context).pop();
  }

  void maybePop() {
    Navigator.of(context).maybePop();
  }

  void navigate() {
    Navigator.of(context).push(
      CupertinoPageRoute(
        title: 'Three',
        builder: (_) => const ScreenThree(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: true,
      onPopInvoked: (didPop) => print('ScreenTwo onPopInvoked didPop? $didPop'),
      child: CupertinoPageScaffold(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Auto pop in: $seconds'),
              const SizedBox(height: 8),
              TextButton(
                onPressed: pop,
                child: const Text('Pop'),
              ),
              const SizedBox(height: 8),
              TextButton(
                onPressed: maybePop,
                child: const Text('Maybe Pop'),
              ),
              const SizedBox(height: 8),
              TextButton(
                onPressed: navigate,
                child: const Text('Go to Screen Three'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: true,
      onPopInvoked: (didPop) =>
          print('ScreenThree onPopInvoked didPop? $didPop'),
      child: const CupertinoPageScaffold(
        child: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

pop	push
Screen.Recording.2024-02-01.at.1.50.46.PM.mov	Screen.Recording.2024-02-01.at.1.55.08.PM.mov

[justinmc]

@goderbauer Is there a good way for a route to be informed if it's going to be popped or pushed over? This PopScope setup works for pops, but ideally I want to know if the route has something pushed on top of it, too. I tried watching for changes in PageRoute.isCurrent, but it comes in too late, after the recognizer thinks the drag has ended.

[goderbauer]

I don't fully understand what you need or are trying to do... Routes have didChangeNext that informs them if something is added (e.g. pushed) on top of them, but I don't know if this comes early enough?

[justinmc]

Thanks for the suggestion. I tried didChangeNext/Previous by adding a setState in them when I needed to rebuild, but it didn't rebuild fast enough. Actively reading isCurrent/isActive on the route instead of waiting for it to be passed down seems to be fast enough, though 👍 .

[maRci002]

I think the easiest solution would be to access the current _RouteLifecycle:

flutter/packages/flutter/lib/src/widgets/navigator.dart

Line 2931 in 67457e6

_RouteLifecycle currentState;

The Route could have a getter similar to this::

  bool get isOk {
    if (_navigator == null) {
      return false;
    }
    final _RouteEntry? currentRouteEntry = _navigator!
        ._firstRouteEntryWhereOrNull(_RouteEntry.isRoutePredicate(this));

    if (currentRouteEntry == null) {
      return false;
    }

    return !const <_RouteLifecycle>[
      _RouteLifecycle.popping,
      _RouteLifecycle.pushing
    ].contains(currentRouteEntry.currentState);
  }

[justinmc]

@maRci002 I tried your approach but I always seemed to read _RouteLifecycle.idle at the time that the drag finished. Just checking isCurrent and isActive seems to work, though.

[goderbauer]

LGTM