You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何移除flutter_form_builder的FormBuilderChoiceChip动画对勾?

移除FormBuilderChoiceChip选中时的动画对勾方案

目前flutter_form_builder包的FormBuilderChoiceChip没有直接提供隐藏选中对勾的配置项,但可以通过以下两种方式解决:

1. 局部Theme覆盖(推荐)

利用Flutter的Theme系统,在FormBuilderChoiceChip外层套一个Theme组件,修改chipTheme的showCheckmark属性为false,全局隐藏该组件内所有ChoiceChip的选中对勾:

Theme(
  data: Theme.of(context).copyWith(
    chipTheme: Theme.of(context).chipTheme.copyWith(
          showCheckmark: false,
        ),
  ),
  child: FormBuilderChoiceChip(
    initialValue: 'multi',
    name: 'choices',
    options: [
      FormBuilderChipOption(
        avatar: SizedBox.shrink(),
        value: 'multi',
        child: Container(
          width: 100,
          height: 100,
          child: Center(child: Text('Multi-choice')),
        ),
      ),
      // 其他选项
    ],
  ),
)

2. 自定义单个选项的Chip样式

如果只想隐藏特定选项的对勾,可以给FormBuilderChipOption设置showCheckmark: false(该参数直接透传给底层的原生ChoiceChip):

FormBuilderChoiceChip(
  initialValue: 'multi',
  name: 'choices',
  options: [
    FormBuilderChipOption(
      showCheckmark: false, // 隐藏当前选项的选中对勾
      avatar: SizedBox.shrink(),
      value: 'multi',
      child: Container(
        width: 100,
        height: 100,
        child: Center(child: Text('Multi-choice')),
      ),
    ),
    // 其他选项
  ],
)

如果上述参数因包版本不生效,还可以通过设置checkmarkColor为透明色,同时让选中背景色与未选中状态一致,间接隐藏对勾:

FormBuilderChipOption(
  checkmarkColor: Colors.transparent,
  selectedColor: Colors.white, // 与未选中背景色保持一致
  avatar: SizedBox.shrink(),
  value: 'multi',
  child: Container(
    width: 100,
    height: 100,
    child: Center(child: Text('Multi-choice')),
  ),
)

内容的提问来源于stack exchange,提问作者Kdon

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.18 07:01:03