BLoC pattern basics in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when the BLoC emits a new state?

In a Flutter app using the BLoC pattern, what is the expected behavior when the BLoC emits a new state?

A The UI rebuilds automatically to reflect the new state.

B The app crashes because states cannot be emitted twice.

C Nothing happens until the user restarts the app.

D The BLoC stops listening to events.

💡 Hint

Think about how Flutter widgets react to state changes.

In the BLoC pattern, when a new state is emitted, widgets listening to the BLoC rebuild automatically to show the updated UI.

🧠 Conceptual

intermediate

What is the role of events in the BLoC pattern?

In the BLoC pattern, what is the main purpose of events?

A Events store the UI layout information.

B Events trigger the BLoC to process logic and emit new states.

C Events are used to style widgets dynamically.

D Events automatically update the database.

💡 Hint

Events are like messages sent to the BLoC.

Events are inputs to the BLoC that tell it what action to perform, leading to new states being emitted.

❓ lifecycle

advanced

What is the correct way to close a BLoC to avoid memory leaks?

In Flutter, when using the BLoC pattern, how should you properly close a BLoC instance to prevent memory leaks?

A Call the close() method on the BLoC inside the dispose() method of the widget.

B Do nothing; Flutter automatically cleans up BLoCs.

C Call the close() method inside the build() method.

D Recreate the BLoC every time the widget rebuilds.

💡 Hint

Think about widget lifecycle and resource cleanup.

Closing the BLoC in dispose() ensures streams are closed and resources freed when the widget is removed.

📝 Syntax

advanced

What is the output of this BLoC event handling code?

Given this simplified BLoC event handler code, what will be the final state emitted? code: """ class CounterBloc extends Bloc { CounterBloc() : super(0) { on((event, emit) => emit(state + 1)); on((event, emit) => emit(state - 1)); } } final bloc = CounterBloc(); bloc.add(Increment()); bloc.add(Increment()); bloc.add(Decrement()); """

A -1

B 2

C 0

D 1

💡 Hint

Count how many increments and decrements happen.

Starting at 0, two increments add 2, then one decrement subtracts 1, resulting in 1.

🔧 Debug

expert

Why does this BLoC code cause a runtime error?

Consider this BLoC code snippet: code: """ class MyBloc extends Bloc { MyBloc() : super(InitialState()) { on((event, emit) async { await Future.delayed(Duration(seconds: 1)); emit(NewState()); }); } } final bloc = MyBloc(); bloc.add(MyEvent()); bloc.close(); """ Why might this code cause a runtime error?

A Because the event is not dispatched on the main thread.

B Because the event handler is not marked async.

C Because the BLoC is closed immediately after adding the event, the async emit tries to update a closed stream.

D Because the initial state is missing a required parameter.

💡 Hint

Think about what happens when you close a BLoC while it is still processing.

Closing the BLoC immediately after adding the event causes the async emit to try updating a closed stream, leading to an error.