handling the checkbox state in flutter

Question

here in my dashboard i have an ... icon, whenever its clicked it will display the bottom sheet containing check boxes. but whenever I checked/unchecked the box, the state not changing at that time , I am calling the setState so its rerendering the entire dashboard, not the bottomsheet, so when I clicked again on the ... icon the changes are reflected in the bottom sheet. how to solve this problem? I want it to update at that time only. please help me in this

 Map<String, bool> data = {"1": true, "2": false, "3": true};

          void _showModalSheet() {
            List<Map<String, Object>> chec

kbox;
        checkbox = [
          {"id": "1", "displayId": "check1"},
          {"id": "2", "displayId": "check2"},
          {"id": "3", "displayId": "check3"}
        ];

        showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return StatefulBuilder(
                  builder: (BuildContext context, StateSetter state) {
                return createBox(context, checkbox, state);
              });
            });
      }

      createBox(
          BuildContext context, List<Map<String, Object>> si, StateSetter state) {
        var metrics = si.map<Widget>((data) {
          var id = data["id"];
          var dispId = data["displayId"];
          return buildCheckbox(context, id, dispId, state);
        }).toList();

        return SingleChildScrollView(
          child: LimitedBox(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: metrics,
            ),
          ),
        );
      }

      void ItemChange(bool val, var id) {
        setState(() {
          data[id] = val;
        });
      }

      Widget buildCheckbox(
          BuildContext context, var id, var disp, StateSetter state) {
        List<String> selectedSiList = [];
        var a = 0;
        return Container(
            child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
          CheckboxListTile(
              value: data[id],
              title: Text(disp),
              controlAffinity: ListTileControlAffinity.leading,
              onChanged: (bool val) {
                ItemChange(val, id);
              })
        ]));
      }

Answer 1

I have made some changes in your code please check is it work for you

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.center,
                  children: checkboxDataList.map<Widget>(
                    (data) {
                      return Container(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            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,
      };
}

Answer 2

Pass StateSetter in this function

void ItemChange(bool val, var id, StateSetter state) {
        state(() { //use that state here
          data[id] = val;
        });
      }

Only StatefulBuilder will change the data inside the bottomSheet.