Flutter: Custom Bottom Sheet Modal

Light Theme | Dark Theme

Shorticle

Hi guys! Today I tell you how to build Modal Bottom Sheet (MBS) quickly; it’s a regular component usually used in applications.

The full example you can observe on the git repository.

UI

First of all, let’s build the UI that we will use for the MBS. I’ll base the code on the application theme for the theme switching ability between light and dark modes.

Show MBS

At the moment, we have just a widget that we will use as a container for our MBS. To invoke MBS, you’ll need to call the “showModalBottomSheet” function and pass the builder function to build UI. I’ve used FloatActionButton (FAB) to show MBS.