在flutter中使用图标按钮的单选按钮样式

Question

我想创建一个单选按钮风格的投票系统使用的图标在Flutter（Dart），看起来像这样：投票图标

这个概念很简单：页面将显示一部电影，然后用户可以使用上面的图标按钮对该电影进行投票。当进行投票时，图标将变为红色，影片将添加到数组中。

我正在纠结的棘手部分是：

1. 更改选定后图标的颜色
2. 确保其他图标保持黑色
3. 如果用户选择了其他选项，则将其他图标更改为黑色

提前道谢！

Answer 1

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  int _selected = null;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        _icon(0, text: "No way", icon: Icons.face),
        _icon(1, text: "Maybe", icon: Icons.local_movies),
        _icon(2, text: "Looks good", icon: Icons.local_pizza),
        _icon(3, text: "Can't wait", icon: Icons.local_fire_department),
      ],
    );
  }

  Widget _icon(int index, {String text, IconData icon}) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: InkResponse(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              icon,
              color: _selected == index ? Colors.red : null,
            ),
            Text(text, style: TextStyle(color: _selected == index ? Colors.red : null)),
          ],
        ),
        onTap: () => setState(
          () {
            _selected = index;
          },
        ),
      ),
    );
  }
}