Alessandro
Alessandro

Reputation: 3760

Flutter large screen Master-Detail UI like Android Settings

I'd like to optimize my Flutter app for large screens (tablets, foldables, desktops), with a navigation flow like the one of the stock Android Settings. I'm becoming crazy as I tried almost every possibility that came to my mind and lost one month without getting the desired result.

On a small screen device the navigation flow should be classic, with screens apprearing one above the other, with a back button for popping them from the navigation stack.

Main screen

Sub-screen

Sub-sub-screen

On a large screen device the master and details page should be placed side by side. All sub-screens should open in the detail area, and the main sub-screen should not have a back button.

Main screen and main sub-screen

Sub-sub-screen

When a foldable device gets opened if user had navigated to a sub-screen that sub-screen should display in the detail area.

When a foldable device gets closed if user had navigated to a sub-screen that sub-screen should displayed at the top of the navigation stack.

Things that are driving me crazy:

Any idea?

Upvotes: 0

Views: 83

Answers (0)

Related Questions