Secrets Of Flutter Responsive Apps, Material Design Breakpoints And Container Constrained Builds

Look, BoxConstraints flow down and Sizes flow up as how Flex is implemented in Flutter as opposed to how it is implemented in Bootstrap CSS. That means something different from the default put a layout as parent solution to responsive that several packages promote, such as Responsive Framework. In simple terms, you want Material Design breakpoints accessible via specialized forms of Container and Column widgets so that only the widgets that need building during a screen size change build instead of every widget in the screen of the app.

In this article, I soft-fork Material IO Team’s Adaptive Breakpoints to Material Design 3 breakpoints and combine it with the GSkinner sized context package to show how we can make all the screens responsive in a Flutter app.

Background

So let’s paint the picture of what we are dealing with in making responsive Flutter apps. First off, MediaQuery API 1.0 is implemented as an Inherited Widget: