State is not yielded thus unable to change icon color - flutter

Question

I'm working on a metronome app and having problem with the bloc states. I'm toggling the metronome on and off with a FAB button and expecting the FAB icon color to change upon toggling. Could you have a look at the code and direct me towards what I am doing wrong here?
/// 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}';
}
}
Here is the states:
/// 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];
}
And my bloc:
/// 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);
});
}
}
And I'm using BlocBuilder to listen and rebuild the widget below:
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,
);
},
),
)