The Flutter SDK Missing UX Pattern, Bottom Sheet

Most of the Material Design 3 Advanced UX Patterns are not found in the Flutter SDK. This time around, I am going to show you how to implement the bottom sheet advanced UX pattern. The sample code can be found in the bottom sheet demo sub-folder of this repo:

GitHub - fredgrott/material_you_playground: maerial you and flutter

What Am I Building

A bottom sheet is just a panel that shows some extra content:

Material Design

A standard bottom sheet is just content that compliments the primary screen. A model bottom sheet is an alternative to a menu. Whereas an expanding bottom sheet can also interact with content on the primary screen similar to a backdrop.

And the UX behavior looks like this: