Skip to content

[animations] Make OpenContainer work with named routes #51399

Description

@kuhnroyal

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 _OpenContainerRoute and provide something like a OpenContainerRouteArguments instance in the OpenContainerBuilder to manually navigate.

Activity

  1. added
    packageflutter/packages repository. See also p: labels.
    c: proposalA detailed proposal for a change to Flutter
    on Feb 25, 2020
  2. georgeherby commented on Mar 2, 2020

    @georgeherby

    I have just a created a PR on the packages repo for adding RouteSettings to OpenContainer. I think this should do what you want :)

  3. kuhnroyal commented on Mar 4, 2020

    @kuhnroyal
    Author

    Not exactly, I am looking for a built in way to use this in onGenerateRoute.

  4. nilsreichardt commented on Mar 6, 2020

    @nilsreichardt
    Contributor

    This ticket is important to support iOS swipe back gesture and to get a pop result from a route.

  5. jamesdixon commented on Mar 30, 2020

    @jamesdixon

    Also running into a need for this.

    Scenario is that we push a new screen using OpenContainer and 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 use popUntil(ModalRoute.withName('routeName') but because it wasn't pushed as a named route, it's throwing an error.

  6. esenmx commented on Apr 1, 2020

    @esenmx

    I'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.

  7. srombs commented on May 9, 2020

    @srombs

    I would also love to have this ability. I am running into the same problem as @AndroidNils

  8. Pomis commented on May 11, 2020

    @Pomis

    Can't use OpenContainer in production because of lack of this feature.

  9. asidt commented on May 25, 2020

    @asidt

    I also would like to have this possibility.

  10. shashkiranr commented on May 29, 2020

    @shashkiranr

    any update on this. This is a requirement.

  11. shashkiranr commented on Jun 1, 2020

    @shashkiranr

    I found a workaround to use on onGenerateRoute for OpenContainer. I am sure there is a better way to do this.

    1. Copy the OpenContainer file code into your own.
    2. Change the _OpenContainerRoute to OpenContainerRoute
    3. Change the OpenContainerRoute ModalRoute<void> to PageRoute<void>
    4. Add the following final variable to class OpenContainer and in its constructor
      final String openBuilderRouteName;
    5. Comment await Navigator.of(context, rootNavigator: widget.useRootNavigator).push(MyOpenContainerRoute(...)) in Future openContainer() and add await 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, });
    6. 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.

  12. britannio commented on Feb 6, 2021

    @britannio

    flutter/packages#240 should have fixed this issue.

  13. 4 remaining items

  14. wmla419 commented on Apr 21, 2021

    @wmla419

    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?

  15. JarroVGIT commented on May 10, 2021

    @JarroVGIT

    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!

  16. britannio commented on May 11, 2021

    @britannio

    Yes, specifying routeSettings doesn't defer open builder to an existing named route but it does allow the route name to be picked up with a NavigatorObserver provided to MaterialApp which I believe is what this issue is tracking.

  17. kuhnroyal commented on May 11, 2021

    @kuhnroyal
    Author

    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 Navigator or 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 the OpenContainer transition has to be started imperatively.

  18. AbdallahR99 commented on Sep 2, 2021

    @AbdallahR99

    useRootNavigator is not working with navigator 2.0

  19. ric-sapasap commented on Oct 26, 2021

    @ric-sapasap

    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'];
      ...
    }
  20. kuhnroyal commented on Oct 26, 2021

    @kuhnroyal
    Author

    That's not a named route.

  21. ric-sapasap commented on Oct 26, 2021

    @ric-sapasap

    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.

  22. added
    P3Issues that are less important to the Flutter project
    on Nov 4, 2021
  23. ValentinVignal commented on Jan 20, 2023

    @ValentinVignal
    Contributor

    Should this issue be closed since flutter/packages#240 is merged?

  24. alefwd commented on Jul 6, 2023

    @alefwd

    This can be closed, the fix works

  25. github-actions commented on Jul 20, 2023

    @github-actions

    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 -v and a minimal reproduction of the issue.

  26. locked as resolved and limited conversation to collaborators on Jul 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterp: animationsThe animations packagepackageflutter/packages repository. See also p: labels.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions