The bottom sheet has become an exceptionally well-known spot for fast communications that don’t need a full screen to do. Pursuing a pamphlet, parting a bill, making an installment, sharing something, a pursuit box that prompts another page of results. It gives indications that the makers of the application put thought into how and when certain highlights will be utilized.
In this blog, we will explore the Persistent Bottom Sheet In Flutter. We will implement a persistent bottom sheet demo program and how to create a bottom sheet in your flutter applications.
Table Of Contents::
Persistent Bottom Sheet:
It shows the bottom sheet actually like some other view present on the UI format. As the name recommends, its essence is constant i.e., it coincides with the application principle UI region. It works with clients by showing applicable application content and permits collaboration in that locale at the same time. Developers utilize this BottomSheet to show menus, any sort of auxiliary content, or other supporting content for the application.
If you wish to show a persistent bottom sheet, use Scaffold.bottomSheet. To make a persistent bottom sheet that isn’t a LocalHistoryEntry and doesn’t add a back button to the encasing Scaffold’s application bar, utilize the Scaffold.bottomSheetconstructor parameter.
Demo Module :
This demo video shows how to create a persistent bottom sheet in a flutter. It shows how the persistent bottom sheet will work in your flutter applications. When the user taps the button then, the bottom sheet will occur down to up on your screen, and when the user dismissed the sheet using the back button or drag downwards. It will be shown on your device.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called bottom_sheet_demo.dart inside the lib folder.
In the body part, we will add a Center widget. In this widget, we will add a RaisedButton(). Inside the button, we will add the color of the button, OnPressed function and its child property add a text.
Center(
child: RaisedButton(
color: Colors.teal[100],
onPressed: (){},
child: Text("Show Persistent BottomSheet",
style: TextStyle(color: Colors.black),
),
)),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will create a final _scaffoldKey is equal to the Globalkey<ScaffoldState>(). This key was added to the Scaffold() and without adding the key, the persistent bottom sheet will not work.
final _scaffoldKey = new GlobalKey<ScaffoldState>();
We will create a VoidCallback _showPersistantBottomSheetCallBack means a signature of callbacks that have no arguments and return no data.
VoidCallback _showPersistantBottomSheetCallBack;
We will add initState() method. In this method, we will add _showPersistantBottomSheetCallBack is equal to the _showBottomSheet.
@override
void initState() {
super.initState();
_showPersistantBottomSheetCallBack = _showBottomSheet;
}
We will deeply define _showBottomSheet method:
In this method, we will add a setState() function. In this function, we will add _showPersistantBottomSheetCallBac is equal to null. We will add a _scaffoldKey.currentState.showBottomSheet(context) and return a container widget. In this widget, we will add color and its child property add a text. When complete then add setState() function. In this function, we will add _showPersistantBottomSheetCallBack is equal _showBottomSheet.
void _showBottomSheet() {
setState(() {
_showPersistantBottomSheetCallBack = null;
});
_scaffoldKey.currentState
.showBottomSheet((context) {
return new Container(
height: 200.0,
color:Colors.teal[100],
child: Center(
child: Text("Drag Downwards Or Back To Dismiss Sheet",
style: TextStyle(fontSize: 18,color: Colors.black),
textAlign: TextAlign.center,),
),
);
})
.closed
.whenComplete(() {
if (mounted) {
setState(() {
_showPersistantBottomSheetCallBack = _showBottomSheet;
});
}
});
}
Now, we add _showPersistantBottomSheetCallBack on the onPressed function on RaisedButton. When the user taps the button then, the persistent bottom sheet will occur on your screen, and when you drag downward or use the back button to dismiss the persistent bottom sheet.
onPressed: _showPersistantBottomSheetCallBack,
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
class BottomSheetDemo extends StatefulWidget {
@override
_BottomSheetDemoState createState() => new _BottomSheetDemoState();
}
class _BottomSheetDemoState extends State<BottomSheetDemo> {
final _scaffoldKey = new GlobalKey<ScaffoldState>();
VoidCallback _showPersistantBottomSheetCallBack;
@override
void initState() {
super.initState();
_showPersistantBottomSheetCallBack = _showBottomSheet;
}
void _showBottomSheet() {
setState(() {
_showPersistantBottomSheetCallBack = null;
});
_scaffoldKey.currentState
.showBottomSheet((context) {
return new Container(
height: 200.0,
color:Colors.teal[100],
child: Center(
child: Text("Drag Downwards Or Back To Dismiss Sheet",
style: TextStyle(fontSize: 18,color: Colors.black),
textAlign: TextAlign.center,),
),
);
})
.closed
.whenComplete(() {
if (mounted) {
setState(() {
_showPersistantBottomSheetCallBack = _showBottomSheet;
});
}
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey[200],
key: _scaffoldKey,
appBar: AppBar(
backgroundColor: Colors.cyan[200] ,
title: Text("Flutter Persistent BottomSheet"),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: RaisedButton(
color: Colors.teal[100],
onPressed: _showPersistantBottomSheetCallBack,
child: Text("Show Persistent BottomSheet",
style: TextStyle(color: Colors.black),
),
)),
),
);
}
}
Conclusion:
In the article, I have explained the Persistent Bottom Sheet of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Persistent Bottom Sheet On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Persistent Bottom Sheet in your flutter projects. We will show you what the Persistent Bottom Sheet is?. Make a demo program for working Persistent Bottom Sheet and It displays when the user taps the button then, the bottom sheet will occur down to up on your screen, and when the user dismissed the sheet only using the back button or drag downwards in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Persistent Bottom Sheet Demo:
flutter-devs/flutter_persistent_bottom_sheet_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
