我想创建一个单选按钮风格的投票系统使用的图标在Flutter(Dart),看起来像这样:投票图标
这个概念很简单:页面将显示一部电影,然后用户可以使用上面的图标按钮对该电影进行投票。当进行投票时,图标将变为红色,影片将添加到数组中。
我正在纠结的棘手部分是:
提前道谢!
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;
},
),
),
);
}
}