Implement a Bottom Sheet Component in Flutter
A new trend in mobile application development all around the world is that Developers and product designers make use of the bottom sheet for interactions that do not require a full screen interface to handle its operation.
Use cases like entering your email to subscribe to particular blog notifications, or entering your card details to make payment online, and several other instances can be implemented easily with the modal bottom sheet.
This article is going to walk you through how to implement a modal bottom sheet.
What is a Bottom Sheet?
A bottom sheet is just an ideal solution to a menu or dialogue and prevents users from engaging with the rest of the application. In Flutter, the _showBottomSheet _functionallows us to create and display modal bottom sheets. The bottom sheets are surfaces with additional content that are tied at the bottom of the page.
Types of Bottom Sheet
In case you’re not familiar with what a bottom sheet is all about. Here’s what a Bottom Sheet looks like according to Google’s material design library.
The bottom sheet on the left image is the lower part of the screen with the blue color and the title of the song playing. While that on the right hand part is the Bottom tab that shows the share, Get link, Edit name and Delete Collections options.
On the left is an image a standard bottom sheet which is also known as a persistent bottom sheet, on the right hand side is the modal bottom sheet.
The major difference between a Persistent Bottom Sheet and a Modal Sheet is that the Standard bottom sheet persists its state even when it is not showing the currently played track and it pops up and fills the screen to show the current track when it is being tapped on.
Modal bottom sheets provide an alternative to inline menus or basic smartphone dialog and give space for additional objects, longer explanations which iconography. These must be discarded to communicate with the screen that underlies them.
#android #flutter #flutter #flutter-package
