Member-only story
Adaptive Containers In Flutter 2.9 Material Design 3
As you go through the process of implementing Material Design 3 in Flutter 2.9 and onwards, you will find that at times you will be using specific things that are outside the Flutter SDK framework. This about the companion tools to the adaptive navigation pattern, i.e. adaptive containers.
Let’s get started.
The Problem
In certain other front-end frameworks, cough Bootstrap, we have the concept of containers that adapt to screen sizes via breakpoints. In Flutter, we do not have such things in the SDK to allows easily to design a responsive layout.
The Material IO team came up with an adaptive breakpoint class and some adaptive containers, but there are some tricks to using them that I want to show you.
Adaptive Containers
First up I will show you how to use an adaptive container which happens to use the adaptive breakpoints package:
And the adaptive container implementation is:
