BottomSheet In Flutter

In this blog we are going to learn about Bottom sheet in Flutter.
BottomSheet in Flutter or Bottomsheet is user interface or component which display over the screen.
Bottom sheet is Dismiss able view .
It triggered from the bottom of screen with animation and stick to the bottom of screen.

Types Of Bottom Sheet

There are mainly two types of BottomSheet in Flutter Modal and Persistent Bottom sheet.

Persistent : Persistent bottom sheet is a view which display over the current visible screen and remain visible at the time of interaction with user or at the time of user iteration.
In Flutter we display persistent bottom sheet by using showBottomSheet function of Scaffold class.
Mostly it is used to show menu or to display data which need to be display for short time.
We can also use it to take any input from user.

Modal : A Modal bottom sheet is slightly different then persistent bottom sheet. It is similar to alert dialog.
It prevent user to interact with rest of app.
Modal Bottom sheet is used to show option for selecting app to open any media file or to share content.

Example Of Persistent bottom sheet

Here, we take a button (elevation button) on click of which sample Bottom sheet will display.

In above example we used GlobalKey<ScaffoldState>().
We used Global keys to uniquely identify any elements.
Global key allows to widgets to change anywhere in app without changing the state.

Here, with the help of key we get current state and then call to show bottom sheet.

We can modify and change bottom sheet design according to our need.

Conclusion :

In this blog we learn about Bottom sheet in flutter

For more details please click here.

Hope ! this will help you in finding what you are looking for.

Thanks For Reading