Implementing bottom sheet for flutter based iOS and Android app is really simple and easy.

String? value = await showModalBottomSheet<String>(
backgroundColor: Colors.transparent,
context: context,
builder: (BuildContext ctx) {
return Container(
height: MediaQuery.of(context).size.height * 0.9,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.only(topLeft: Radius.circular(50), topRight: Radius.circular(50))

child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Modal BottomSheet'),
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(ctx),

If you don’t want to make the bottom sheet into full height, make the following variable equal to false


The bottom sheet return the Future value. Suppose if you want to caputre a value when you close the bottom sheet, you can implement like this,

Navigator.pop(context, "this is the value",);