和Chip组件类似的样式,有一些选择的属性。可以指定选中时的颜色、阴影色和选择事件。

相关组件

Chip ActionChip InputChip FilterChip RawChip

ChoiceChip的普通表现如下

【selectedColor】: 选中时颜色 【Color】
【selectedShadowColor】: 选中时阴影颜色 【Color】
【onSelected】: 选中事件 【Fuction(bool)】
其他属性同Chip组件,无右侧组件。
25.gif

  1. import 'package:flutter/material.dart';
  2. class CustomChoiceChip extends StatefulWidget {
  3. @override
  4. _CustomChoiceChipState createState() => _CustomChoiceChipState();
  5. }
  6. class _CustomChoiceChipState extends State<CustomChoiceChip> {
  7. bool _select = false;
  8. @override
  9. Widget build(BuildContext context) {
  10. return ChoiceChip(
  11. selected: _select,
  12. padding: EdgeInsets.all(5),
  13. labelPadding: EdgeInsets.all(5),
  14. label: Text(
  15. _select ?
  16. "You are selected it." :
  17. "This is a ChoiceChip.",
  18. style: TextStyle(fontSize: 16),
  19. ),
  20. backgroundColor: Colors.grey.withAlpha(66),
  21. avatar: Image.asset("assets/images/icon_head.png"),
  22. selectedColor: Colors.orangeAccent.withAlpha(44),
  23. selectedShadowColor: Colors.blue,
  24. shadowColor: Colors.orangeAccent,
  25. elevation: 3,
  26. onSelected: (value) => setState(() => _select = value),
  27. );
  28. }
  29. }