如何在flutter中创建自定义复选框列表？

Question

我想在 flutter 中创建一个自定义复选框列表（自定义形状和颜色 + 图标），它可以在点击时更改它们的状态，到目前为止我已经创建了复选框列表，但是当我点击其中一个时，它们都会改变他们的状态。 我希望只有我点击的复选框才能改变它的状态。

 Widget checkbox(){
    return InkWell(                ///CHECKBOX
      onTap: () {
        setState(() {
          this.value = !this.value;
        });
      },
      child: Container(
        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.white),
        child:
        value ? Container(
            padding: EdgeInsets.all(5.0),
            decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green),
            child: Icon(
              Icons.check,
              size: 20.0,
              color: Colors.white,
            )
        )
            :
        Container(
          decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black, ),
          padding: EdgeInsets.all(0.0),
          child: Icon(
            Icons.circle,
            size: 30.0,
            color: Colors.white,
          ),
        ),

      ),
    );

编辑：

1. 为此，我使用了 Inkwell 类
2. 'value' 被初始化为 false

提前致谢

Answer 1

将您的复选框放在单独的有状态小部件中，以便它可以控制自己的状态

class MyCheckbox extends StatefulWidget {
MyCheckbox({Key key}) : super(key: key);

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

class _MyCheckboxState extends State<MyCheckbox> {
 bool value = false;

 @override
 Widget build(BuildContext context) {
    return InkWell(

    ///CHECKBOX
    onTap: () {
      setState(() {
        this.value = !this.value;
      });
    },
    child: Container(
      decoration:
          BoxDecoration(shape: BoxShape.circle, color: Colors.white),
      child: value
          ? Container(
              padding: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                  shape: BoxShape.circle, color: Colors.green),
              child: Icon(
                Icons.check,
                size: 20.0,
                color: Colors.white,
              ))
          : Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.black,
              ),
              padding: EdgeInsets.all(0.0),
              child: Icon(
                Icons.circle,
                size: 30.0,
                color: Colors.white,
              ),
            ),
    ));
  }
 }

当你调用你的小部件时，添加key: UniqueKey(),以确保一切按预期工作