“Flutter Colored Radio Button” 可以直接保留不翻译。

huangapple go评论68阅读模式
英文:

Flutter Colored Radio Button

问题

在Flutter中,如何创建这种类型的有颜色的单选按钮?

英文:

in flutter How do I make this type of Colored Radio button?

“Flutter Colored Radio Button” 可以直接保留不翻译。

答案1

得分: 0

你可以创建N个项目,每个项目都可以用不同的小部件(如 Container)来表示圆形。仅当选择该项目时,放置复选框。


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,
          ),
      ],
    );
  }
}
英文:

You can create N items with many different widgets like Container, that will represent the circle. And place checkbox only when the item is selected.


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,
          ),
      ],
    );
  }
}

huangapple
  • 本文由 发表于 2023年5月20日 22:50:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76295818.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定