Responsive Material Design 3 Adaptive Navigation Without Pain

Let’s see, we have a Material IO team plugin as the package adaptive navigation. The only problem, it’s the bonehead way to implement the Material 3 adaptive navigation patterns. So why not show you the correct expert way to implement the Material Design adaptive navigation pattern?

AND yes, there is an AND! And, this becomes the cornerstone of your responsive approach on flutter as then you have the proper hooks to change text sizes, icon sizes, and container sizes per the screen form sizes. And yet, the adaptive navigation is integrated within the same damn implementation!

Ready to rock Flutter Apps! Let’s get started!

What Material IO Team Got Wrong

What my point happens to be is that shared-scaffold is part of the core of building a Flutter App in the first-place. Since we have that shared-scaffold that will be part of every screen; it makes sense to get more powerful in the adaptive navigation pattern and use a layout builder.

Now let’s see if you are Flutter-Design-Thinking yet. If we need access to the sizes computed in the layout-builder in the loaded content widget via our shared-scaffold, what do we need to do?