Flutter基于Bloc Provider：不使用ShowDialog和setState集成颜色选择器

要让ColorPicker和Bloc联动，核心是把颜色状态交给Bloc管理，UI通过BlocBuilder响应状态变化，颜色选择时触发Bloc事件，完全不用setState或者弹窗。具体操作如下：

1. 定义Bloc的事件与状态 #

先创建对应的事件类和状态类，用来传递颜色变更请求、保存当前选中的颜色：

// 颜色变更事件
class ChangeColorEvent extends Equatable {
  final Color newColor;
  const ChangeColorEvent(this.newColor);

  @override
  List<Object> get props => [newColor];
}

// 颜色状态
class ColorState extends Equatable {
  final Color selectedColor;
  const ColorState(this.selectedColor);

  @override
  List<Object> get props => [selectedColor];
}

2. 实现Bloc的业务逻辑 #

创建Bloc类，处理颜色变更事件并更新状态：

class ColorBloc extends Bloc<ChangeColorEvent, ColorState> {
  ColorBloc() : super(const ColorState(Colors.blue)) { // 初始颜色设为蓝色
    on<ChangeColorEvent>((event, emit) {
      emit(ColorState(event.newColor));
    });
  }
}

3. 在UI中集成ColorPicker并关联Bloc #

修改你现有的代码，去掉const（颜色状态是动态变化的，不能用const子widget），用BlocBuilder监听Bloc状态，在onColorChange中触发Bloc事件：

Container(
  width: 300,
  margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [ // 这里去掉const
      const Text(
        'LED Color',
        style: TextStyle(
          fontSize: 25,
        ),
      ),
      BlocBuilder<ColorBloc, ColorState>(
        builder: (context, state) {
          return SingleChildScrollView(
            child: ColorPicker(
              pickerColor: state.selectedColor, // 从Bloc状态获取当前颜色
              onColorChange: (color) {
                // 触发Bloc事件更新颜色
                context.read<ColorBloc>().add(ChangeColorEvent(color));
              },
            ),
          );
        },
      ),
    ],
  ),
),

必做前置操作 #

• 确保你的页面已经被BlocProvider包裹，比如在父widget中：

BlocProvider(
  create: (context) => ColorBloc(),
  child: YourPage(),
)

• 如果你用的是flutter_colorpicker包，要先在pubspec.yaml中添加对应依赖。

这样配置后，ColorPicker的颜色会同步Bloc中的状态，颜色变化时通过Bloc事件更新状态，UI自动响应，完全不需要依赖setState或ShowDialog。

内容的提问来源于stack exchange，提问作者Mr.Kraken