flutter - 在颤动中基于底部表内的列表创建下拉列表

Question

在我的代码中，我正在解析 Json 并创建一个地图列表，对于每个地图，我想在下拉列表中显示它们。

这是我的代码

import 'package:flutter/material.dart';

class ReportFilter extends StatefulWidget {
  final Map jsonString;
  var globalData;

  ReportFilter({@required this.jsonString, this.globalData});

  @override
  _ReportFilterState createState() => _ReportFilterState();
}

class _ReportFilterState extends State<ReportFilter> {
  List<TextEditingController> controllers = [];
  TextEditingController controller;
  Map<String, Object> globalValues = Map<String, Object>();

  String type;
  int optionId;

  @override
  void initState() {
    globalValues = widget.globalData;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: SingleChildScrollView(
          child: Column(
        children: <Widget>[
          Align(
              alignment: Alignment.topRight,
              child: FlatButton.icon(
                label: Text('Filters'),
                icon: Icon(Icons.filter_list),
                onPressed: () => showModalSheet(),
              )),
        ],
      )),
    );
  }

  showModalSheet() {
    List<Map<String, Object>> dropdownList = List<Map<String, Object>>();

       // here I am fetching data from json and doing some operations and storing the result into the List of maps, i.e dropdownList
// below I showed the contents of the dropdownList, and I am passing this list to the Dropdown menu. The contents of the list is dynamic and it keeps changing, It may contains any no of type value as String in  map, or List in map

    showModalBottomSheet<void>(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(
              builder: (BuildContext context, StateSetter state) {
              return createBox(context, dropdownList, state);

          });
        });
  }

  createBox(BuildContext context, List<Map<String, Object>> val,
      StateSetter setState) {
    Widget supporting = buildSupportingWidget(val, setState);
    return SingleChildScrollView(
        child: LimitedBox(
            maxHeight: 300,
            child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  buildMainDropdown(val, setState),
                  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;
  }
}

在显示模型表中，我正在执行一些操作来获取地图列表，因此在执行这些操作后，我的dropdownList列表有这样的数据，

[
      {
        "displayName": "Enter value",
        "type": "string",
      },
      {
        "displayName": "Enter second value",
        "type": "string",
      },
      {
        "id": "si",
        "displayName": "Source",
        "type": "list",
        "value": ["MO"], "searchField": "si",
        "data": [
          {"id": 1, "displayId": "MO"},
          {"id": 2, "displayId": "AO"},
          {"id": 3, "displayId": "OffNet"}
        ]
      }
    ];

它可以是多个字符串，或者列表取决于我正在处理的 Json，

然后我将列表传递给创建框，我正在调用下拉函数，但我不知道如何基于列表创建这些下拉列表，以及在用户选择特定项目后管理最终数据，

就像如果用户在第一个下拉列表中选择了一个需要文本框的项目，我需要将输入的值存储在某处，并且如果他从第一个下拉列表中选择列表导致显示另一个下拉列表，我需要同时存储某处的数据。如果有人以前做过类似的事情，或者有人知道，请告诉我，谢谢

标签： flutterdartdrop-down-menubottom-sheet