Creating a responsive Flutter application using Material Design with a navigation drawer

[utterances-bot]

Creating a responsive Flutter application using Material Design with a navigation drawer

undefined

https://dexterx.dev/creating-a-responsive-flutter-application-with-a-navigation-drawer/

[Jeremywhiteley]

This is an awesome article and it works so well. Super clean. No strange scrolling behavior either. Have you figure out what works best for making sure the widgets on each of the pages are responsive for both mobile and web? I wonder if doing a bootstrap type of grid would work best. Thoughts?

[MaikuB]

I'm not familiar with bootstrap grid since I don't do much of web development. Is this what you're referring to?

https://getbootstrap.com/docs/4.0/layout/grid/

If so and if my understanding of it is correct then that seems like a reasonable thing to do and to set the size breakpoints where the layout changes e.g. number of columns to render.

My experience with responsive layouts mostly comes from building UWP apps and takes the approach described here https://docs.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml#adaptive-layouts-with-visual-states-and-state-triggers. Each control would need to know the size breakpoints to toggle the visibility of the elements it should render. In some cases it might just be a matter of the number of columns to display. At the least I wouldn't go with the device family approach (i.e. checking if it's a phone or tablet) since that would fail on desktop and web where windows can be resized

[Jeremywhiteley]

Yes, here is example and a plugin package. https://medium.com/flutter-community/build-your-responsive-flutter-layout-like-a-pro-6bf86aaed81e

Another responsive plugin using grids, https://pub.dev/packages/responsive#-readme-tab-

I am thinking that the grid with media query approach would work best for web and mobile. I am planning on playing around with this next week.

[MaikuB]

Those look good but the examples appear to only cover basic scenarios. I had also seen this that was actually created by Rody

https://pub.dev/packages/responsive_scaffold

IMO, doing responsive layouts to determine what UI elements appear isn't the most difficult part, it'll be dealing with navigation. On a small screen size, we'll likely need to have full-screen page transitions. When there's more real estate and assume we're using a horizontal grid layout, it'll be that only one of the columns should deal with the transition. Consideration also needs to be given on what how navigation history should be retained (e.g. Navigator.pushNamed vs Navigator.pushReplacementNamed)