How to use flutter_bloc to change the UI when the state is the same but the state content is different

Question

I'm using a BlocBuilder from the flutter_bloc package to respond to state changes.

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<BreathalyzerBloc, BreathalyzerState>(
      builder: (context, state) {

        if (state is BreathalyzerConnected) {
          return Center(child: Text('CONNECTED'));
        }

        if (state is BreathalyzerWarmingUp) {
          return Center(child: Text('PREPARE TO BLOW IN ${state.countDown}'));
        }

      },
    );

PROBLEM: Multiple successive events yield successive BreathalyzerWarmingUp states but with a different countDown value in succession (e.g., 3, 2, 1). However, since there is no actual transition to a different state, the BlocBuilder is ignoring the succeeding states, and the UI is stuck showing the first countdown value only.

Expecting the screen to change as follows:

PREPARE TO BLOW IN 3
PREPARE TO BLOW IN 2
PREPARE TO BLOW IN 1

Just getting:

PREPARE TO BLOW IN 3

Any suggestions?

Answer 1

Traced this to a missing override on the props function on BreathalyzerWarmingUp which extends Equatable. Because the props override was missing, BlocBuilder was treating the successive BreathalyzerWarmingUp states as equal even when the countDown was decrementing.

Incorrect code

class BreathalyzerWarmingUp extends BreathalyzerState {
  final String countDown;

  BreathalyzerWarmingUp({@required this.countDown}) : super();

  @override
  String toString() => 'BreathalyzerWarmingUp { countDown: $countDown }';
}

Corrected code:

class BreathalyzerWarmingUp extends BreathalyzerState {
  final String countDown;

  BreathalyzerWarmingUp({@required this.countDown}) : super();

  @override
  List<Object> get props {
    return [countDown];
  }

  @override
  String toString() => 'BreathalyzerWarmingUp { countDown: $countDown }';
}