状态未产生，因此无法更改图标颜色

Question

我正在开发一个节拍器应用程序，并且对集团状态有疑问。我使用 FAB 按钮打开和关闭节拍器，并期望 FAB 图标颜色在切换时发生变化。您能看一下代码并指导我了解我在这里做错了什么吗？

/// EVENTS

abstract class MetronomeEvent extends Equatable {
  const MetronomeEvent();

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

class InitMetronomeEvent extends MetronomeEvent {}
class DisposeMetronomeEvent extends MetronomeEvent {}
class ToggleOnOffMetronomeEvent extends MetronomeEvent {}
class IncreaseTempoMetronomeEvent extends MetronomeEvent {}
class DecreaseTempoMetronomeEvent extends MetronomeEvent {}
class ChangeTempoMetronomeEvent extends MetronomeEvent {
  final int givenTempo;
  const ChangeTempoMetronomeEvent({required this.givenTempo});

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

  @override
  String toString() {
    return 'ChangeTempoMetronomeEvent{givenTempo: $givenTempo}';
  }
}

这是状态：

/// STATES

abstract class MetronomeState extends Equatable {
  const MetronomeState();
}

class MetronomeInitial extends MetronomeState {
  @override
  List<Object> get props => [];
}

class ToggleOnOffMetronomeState extends MetronomeState {
  final bool isMetronomeOn;
  const ToggleOnOffMetronomeState({required this.isMetronomeOn});
  @override

  List<Object?> get props => [isMetronomeOn];

}

和我的块：

/// BLOC
class MetronomeBloc extends Bloc<MetronomeEvent, MetronomeState> {
  final _metronome = getIt<MetronomeService>();

  MetronomeBloc() : super(MetronomeInitial()) {
    on<InitMetronomeEvent>((event, emit) {
      _metronome.init();
    });
    on<DisposeMetronomeEvent>((event, emit) {
      _metronome.dispose();
    });
    on<ToggleOnOffMetronomeEvent>((event, emit) {
      _metronome.toggleOnOff();
      emit(ToggleOnOffMetronomeState(isMetronomeOn: _metronome.isMetronomeOn));
      debugPrint("TOGGLED METRONOME ${_metronome.isMetronomeOn ? "ON" : "OFF"}");
    });
    on<IncreaseTempoMetronomeEvent>((event, emit) {
      _metronome.increaseTempo();
    });
    on<DecreaseTempoMetronomeEvent>((event, emit) {
      _metronome.decreaseTempo();
    });
    on<ChangeTempoMetronomeEvent>((event, emit) {
      _metronome.changeTempo(event.givenTempo);
    });
  }
}

我正在使用 BlocBuilder 来监听并重建下面的小部件：

FloatingActionButton(
            onPressed: () {
              _bloc.add(ToggleOnOffMetronomeEvent());
            },
            child: BlocBuilder<MetronomeBloc, MetronomeState>(
              builder: (context, state) {
                if (state is ToggleOnOffMetronomeState) {
                  _isMetronomeOn = state.isMetronomeOn;
                }
                return Icon(
      Icons.power_settings_new,
      color: _isMetronomeOn
          ? Colors.red
          : Theme
          .of(context)
          .floatingActionButtonTheme
          .backgroundColor,
    );
              },
            ),
          )