Flutter’s Missing Bootstrap Responsive UI

Fred Grott
Geek Culture
Published in
7 min readSep 26, 2021

--

With Web now in Stable and Desktop being put into the stable release in the next few months, it’s apparent that we have a responsive UI layout set of problems. The same set of problems that the original web bootstrap was created to solve, namely how to dynamically adapt to bigger screens yet be computational sensitive enough not to require pixel-perfect media queries and computation on resource constrained devices such as mobile devices.

And to complicate things further, it’s in two different problem areas. One area is how to do breakpoints in a layout-wise fashion in Flutter. The other problem relates to what happens to the appbar, bottom navigation, and possibly the FAB in bigger screens.

This article covers the first part of breakpoints and some creative adaptive containers. The second upcoming article focuses on advance navigation rail part of the problem.

Get Access To My Free Stuff

My free Flutter Code And Design Assets can be found at:

--

--