A Bottom Sheet is a Flutter material widget that slides up from the bottom edge of the mobile screen and is an alternative to the modal or popups. It also can show different components by swiping up. The sheet hosts many other widgets inside it
Flutter Bottom Sheet Modal
Flutter BottomSheet behavior can be applied to a child of Coordinator Layout to make that child a persistent bottom sheet. Persistent bottom sheets are views that come up from the bottom of the screen, overlap over the main widget. we can drag vertically to expose more or less of their content.
Now here is i am going to talk about what is GetWidget Bottom Sheet and how we implement this on Flutter app to build awesome Flutter Bottom Sheet for an app.
How to Start:
Now here is the guide about how we should start developing the GF Flutter Bottomsheet Widget with the use of the GetWidget UI Library.
Getwidget Getting started will guide you on how to start building a beautiful flutter application with the GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.
Install Package from pub.dev :
Import full package:
Note: dependencies: getwidget: ^ 2.0.4
Keep playing with the pre-built UI components.
In the GFBottomSheet component, we have expandable content wherein we can expand the body or the content of the sheet according to our needs.
In the below section let us see how to use the sheet in the application with other widgets inside it.
How to create a Flutter BottomSheet widget?
Flutter BottomSheet is a material widget that is used as a modal/popup that slides from the bottom of the screen. When the bottom sheet is active, the other functions of the screen won't be active to operate, in other words, it will be disabled until the bottom sheet is active on the screen.
Basic GFBottomsheet will slide up and down with having a content body. The appearance of the GFBottomsheet can be customized using the GFBottomsheet properties.
Here, we will be using the GetWidget library and its GFBottomSheet component that has many customization options to use and make the bottom sheet as per the user requirement.
GFBottomSheet is a Flutter BottomSheet that is a material widget that popups itself from the floor of the screen. When the bottom sheet is opened the other functions of the respective screen will not work and be static.
Let us now see how bottom sheet. works with an example.
We can use the given example code to build the Flutter Bottom Sheet.
GF Flutter Bottomsheet with Expandable content
GF Bottomsheet allows users to expand the content body to display more content. The user can decide on how much the content should be expanded according to the requirement.
The below code shows how a bottom sheet and its content can be expanded accordingly.
The look and feel of the GFBottomsheet can be customized using the GFBottomsheet custom properties to make it look more attractive to the user.
[minContentHeight] controls the minimum height of the content body.
Content body with [minContentHeight] displays only when [enableExpandableContent] is false.
It Must be greater or equal to 0. Default value is 0.
[maxContentHeight] controls the maximum height of the content body.
It Must be greater or equal to 0. Default value is 300.
[stickyHeader] is the header of GFBottomSheet.
User can interact by swiping or tapping the [stickyHeader]
[contentBody] is the body of GFBottomSheet.
User can interact by swiping or tapping the [contentBody]
[stickyFooter] is the footer of GFBottomSheet.
User can interact by swiping or tapping the [stickyFooter]
|stickyFooterHeight||[stickyFooterHeight] defines the height of GFBottomSheet's [stickyFooter]|
|stickyHeaderHeight||[stickyHeaderHeight] defines the height of GFBottomSheet's [stickyHeader]|
[elevation] controls shadow below the GFBottomSheet material.
Must be greater or equal to 0. Default value is 0.
[enableExpandableContent] allows [contentBody] to expand.
Default value is false.
|controller||[controller] used to control GFBottomSheet behavior like hide/show|
Defines the drag animation duration of the GFBottomSheet
Default value is 300.
What is a Persistent Flutter BottomSheet?
The Persistent BottomSheet is a Flutter BottomSheet that is just like the other widgets on the same screen. As the name itself tells, that it is a constant or continuous widget that goes hand in hand with the actual UI section on the present respective screen. It is an interaction between the main UI block and the menu dialog, which both constitute the Persistent Bottom Sheet.
What are the customizable properties used in BottomSheet?
The customizable properties include the min-content height, max-content height, sticky header, sticky footer, content body, elevation, animation duration, sticky header height, sticky footer height of the Bottom Sheet component. Hence customizable properties are fully flexible. You can check out all custom properties on GetWidget Bottom Sheet Widget Properties.
Can we expand the content body?
Yes, we can expand the content body by enabling the property
Flutter Forum: if any Find any questions let's discuss them on Forum.
GitHub Repository: Please do appreciate our work through Github start
Here we discussed, what Flutter GFBottomSheet Widget is? And how we can use and implement it into our Flutter app through the GetWidget GFBottomSheet component. Here, there are options to customize and use other types of GFBottomSheet
About Our Team:
We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as After successfully delivering enterprise and SAAS applications that have been used by more than 500+ businesses around 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we trying to give a small contribution to the Flutter Dev Community.