How to create a Modal bottom sheet in Flutter?

<p>A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.</p> <p>If you are looking out for an example on, How to send data to Modal bottom sheet in Flutter, check this article. <a href="https://fluttercentral.com/Articles/Post/1110">https://fluttercentral.com/Articles/Post/1110font-size: 1rem;</a></p> <p>Before going further, lets get some basics on bottom sheets.</p> <p>There are two kinds of bottom sheets in material design: Persistent and Modal.</p> <p>In this example, we are going to see Modal type.</p> <p>If you want to check out about persistent, check this article here. <a href="https://fluttercentral.com/Articles/Post/1149">https://fluttercentral.com/Articles/Post/1149font-size: 1rem;</a></p> <p>This is how the final output of this Modal Bottom Sheet example is going to look like.</p> <p>![](https://fluttercentral.com/Uploads/83cceba9-ca27-4807-ae2b-01bf530e4502.gifwidth="50%height="auto](</p> <p>Below is an example code of how to create a Modal bottom sheet in Flutter. All we are doing is a calling a function **ShowModalBottomSheet **and building a widget over there. This is very simple as shown in the below example.</p> <p>Code from Main.dart file. In order to run this project locally, all you need to do is to create a Project and copy paste the below code to Lib\main.dart file.</p> <p>_ModalBottomSheetDemoState(); }</p> <p>class _ModalBottomSheetDemoState extends State { void _showModalSheet() { showModalBottomSheet( context: context, builder: (builder) { return Container( child: Text('Hello From Modal Bottom Sheet'), padding: EdgeInsets.all(40.0), ); }); }</p> <pre>@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Modal bottom sheet')), body: Center( child: RaisedButton( onPressed: _showModalSheet, child: const Text('Show Modal Bottom Sheet')))); } </pre> <p>}</p> <p>Please let me know if you have any further queries.</p> <p>Thanks, Srikanth</p>