Flutter Material Design 3 Adaptive Scaffold The Hard Way

The Flutter Team has come out with a Flutter Adaptive Scaffold package to support Material Design 3, but what happens when you want or need some more design power? The Flutter Team came up with a solution in the Material Design 3 demo, and I am going to step through that in this article as we as designers should know both how to use the Flutter Adaptive Scaffold package how to implement it manually.

The Trick To Navigation Transitions

For Navigation Transitions to be animated, one of the techniques is to use a parent AnimatedBuilder, but using that in the home slot means that we have to then wrap our MaterialApp in another MaterialApp to get the MediaQuery.window call to work correctly:

And the main core of the Adaptive Scaffold is: