stacked icon indicating copy to clipboard operation
stacked copied to clipboard

Cross plarform nested navigation

Open Andrflor opened this issue 2 years ago • 6 comments

Describe the missing piece of documentation

It's not clear how to achieve Nested navigation for native + web at the moment. The RouterService generates navigation functions but none of those have nested views support.

For example how am I supposed to handle things like

const MaterialRoute homeRoute =
    MaterialRoute(page: HomeView, path: 'home/:id', children: [
  MaterialRoute(
      page: HomeSalesChannelView,
      path: 'sales_channel/:id',
      children: [
        MaterialRoute(
          path: '',
          page: HomeSalesChannelMainView,
        ),
        MaterialRoute(
          page: HomeMenuView,
          path: 'menu/:id',
        ),
      ])
]);

Do i need to create a nested navigation function myself ? If so what is the point of the generated navigateToHomeMenuView function ? Should i use multiple kind of navigation with children or without depending on nav context ?

A bit lost here.

Andrflor avatar Apr 26 '23 09:04 Andrflor

@Andrflor

Silly question, but have you watched this? And taken a look at the accompanying code, specifically the branch covering nested routes?

CordMemescape avatar May 09 '23 10:05 CordMemescape

@CordMemescape I've already farmed all of those. Those are trivial examples that fail to encapsulate my real life scenario. In those example there is only one level of nesting with one level of path parameter. In my example there is a double level nesting with two separate path parameters.

To be clear, my question is stepping on a very particular part of nested navigation, nested route parameters. There is no example on the proper way to handle those and the functions created by the generator never contain the nested routes arguments.

To resume, what is the proper way to navigate to sales_channel/:id/menu/:id in a stable, steady and maintainable fashion for a production app ?

Andrflor avatar May 09 '23 13:05 Andrflor

@Andrflor

Thanks for taking the time to explain. Tbh, I've not had a need for such a level of nested complexity but it is certainly a valid question and one that a good example could clarify. I know that @FilledStacks is pretty over-scheduled right now, but hopefully he'll get a chance to weigh in some time next week.

Sorry that I couldn't be more help at this point.

CordMemescape avatar May 09 '23 15:05 CordMemescape

@Andrflor sorry for the long wait. I have been pretty busy with the Flutter web course that I released today.

And you're right. There is no example for this. I'll start working on one next week.

Next week I'll be writing documentation for all the new functionality we added to support web fully.

I'll do the most required forms of navigation then tackle this scenario and write out an example of how you should do it.

Sorry for the wait. You can expect an answer sometime next week as I write and publish new docs.

FilledStacks avatar May 12 '23 09:05 FilledStacks

Please cover an example with a split view, it's widely used on the larger devices but so far I haven't seen any mention of split view.

lutes1 avatar May 19 '23 14:05 lutes1

Will do. This 6 minute video shows how we do split views with url specific navigation on web.

If it's not web you can still do the same. Those docs will probably be in the responsive_builder package since we use that for responsive UI building.

I'm working on Stacked docs next week Wednesday -> Friday I'll go through all of this at that point.

FilledStacks avatar May 21 '23 10:05 FilledStacks