BottomSheet In Flutter

Updated 28 April 2023

Save

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

Read more about Flutter app development from mobikul.

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

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home