Creating a Dropdown menu inside the bottomsheet in Flutter Creating a Dropdown menu inside the bottomsheet in Flutter dart dart

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;  }}

enter image description here