Repository navigation
[animations] Make OpenContainer work with named routes #51399
Description
Activity
- addedp: animationsThe animations packageThe animations packagepackageflutter/packages repository. See also p: labels.flutter/packages repository. See also p: labels.c: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutter
on Feb 25, 2020 I have just a created a PR on the packages repo for adding RouteSettings to OpenContainer. I think this should do what you want :)
Not exactly, I am looking for a built in way to use this in
onGenerateRoute.Reacted by Jan Štol, Marco Tocchetto, Shashi Kiran R and Nathaniel O. OgunyeThis ticket is important to support iOS swipe back gesture and to get a pop result from a route.
Reacted by Mehmet Esen, Tom Gilder, srombs, Nathaniel O. Ogunye, Britannio Jarrett, Hector Aguero, Nils Reichardt, Marcos Antônio, Leonardo Salazar, TAJAOUART Mounir and 6 more- addedc: new featureNothing broken; request for a new capabilityNothing broken; request for a new capability
on Mar 30, 2020 Also running into a need for this.
Scenario is that we push a new screen using
OpenContainerand from within container, I have an action that triggers a bottom. Choosing a specific option in that bottom sheet triggers an alert dialog. If the user taps "save" in that alert dialog, I need to close both the dialog and the bottom sheet. I attempted to usepopUntil(ModalRoute.withName('routeName')but because it wasn't pushed as a named route, it's throwing an error.Reacted by Britannio Jarrett and aytuncI'm also waiting for this. For commercial/professional app, it's almost a must... I attempted to mimic Navigation.pop behaviour but, that iOS dragging from left behavior is whole another thing to implement.
Reacted by Paulo Conde, srombs and Tony BlancoI would also love to have this ability. I am running into the same problem as @AndroidNils
Reacted by Kevin Scully and Paulo CondeCan't use OpenContainer in production because of lack of this feature.
Reacted by srombs, Nils Reichardt, Shashi Kiran R, Yuval Candel, Roman Ismagilov, Loraine Lesch, Hector Aguero, Toni Birka, Zony-Zhao, TAJAOUART Mounir and 4 moreI also would like to have this possibility.
any update on this. This is a requirement.
I found a workaround to use on onGenerateRoute for OpenContainer. I am sure there is a better way to do this.
- Copy the OpenContainer file code into your own.
- Change the _OpenContainerRoute to OpenContainerRoute
- Change the OpenContainerRoute
ModalRoute<void>toPageRoute<void> - Add the following final variable to class OpenContainer and in its constructor
final String openBuilderRouteName; - Comment
await Navigator.of(context, rootNavigator: widget.useRootNavigator).push(MyOpenContainerRoute(...))in Future openContainer() and addawait Navigator.of(context).pushNamed(widget.openBuilderRouteName, arguments: { 'closedColor': widget.closedColor, 'openColor': widget.openColor, 'closedElevation': widget.closedElevation, 'openElevation': widget.openElevation, 'closedShape': widget.closedShape, 'openShape': widget.openShape, 'closedBuilder': widget.closedBuilder, 'openBuilder': widget.openBuilder, 'hideableKey': _hideableKey, 'closedBuilderKey': _closedBuilderKey, 'transitionDuration': widget.transitionDuration, 'transitionType': widget.transitionType, }); - In your onGenerateRoute method use the OpenContainerRoute from the step 2 to load the route
final dynamic arguments = route.arguments as Map; return OpenContainerRoute( closedColor: arguments['closedColor'], openColor: arguments['openColor'], closedElevation: arguments['closedElevation'], openElevation: arguments['openElevation'], closedShape: arguments['closedShape'], openShape: arguments['openShape'], closedBuilder: arguments['closedBuilder'], openBuilder: arguments['openBuilder'], hideableKey: arguments['hideableKey'], closedBuilderKey: arguments['closedBuilderKey'], transitionDuration: arguments['transitionDuration'], transitionType: arguments['transitionType'], );
Note: This is just a workaround. I am sure the actual solution is much simpler when it is available.
flutter/packages#240 should have fixed this issue.
Reacted by Bryson Thill and Leonardo Salazar4 remaining items
flutter/packages#240 should have fixed this issue.
Hey! This does seem to solve the issue, but how to use it? Shouldn't it already be available in animations: 1.1.2 ?
It's available in the nullsafety release of this package.
Can you provide an example of how to use the function?
Reacted by aytunc, Jarro van Ginkel, Luis Barqueira, Amit Kotlovski and Kavin Varnanflutter/packages#240 should have fixed this issue.
Hi Britanio, I have tried to use this feature but I cannot seem to figure it out. The openBuilder parameter still is required and is used to navigate to the next page. Even though I have a named route in my RouteSettings object that I pass to the routeSettings parameter.
Would it be possible to provide us with a quick snippet of how this should work?
Many thanks in advance!
Reacted by Amit KotlovskiYes, specifying
routeSettingsdoesn't defer open builder to an existing named route but it does allow the route name to be picked up with aNavigatorObserverprovided toMaterialAppwhich I believe is what this issue is tracking.Well yes and no. I personally don't consider this solved but that might not be clear from my initial issue description.
I am looking for a way to push a named route with arguments (let's say ID in a Master <-> Detail transition) via
Navigatoror Nav 2.0. When I push a detail view it should automatically pick up the correct item in the master view and animate it, and also the reverse when popping the detail.
Especially with Nav 2.0 this gets even more important, everything is declarative but theOpenContainertransition has to be started imperatively.Reacted by Kavin Varnan, Amit Kotlovski, crissCM, Miguel de Sousa, David Butts, mQBy, thezjy, Adam Bridges and Cory MartinuseRootNavigator is not working with navigator 2.0
flutter/packages#240 should have fixed this issue.
Hi Britanio, I have tried to use this feature but I cannot seem to figure it out. The openBuilder parameter still is required and is used to navigate to the next page. Even though I have a named route in my RouteSettings object that I pass to the routeSettings parameter.
Would it be possible to provide us with a quick snippet of how this should work?
Many thanks in advance!
I managed to make this work in Nav 1.0 with this setup:
OpenContainer( routeSettings: RouteSettings(name: TaskDetailScreen.routeName, arguments: {'taskId': selected.id}), openBuilder: (BuildContext context, VoidCallback _) { return const TaskDetailScreen(); }, closedBuilder: (BuildContext context, VoidCallback openContainer) { return ListTile( leading: const FlutterLogo(), title: Text(selected.name), ); } );
Then in TaskDetailScreen:
Widget build(BuildContext context) { final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>; final taskId = args['taskId']; ... }
Reacted by Jhoan Barros and Eligio MariñoThat's not a named route.
That's not a named route.
Apologies, I didn't mean to say I found a solution for the named routes issue. Just gave an example for the usage of route settings.
Reacted by Peter Leibiger- addedP3Issues that are less important to the Flutter projectIssues that are less important to the Flutter project
on Nov 4, 2021 Should this issue be closed since flutter/packages#240 is merged?
Reacted by AleThis can be closed, the fix works
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Jul 20, 2023
Use case
I want to implement OpenContainer for existing named routes. We use named routes to track the users path through the app with
NavigatorObserver. Using anonymous routes makes this hard.Proposal
Don't hide
_OpenContainerRouteand provide something like aOpenContainerRouteArgumentsinstance in theOpenContainerBuilderto manually navigate.