caseycrogers / implicit_navigator Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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 Dialog
s 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 ImplicitNavigator
s 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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.