2

How can I select/check only one checkbox to be checked at time?

enter image description here

And below is my code

Container(
    child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
            Checkbox(
                checkColor: Colors.white,
                value: isChecked,
                onChanged: (bool value) {
                    setState(() {
                        isChecked = value;
                        // ignore: unnecessary_statements
                        passData(certId);
                    });
                },
            ),
        ],
    )),
MendelG
  • 14,885
  • 4
  • 25
  • 52
Fash
  • 309
  • 1
  • 13

1 Answers1

2

Option1 - Using a map to maintain the state

Create a map:

final Map<int, bool> _state = {};

then, check if the value for that index is true/false:

return ListView.builder(itemBuilder: (context, index) {
      return CheckboxListTile(
        value: _state[index] ?? false,
        onChanged: (value) {
          setState(() {
            _state[index] = value!;
          });
        },
        title: Text(_data[index].text),
      );
    });

Option 2 - using a model:

class CheckBoxModel {
  bool isChecked = false;
  String text = "";
  CheckBoxModel({required this.isChecked, required this.text});
}

and then, generate a List of 30 widgets:

final _data = List.generate(
    30, (index) => CheckBoxModel(isChecked: false, text: "Item $index"));

Now, use a ListView.builder and based on the index, to update the corresponding value:


class Testing extends StatefulWidget {
  const Testing({Key? key}) : super(key: key);

  @override
  State<Testing> createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(itemBuilder: (context, index) {
      return CheckboxListTile(
        value: _data[index].isChecked,
        onChanged: (value) {
          setState(() {
            _data[index].isChecked = value!;
          });
        },
        title: Text(_data[index].text),
      );
    });
  }
}

See also

Expansion tile trailing icon updates all in list on interaction with one tile. How can I only change the icon for the expanded tile?

MendelG
  • 14,885
  • 4
  • 25
  • 52
  • Thanks for your answer... I've use option 1 and it return this error `Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#6a7d2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 544 pos 12: 'child.hasSize': is not true.` – Fash Jan 02 '23 at 18:08
  • I'm using flutter version 2.2.3 – Fash Jan 02 '23 at 18:11
  • 1
    @Fash Well, that's a completely _separate_ problem. See https://stackoverflow.com/questions/52801201/flutter-renderbox-was-not-laid-out to fix it – MendelG Jan 02 '23 at 18:26
  • I've accepted your answer... sorry take time – Fash Jan 02 '23 at 18:33
  • I've fix error `child.hasSize` and when I using your both option 1 and 2... index always returns 0 – Fash Jan 03 '23 at 09:49
  • `I/flutter (11598): true I/flutter (11598): 0 I/flutter (11598): true I/flutter (11598): 0 I/flutter (11598): true I/flutter (11598): 0` – Fash Jan 03 '23 at 09:52