Flutter 彩色单选按钮

e3bfsja2  于 2023-05-23  发布在  Flutter
关注(0)|答案(1)|浏览(155)

我如何制作这种类型的彩色单选按钮?

tpgth1q7

tpgth1q71#

您可以使用许多不同的小部件(如Container)创建N个项目,这些小部件将代表圆圈。并仅在选中该项时放置复选框。

enum ItemColor {
  white(Colors.white),
  red(Colors.red),
  green(Colors.green),
  blue(Colors.blue);

  const ItemColor(this.color);
  final Color color;
}

class _RBSelectionState extends State<RBSelection> {
  ItemColor? selectedItem;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (ItemColor item in ItemColor.values)
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: item.color,
              shape: const CircleBorder(),
              fixedSize: Size(100, 100),
            ),
            onPressed: () {
              setState(() {
                selectedItem = item;
              });
            },
            child: selectedItem == item ? const Icon(Icons.check) : null,
          ),
      ],
    );
  }
}

相关问题