Nested Routing within a Bottom Sheet

[SpaceWaffles]

Hello, I'm trying to use VRouter to implement a nested routing flow within a bottom sheet. I'm using https://pub.dev/packages/modal_bottom_sheet (Modal Bottom Sheet library) because it has better behavior than the default bottom sheet. How can I use Vrouter to implement this nested flow?

VNester requires a widgetBuilder but opening a bottom sheet does not provide me with a handle on a widget to be passed to the VNester. Any help is appreciated, thanks!

[lulupointu]

Hi, thanks for your interest in VRouter !

This issue has already been discussed here: #63 (comment)
Let me know if you have any other question ! I know it's a pain but it's only because the packages (even flutter's) have not been upgraded to work with the router API.

[SpaceWaffles]

Thank you! I have been able to integrate a bottom sheet with VRouter. Do you know how to adjust the transition? Currently, when navigating to a second page, it slides a new bottom sheet up and the first one disappears. I'd like the content to transition within the first bottom sheet. Hopefully that makes sense.

VWidget(
      path: MarketPage.routeName,
      widget: MarketPage(),
      transitionDuration: Duration(milliseconds: 300),
      buildTransition: (animation, _, child) =>
          FadeTransition(
        opacity: animation,
        child: child,
      ),
      stackedRoutes: [
        VPage(
          path: BottomSheet1.to,
          pageBuilder: (key, child, name) => ModalBottomSheetPage(
            key: key,
            name: name,
            builder: (_) => child,
          widget: BottomSheet1()
        ),
        VPage(
            path: BottomSheet2.to,
            pageBuilder: (key, child, name) => ModalBottomSheetPage(
              key: key,
              name: name,
              builder: (_) => child,
            ),
            widget: BottomSheet2()
        )
      ]
    )

[lulupointu]

I'm glad you managed to do it!

Regarding the transition this is handled by the modal_bottom_sheet package (in the route to be exact, the one you certainly copy pasted).

If what you are looking for in a hero animation I think this package as an issue with that: jamesblasco/modal_bottom_sheet#2

If you you rather not have any animation and maybe slap a AnimatedSwitcher on top of the child, I think you could get away with the keys: given them both the same keys (ValueKey) will cause VRouter to regard them as the same page and therefore not play any animation. Thereafter, being the same page, you can use an AnimatedSwitcher on top of your child (as long as your child is or different type, if it's of the same type you will have to give it a different key (as described in the AnimatedSwitcher doc)

[SpaceWaffles]

Thank you for that additional insight. If you go here: https://jamesblasco.github.io/modal_bottom_sheet/#/ and try the "Cupertino Modal with Inside Navigation" demo, you'll see the exact kind of navigation I'm trying to achieve. The model_bottom_sheet library does support this by :

class ModalWithNavigator extends StatelessWidget {
  const ModalWithNavigator({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext rootContext) {
    return Material(
        child: Navigator(
      onGenerateRoute: (_) => MaterialPageRoute(
        builder: (context2) => Builder(
          builder: (context) => CupertinoPageScaffold(
            navigationBar: CupertinoNavigationBar(
                leading: Container(), middle: Text('Modal Page')),
            child: SafeArea(
              bottom: false,
              child: ListView(
                shrinkWrap: true,
                controller: ModalScrollController.of(context),
                children: ListTile.divideTiles(
                  context: context,
                  tiles: List.generate(
                      100,
                      (index) => ListTile(
                            title: Text('Item'),
                            onTap: () {
                              Navigator.of(context).push(
                                MaterialPageRoute(
                                  builder: (context) => CupertinoPageScaffold(
                                    navigationBar: CupertinoNavigationBar(
                                      middle: Text('New Page'),
                                    ),
                                    child: Stack(
                                      fit: StackFit.expand,
                                      children: <Widget>[
                                        MaterialButton(
                                          onPressed: () =>
                                              Navigator.of(rootContext).pop(),
                                          child: Text('touch here'),
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                              );
                            },
                          )),
                ).toList(),
              ),
            ),
          ),
        ),
      ),
    ));
  }
}

So, using a nested Navigator and Navigator.of(context).push(...

I was hoping there would be a way to achieve this using VNester or something in the VRouter library so as to avoid mixing navigation paradigms.

[SpaceWaffles]

Update: I think I'm getting really close; I just discovered VNesterPage :

VNesterPage(
          path: Page1.to,
          pageBuilder: (key, child, name) => ModalBottomSheetPage(
            key: key,
            name: name,
            builder: (_) => child,
            backgroundColor: Colors.white,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(12), topRight: Radius.circular(12))
            ),
          ),
          widgetBuilder: (child) => SizedBox(child: child, height: 400),
          nestedRoutes: [
            VWidget(
              path: Page1.to,
              widget: Page1()
            ),
            VWidget(
                path: Page2.to,
                widget: Page2()
            )
          ]
        )

So I'm able to provide the custom ModalBottomSheetPage as the page and then presumably populate that with the nested pages. I am able to see a bottom sheet pop up with the contents of Page1, however, when I go to navigate to Page2 I get [VRouter: INFO] Successfully navigated to "/page2" using VRouter.to but the page doesn't actually change. No animation or anything happens.

[lulupointu]

Alright:

1. You where on the right track, this is almost the good way to do it
2. Doing it is NOT possible without re-writting a lot of code from modal_bottom_sheet (easy but that's something more to maintain)

First, what is the right VRouter setup?

If you look at the code from the demo of modal_bottom_sheet you see that we have the following configuration (I'm keeping you notation: Page1 is the first screen in the bottom modal sheet while Page2 is the screen on top of Page1):

Before push:
[ModalBottomSheet] -> [Navigator] -> [Page 1]

After push:
[ModalBottomSheet] -> [Navigator] -> [Page 1] -> [Page 2]

As you already discovered, to reproduce the setup before push we have to have:
[VNester(ModalBottomSheetPage)] -> [VWidget(Page1)]

however to stack something on top of VWidget(Page1) you have to use stackedRoutes.

Therefore here is the good way to achieve this:

VRouter(
  routes: [
    VWidget.builder(
      path: '/',
      builder: (context, _) => Center(
        child: ElevatedButton(
          onPressed: () => context.vRouter.to('/bottom_sheet'),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('Click me!'),
          ),
        ),
      ),
      stackedRoutes: [
        VNesterPage.builder(
          path: null,
          pageBuilder: (key, child, name, _) => CupertinoBottomSheetPage(
            key: key,
            name: name,
            builder: (_) => child,
          ),
          widgetBuilder: (context, _, child) => child,
          nestedRoutes: [
            VWidget.builder(
              key: ValueKey('bottom_sheet'),
              path: '/bottom_sheet',
              builder: (context, _) => Center(
                child: ElevatedButton(
                  onPressed: () {
                    context.vRouter.to('/bottom_sheet/stacked');
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('Click me again!'),
                  ),
                ),
              ),
              stackedRoutes: [
                VWidget.builder(
                  key: ValueKey('stacked'),
                  path: '/bottom_sheet/stacked',
                  builder: (_, state) => Scaffold(
                    appBar: AppBar(title: Text('Yey')),
                    body: Center(
                      child: Text('You have arrived'),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    ),
  ],
);

As you saw, the VRouter setup is only slightly different from what you have, and not surprisingly, has the same issue as yours: When navigating to Page2, the screen is not updated and we still see Page1.

Why is the screen not updating?

Here is the real issue. That bothered me and I and to look in lots of places before finally finding the culprit: the Route object.
turns out the Route object does not correctly update its attributes so accessing its child from the page works while passing the child as an attribute does not. I don't really understand why, passing a builder does not help so it's even weirder.

Here is a concrete example, showing the MaterialRoute written by the flutter team (slightly modified). The first one correspond to the public route that you use in Navigator.push while the second one is the one they use in MaterialPage.createRoute:

`Route` used in `Navigator.push`

class MaterialPageRoute<T> extends PageRoute<T> with MaterialRouteTransitionMixin<T> {
  MaterialPageRoute({
    required RouteSettings settings,
    required this.builder,
  }) : super(settings: settings);

  /// Builds the primary contents of the route.
  final WidgetBuilder builder;

  @override
  Widget buildContent(BuildContext context) {
    return builder(context);
  }
}

`Route` used in `MaterialPage.createRoute`

class _PageBasedMaterialPageRoute<T> extends PageRoute<T> with MaterialRouteTransitionMixin<T> {
  _PageBasedMaterialPageRoute({
    required this. page,
  }) : super(settings: page);

  /// Builds the primary contents of the route.
  final MaterialPage page;

  @override
  Widget buildContent(BuildContext context) {
    return page.child;
  }
}

Notice the difference ? One uses the page to build it's child while the other takes a builder as an argument. If you tried using MaterialPageRoute in a Page.createRoute you will notice the same issue we have: if the content of the navigator changes, the screen don't update!

What would it take to update modal_bottom_sheet?

Now that we know the problem, it is fairly easy to try to fix the problem for modal_bottom_sheet. You simply have to replace every attribute to getters using the Page you created. However if you try to do it you will find that you will have to change many files, hence the maintenance cost I explained at the beginning.

[SpaceWaffles]

Thank you for the detailed explanation and looking into this. Unfortunately, I don't think we'll have the bandwidth to fork that library and maintain these changes as you described. I will look for a different solution. Thank you again!

[lulupointu]

Yeah sorry about that, not many libraries have migrated yet, even flutter does not have a DialogPage for example :/

I'll close this for now, if you find an interesting solution feel free to comment here anyway for any other person searching for this!