flutter - 在颤动中创建底片

Question

我试图在颤动中创建一个如下所示的 ModelbottomSheet

点击这里

我设法创建了一个复选框，用于我在地图中维护的复选框，

List<Map<String, Object>> status = [
      {"id": "1", "value": "Started"},
      {"id": "2", "value": "Partially done"},
      {"id": "3", "value": "Finished"}
    ];

我正在循环它，我能够生成 3 个复选框。但是我在显示标题（即“状态”）以及在复​​选框下方创建一行并显示刻度选项时遇到了困难。

对于勾选选项，我有一个这样的地图列表

List<Map<String, Object>> time;
    time= [
      {"id": "1", "value": "Daily"},
      {"id": "7", "value": "Weekly"},
      {"id": "30", "value": "Monthly"}
    ];

帮助我创建这样的底部表。

谢谢

标签： flutter

Answer 1

你可以检查下面的代码我已经实现了这种方式

List<CheckBoxData> checkboxDataList = [
    new CheckBoxData(id: '1', displayId: 'check1', checked: true),
    new CheckBoxData(id: '2', displayId: 'check2', checked: false),
    new CheckBoxData(id: '3', displayId: 'check3', checked: true),
  ];

  void _showModalSheet() {
    showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter state) {
            return SingleChildScrollView(
              child: LimitedBox(
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(
                          top: 20.0, left: 30, bottom: 20),
                      child: Text(
                        'Status',
                        style: TextStyle(color: Colors.black54, fontSize: 18),
                      ),
                    ),
                    ListView(
                      shrinkWrap: true,
                      children: checkboxDataList.map<Widget>(
                        (data) {
                          return Container(
                            child: CheckboxListTile(
                              value: data.checked,
                              title: Text(data.displayId),
                              controlAffinity: ListTileControlAffinity.leading,
                              onChanged: (bool val) {
                                state(() {
                                  data.checked = !data.checked;
                                });
                              },
                            ),
                          );
                        },
                      ).toList(),
                    ),
                    Divider(color: Colors.grey,),
                    Padding(
                      padding: const EdgeInsets.only(
                          top: 20.0, left: 30, bottom: 20),
                      child: Text(
                        'Time',
                        style: TextStyle(color: Colors.black54, fontSize: 18),
                      ),
                    ),    
                    ListView(
                      shrinkWrap: true,
                      children: checkboxDataList.map<Widget>(
                            (data) {
                          return Container(
                            child: CheckboxListTile(
                              value: data.checked,
                              title: Text(data.displayId),
                              controlAffinity: ListTileControlAffinity.leading,
                              onChanged: (bool val) {
                                state(() {
                                  data.checked = !data.checked;
                                });
                              },
                            ),
                          );
                        },
                      ).toList(),
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

复选框数据类

class CheckBoxData {
  String id;
  String displayId;
  bool checked;

  CheckBoxData({
    this.id,
    this.displayId,
    this.checked,
  });

  factory CheckBoxData.fromJson(Map<String, dynamic> json) => CheckBoxData(
        id: json["id"] == null ? null : json["id"],
        displayId: json["displayId"] == null ? null : json["displayId"],
        checked: json["checked"] == null ? null : json["checked"],
      );

  Map<String, dynamic> toJson() => {
        "id": id == null ? null : id,
        "displayId": displayId == null ? null : displayId,
        "checked": checked == null ? null : checked,
      };
}