Flutter FormBuilderChoiceChip自定义：如何为单个芯片设置不同颜色

方案一：利用FormBuilderChoiceChip的chipBuilder自定义芯片 #

FormBuilderChoiceChip提供了chipBuilder参数，允许你完全自定义每个选项的Chip组件，以此绕过原组件全局颜色的限制，为每个选项单独设置选中/未选中状态的颜色。

示例代码：

FormBuilderChoiceChip(
  name: 'custom_chips',
  options: const [
    FormBuilderChipOption(value: 'option1'),
    FormBuilderChipOption(value: 'option2'),
    FormBuilderChipOption(value: 'option3'),
  ],
  chipBuilder: (context, state, option) {
    // 为每个选项分配专属颜色
    final colorMap = {
      'option1': const Color(0xFFE57373),
      'option2': const Color(0xFF64B5F6),
      'option3': const Color(0xFF81C784),
    };
    final isSelected = state.value?.contains(option.value) ?? false;
    
    return ChoiceChip(
      label: Text(option.value.toString()),
      selected: isSelected,
      // 单独设置选中/未选中颜色
      selectedColor: colorMap[option.value]?.withOpacity(0.8),
      backgroundColor: colorMap[option.value]?.withOpacity(0.2),
      // 保留原组件的表单状态交互逻辑
      onSelected: (selected) {
        state.didChange(selected
            ? [...(state.value ?? []), option.value]
            : [...(state.value ?? []).where((v) => v != option.value)]);
      },
    );
  },
)

该方法可以直接控制每个芯片的样式细节，包括padding、标签字体等，解决你之前遇到的样式适配问题。

方案二：自定义FormField结合原生ChoiceChip #

如果FormBuilderChoiceChip的灵活性仍无法满足需求，可以直接基于原生ChoiceChip和FormField实现完全自定义的表单组件，彻底掌控所有样式和状态。

示例代码：

class CustomColorChoiceChipField extends FormField<List<String>> {
  CustomColorChoiceChipField({
    super.key,
    required super.name,
    required List<({String value, Color color})> options,
    super.initialValue,
    super.onSaved,
    super.validator,
  }) : super(
          builder: (field) {
            final state = field as _CustomColorChoiceChipFieldState;
            return Wrap(
              spacing: 8.0,
              children: options.map((option) {
                final isSelected = state.value?.contains(option.value) ?? false;
                return ChoiceChip(
                  label: Text(option.value),
                  selected: isSelected,
                  selectedColor: option.color.withOpacity(0.8),
                  backgroundColor: option.color.withOpacity(0.2),
                  labelStyle: TextStyle(
                    color: isSelected ? Colors.white : option.color,
                  ),
                  onSelected: (selected) {
                    final newValue = selected
                        ? [...(state.value ?? []), option.value]
                        : [...(state.value ?? []).where((v) => v != option.value)];
                    state.didChange(newValue);
                  },
                );
              }).toList(),
            );
          },
        );

  @override
  FormFieldState<List<String>> createState() => _CustomColorChoiceChipFieldState();
}

class _CustomColorChoiceChipFieldState extends FormFieldState<List<String>> {}

使用方式：

CustomColorChoiceChipField(
  name: 'custom_chips',
  initialValue: const [],
  options: [
    (value: '红色', color: const Color(0xFFE57373)),
    (value: '蓝色', color: const Color(0xFF64B5F6)),
    (value: '绿色', color: const Color(0xFF81C784)),
  ],
)

这种方案完全脱离原组件限制，你可以给每个芯片设置任意样式，包括自定义边框、阴影、内边距等，彻底满足高定制化需求。

内容的提问来源于stack exchange，提问作者Dominik