caseycrogers / implicit_navigator Goto Github PK

I'm making use of ImplicitBackButton in perhaps an unexpected way in that in my "flows" (flows are defined as parts of the Widget tree that contain their own ImplicitNavigator that manages 1...N screens), I have a Scaffold whose body consists of a Column that contains a Row which acts an as AppBar (without being an AppBar):

Row(
  children: [
    const ImplicitNavigatorBackButton(),
    Text(
      'Fix details',
      style: Theme.of(context).textTheme.headlineSmall,
    ),
  ],
)

The other item in the Column is an Expanded containing the ImplicitNavigator. This allows me to use the header row across all screens in the flow.

However, I noticed that when showing Dialogs in a flow like this one, ImplicitNavigatorBackButton disappears when the Dialog is shown (see video):

I've looked at that code before and I know it does some introspection on the Widget tree, so I suspect the displaying of the dialog is just throwing that introspection logic off.

Directly before the Dialog is shown, the tree looks like this (reminder: FixDetailsFlow uses the structure outlined above):

Once shown, it looks like:

As shown in the video above, the back behavior, even once the button is shown again, takes a few tappy taps to start working again 🙃

Library version:

  implicit_navigator:
    dependency: "direct main"
    description:
      name: implicit_navigator
      sha256: "661e359bd119a6ac1d69f7079096a7b0298b7140b441f256f8fa69cd01a1faad"
      url: "https://pub.dev"
    source: hosted
    version: "1.4.0"

Flutter version:

Flutter 3.10.0-12.0.pre.26 • channel master • https://github.com/flutter/flutter.git
Framework • revision d2646cf87d (6 weeks ago) • 2023-04-21 23:06:17 -0400
Engine • revision b6749106a4
Tools • Dart 3.1.0 (build 3.1.0-30.0.dev) • DevTools 2.23.1

Any way to swipe back to previous page like in iOS?

So I'm playing with ImplicitNavigator to get a feel for the sweet spot between imperative APIs and the behemoth that is GoRouter, and one thing I'm not finding intuitive is handling completion of "flows" when in a nested ImplicitNavigator scenario. Given the following "flow":

sealed class RootFlowStep {}

base class Start extends RootFlowStep {}

base class AddFix extends RootFlowStep {}

base class ViewFixDetails extends RootFlowStep {
  final String fixId;

  ViewFixDetails(this.fixId);
}

base class Settings extends RootFlowStep {}

class RootFlow extends StatelessWidget {
  final ValueNotifier<RootFlowStep> _flow = ValueNotifier(Start());
  RootFlow({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: _flow),
      ],
      child: ImplicitNavigator.fromValueNotifier(
        valueNotifier: _flow,
        builder: (
          BuildContext context,
          RootFlowStep value,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
        ) {
          switch (value) {
            case Start():
              return const FixesPage();
            case AddFix():
              return AddFixFlow(onComplete: () {
                // TODO: Best way to show `Start()` here?
              });
            case ViewFixDetails():
              return FixDetailsFlow(
                fixId: value.fixId,
                onComplete: () {
                  // TODO: Best way to show `Start()` here?
                },
              );
            case Settings():
              return const SettingsPage();
          }
        },
      ),
    );
  }
}

In the above, AddFix and ViewFixDetails() are both "sub-flows" that use their own ImplicitNavigators to show various "screens" that allow users to take action. Once they are "done", onComplete is invoked. It makes sense to me to have the parent flow (in this case RootFlow) own the completion behavior, but doing so is proving to be finicky.

Attempt 1:

Originally I simply did _flow.value = Start() but this results in a new page being added to the stack, such that the resulting stack is:

RootFlow (Start) => AddFixFlow (_) => Start

Attempt 2:

Second, I tried ImplicitNavigator.of(context).pop() but this results in a pop being called on the AddFixFlow's ImplicitNavigator and the user is simply sent back a single page.

Attempt 3:

For funsies, I gave ImplicitNavigator.of(context, root: true).pop() a whirl, but this had no real effect (visually at least)

So, what's the "correct" way to do this, and/or how should I be thinking about this differently?