We all know how to create and show BottomSheet in Flutter, But how to show it on the screen load?
In this post we will learn how to show BottomSheet Dialog on Screen load.
What is Bottom Sheet?
A Bottom Sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.
Bottom Sheet window will show over on the current screen.
How to create a Bottom Sheet?
To create a bottom sheet we will use the showBottomSheet widget
void show(BuildContext context) {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Card(
);
},
);
}
|
With the above code it will show the bottom sheet on the current window.
Now how to show the Bottom Sheet on the Screen Load
To show the bottomsheet on the screen load we need to use WidgetsBinding.instance.addPostFrameCallback callback method
WidgetsBinding.instance.addPostFrameCallback((_) {
show(context);
});
|
Complete Example
import 'package:flutter/material.dart';
class ShowBottomSheetAuto extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return ShowBottomSheetAutoState();
}
}
class ShowBottomSheetAutoState extends State<ShowBottomSheetAuto>
{
@override
void initState() {
// TODO: implement initState
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
show(context);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Auto Open BottomSheet"),),
body: Container(
child: Center(
child: RaisedButton(child: Text("Show BottomSheet Auto"),onPressed: (){
show(context);
},),
),
),
);
}
}
void show(BuildContext context) {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Card(
elevation: 10,
child: Container(
height: 200,
color: Colors.white70,
child: ButtonTheme(
minWidth: 48.0,
child:
Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("BottomSheet Dialog",style: TextStyle(fontSize: 20),),
),
SizedBox(height: 20,),
Row(
children: [
_Presso(
ico: Icons.pause,
onPressed: () {
}),
_Presso(
ico: Icons.stop,
onPressed: () {
}),
_Presso(
ico: Icons.delete,
onPressed: () {
}),
_Presso(
ico: Icons.share,
onPressed: () {
}),
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
),
],
)
),
),
);
},
);
}
class _Presso extends StatelessWidget {
final IconData ico;
final VoidCallback onPressed;
const _Presso({Key key, this.ico, this.onPressed}) : super(key: key);
@override
Widget build(BuildContext context) {
return ButtonTheme(
minWidth: 48.0,
child: RaisedButton(
child: Icon(
ico,
color: Colors.white,
),
onPressed: onPressed),
);
}
}
|
|
Article Contributed By :
|
|
|
|
|
2914 Views |
|