Creating a Dropdown menu inside the bottomsheet in Flutter
Step 1: LimitedBox need maxHeight
Step 2: function showModalSheet need to pass context
Step 3: createBox , buildMainDropdown and buildSupportingWidget need to pass state for StatefulBuilder
full code
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: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: DropdownExample(), ); }}class DropdownExample extends StatefulWidget { @override _DropdownExampleState createState() => _DropdownExampleState();}class _DropdownExampleState extends State<DropdownExample> { String type; int optionId; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("Dropdown Example")), body: Center( child: Container( height: 600, width: 300, child: Row( children: <Widget>[ Align( alignment: Alignment.topRight, child: FlatButton.icon( label: Text('Filters'), icon: Icon(Icons.filter_list), // onPressed: showModalSheet(), onPressed: () { showModalSheet(context); }, )), ], ), ), ), ), ); } void showModalSheet(BuildContext context) { final items = [ { "displayName": "Enter value", "type": "string", }, { "displayName": "Source", "type": "list", "data": [ {"id": 1, "displayId": "MO"}, {"id": 2, "displayId": "AO"}, {"id": 3, "displayId": "OffNet"} ] } ]; showModalBottomSheet<void>( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), context: context, builder: (BuildContext context) { return StatefulBuilder( builder: (BuildContext context, StateSetter state) { return createBox(context, items, state); }); }); } createBox(BuildContext context, List<Map<String,Object>> val,StateSetter state) { Widget supporting = buildSupportingWidget(val,state); return SingleChildScrollView( child: LimitedBox( maxHeight: 300, child: Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ buildMainDropdown(val,state), if (supporting != null) supporting ] ) ) ); } Expanded buildMainDropdown(List<Map<String,Object>> items,StateSetter setState) { return Expanded( child: DropdownButtonHideUnderline( child: DropdownButton( value: type, hint: Text("Select a type"), items: items .map((json) => DropdownMenuItem( child: Text(json["displayName"]), value: json["type"])) .toList(), onChanged: (newType) { setState(() { type = newType; }); }, ), ), ); } Widget buildSupportingWidget(List<Map<String,Object>>items, StateSetter setState) { if (type == "list") { List<Map<String, Object>> options = items[1]["data"]; return Expanded( child: DropdownButtonHideUnderline( child: DropdownButton( value: optionId, hint: Text("Select an entry"), items: options .map((option) => DropdownMenuItem( child: Text(option["displayId"]), value: option["id"])) .toList(), onChanged: (newId) => setState(() { this.optionId = newId; }), ), ), ); } else if (type == "string") { return Expanded(child: TextFormField()); } return null; }}