A bottom sheet is a sheet that slides up from the bottom edge of the screen. Bottom sheets are displayed as a result of user-triggered action, and also it can reveal additional content.
Below is a small and simple function that returns a modelBottomSheet with a column having two child widgets.
Below find the final output of modelBottmSheet

Copy and paste the below code and use it with your requirements.
_showBottomSheet() { showModalBottomSheet<void>(context: context, builder: (BuildContext context) { return Container( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( child: ListTile( title: Text("Gallery"), leading: Icon(Icons.image), ), ), Container( child: ListTile( title: Text("Camera"), leading: Icon(Icons.camera), ), ) ], ), ); } ); }
Please Find the complete code below.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Bottom Sheet', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Bottom Sheet'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: RaisedButton( child: Text("Open Bottom Sheet",style: TextStyle(color: Colors.white),), color: Colors.blue, onPressed: ()=>_showBottomSheet(), ), ) ); } _showBottomSheet() { showModalBottomSheet<void>(context: context, builder: (BuildContext context) { return Container( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( child: ListTile( title: Text("Gallery"), leading: Icon(Icons.image), ), ), Container( child: ListTile( title: Text("Camera"), leading: Icon(Icons.camera), ), ) ], ), ); } ); } }
That’s it! Now run the project!
The full source code is available here.
kotlincodes/model_bottom_sheet_flutter_example
model_bottom_sheet_flutter_example. Contribute to kotlincodes/model_bottom_sheet_flutter_example development by creating an account on GitHub.
Thanks for reading!