BLoC pattern basics in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a BLoC class that extends the correct base class.

Flutter

class CounterBloc extends [1] {
  // BLoC logic here
}

Drag options to blanks, or click blank then click option'

AStatelessWidget

BStreamBuilder

CCubit<int>

DStatefulWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using widget classes instead of BLoC base classes.

Confusing StreamBuilder with BLoC base class.

The Cubit<int> class is the base for simple BLoC classes managing integer state.

2fill in blank

medium

Complete the code to emit a new state value in the BLoC.

Flutter

void increment() {
  emit([1] + 1);
}

Drag options to blanks, or click blank then click option'

Astate

Bcontext

Cwidget

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Using context or widget instead of state to get current value.

Trying to call emit without a value.

The state property holds the current state value in a Cubit or BLoC.

3fill in blank

hard

Fix the error in the BLoC provider code to correctly provide the BLoC to the widget tree.

Flutter

return BlocProvider(
  create: (context) => [1](),
  child: MyHomePage(),
);

Drag options to blanks, or click blank then click option'

AMaterialApp

BMyHomePage

CBlocBuilder

DCounterBloc

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a widget instead of a BLoC instance.

Forgetting to call the constructor with parentheses.

The create function must return an instance of the BLoC class, here CounterBloc().

4fill in blank

hard

Fill both blanks to build a widget that listens to BLoC state changes and rebuilds accordingly.

Flutter

return BlocBuilder<CounterBloc, [1]>(
  builder: (context, [2]) {
    return Text('Count: $[2]');
  },
);

Drag options to blanks, or click blank then click option'

Aint

Bstate

Ccontext

DString

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong state type in BlocBuilder generic.

Using context instead of state in builder arguments.

The BlocBuilder listens to CounterBloc with state type int. The builder function receives the current state as second argument.

5fill in blank

hard

Fill both blanks to define a BLoC event class and handle it in the BLoC.

Flutter

abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<[1]>((event, emit) {
      emit(state [2] 1);
    });
  }
}

Drag options to blanks, or click blank then click option'

AIncrementEvent

B+

C-

DCounterEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event class in on<>.

Using subtraction instead of addition.

The on<IncrementEvent> listens for the increment event. The state is updated by adding 1.