0

I am building a responsive app, using auto_route.

The application is a simple master/detail view. My requirement is that when in desktop mode, the master (list) will be displayed on the left, and the detail on the right, in a "split screen" style.

When in mobile mode, the application will display the master and list as sequential views, pushed and popped onto a navigator (i.e, on screen one at a time).

I achieve this with the folowing: When in "desktop" mode, it will wrap the route with a "split screen" page. The split screen page has the list hard coded, and a child AutoRouter on the right.

When in "mobile" mode, it will wrap the route with a "stack screen" page. The stack screen is just a simple stack.

Now, I need to somehow restore the state between mobile and desktop modes, such that the path is retained.

i.e, if in Desktop mode, and your path is /detail/:5, you will see the split screen, list on the left, detail "5" on the right. Then you resize into mobile mode (this would happen when rotating a tablet for example) - your path remains the same, so the application switches you to the stack view, and restores a backstack with the "master list", and the "detail 5" pushed on top.

Ideas?

Adam
  • 4,159
  • 4
  • 32
  • 53

1 Answers1

0

I think, you can write in separated route screen: /detail, /detail/:id.

and in /detail/:id page, make two screens for desktop(split screen) and mobile(detail screen only).

Boseong
  • 368
  • 11