Responsive layout framework how to#

We won't use any 3rd party packages because there is no need to. reveal or dismiss it with an interactive drag gesture from the left edge of the screen.Īll this functionality is built-in inside the Flutter Drawer widget, we will use it on mobile.īut on large screens we can easily fit both the menu and content side by side, so we don't need a Drawer.open the drawer with the hamburger icon on the top-left corner (and close it with the back button).On mobile, the desired layout can be implemented with a navigation drawer containing a menu we can use to switch between different pages.

Responsive layout framework how to#

In this article, we'll focus on one very specific type of responsive layout and learn how to create a split view that looks like this on a widescreen: Split view example app (widescreen)Īnd like this on mobile: The same app on mobile with drawer navigationĪs we will see, this can be done by changing the top-level layout of your app when the window width crosses a certain threshold, using a so-called layout breakpoint. Instead, it's much better to use a responsive layout that makes the most of the available screen estate.ĭepending on your intended visual hierarchy, you can mix and match many different techniques, widgets, and packages to make a Flutter app responsive. However, taking a mobile app layout and 'stretching' it to a large screen never leads to a great user experience: Simple vertical layout on widescreen Flutter, as a multi-platform UI toolkit, allows you to build apps on apps on mobile, desktop, and web with a single codebase.