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.

Practice

1. What is the main purpose of the BLoC pattern in Flutter?
BLoC stands for Business Logic Component.

easy

A. To separate app logic from the user interface using streams

B. To create animations easily

C. To manage database connections

D. To style widgets with themes

Solution

1. Step 1: Understand BLoC purpose

   BLoC is designed to separate business logic from UI to keep code clean and testable.

2. Step 2: Identify correct function

   Among options, only separation of logic and UI using streams matches BLoC's goal.

3. Final Answer:

   To separate app logic from the user interface using streams -> Option A

4. Quick Check:

   BLoC = Separate logic and UI [OK]

Hint: Remember BLoC means separating logic from UI with streams [OK]

Common Mistakes:

• Confusing BLoC with UI styling or animations
• Thinking BLoC manages databases directly
• Assuming BLoC is only for UI widgets

2. Which of the following is the correct way to create a StreamController in Dart for BLoC?

easy

A. var controller = Stream();

B. var controller = StreamController<int>();

C. var controller = ControllerStream();

D. var controller = StreamBuilder();

Solution

1. Step 1: Recall StreamController syntax

   In Dart, StreamController is created by calling its constructor: StreamController<int>().

2. Step 2: Check options for correct syntax

   Only var controller = StreamController<int>(); uses correct class and constructor syntax.

3. Final Answer:

   var controller = StreamController<int>(); -> Option B

4. Quick Check:

   StreamController() constructor = var controller = StreamController(); [OK]

Hint: StreamController is a class, so use its constructor with parentheses [OK]

Common Mistakes:

• Using Stream() instead of StreamController()
• Confusing StreamBuilder with StreamController
• Misspelling class names

3. Given this BLoC code snippet:

final _controller = StreamController<int>();
void addNumber(int n) {
  _controller.sink.add(n);
}

Stream<int> get stream => _controller.stream;

// In UI:
StreamBuilder<int>(
  stream: bloc.stream,
  builder: (context, snapshot) {
    return Text(snapshot.data?.toString() ?? 'No data');
  },
);

What will the UI show after calling addNumber(5)?

medium

A. 5

B. No data

C. null

D. Error

Solution

1. Step 1: Understand data flow

   Calling addNumber(5) adds 5 to the stream sink, which emits 5 to listeners.

2. Step 2: StreamBuilder updates UI

   StreamBuilder listens to stream and rebuilds Text widget with snapshot.data = 5.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   Stream emits 5, UI shows 5 [OK]

Hint: StreamBuilder shows latest stream data in UI [OK]

Common Mistakes:

• Thinking UI shows 'No data' after adding a number
• Confusing snapshot.data with snapshot.hasData
• Assuming null is shown instead of actual data

4. Identify the error in this BLoC snippet:

class CounterBloc {
  final _controller = StreamController<int>();

  void increment() {
    _controller.sink.add(_counter + 1);
  }

  Stream<int> get stream => _controller.stream;
}

Assuming _counter is not declared anywhere, what is the issue?

medium

A. increment() should return a value

B. StreamController is not closed properly

C. Stream getter should be a method, not a property

D. _counter is not defined, causing a compile error

Solution

1. Step 1: Check variable usage

   _counter is used but never declared or initialized, causing an error.

2. Step 2: Review other options

   While closing StreamController is good practice, missing _counter causes immediate compile error.

3. Final Answer:

   _counter is not defined, causing a compile error -> Option D

4. Quick Check:

   Undefined variable = compile error [OK]

Hint: Undefined variables cause compile errors immediately [OK]

Common Mistakes:

• Ignoring missing variable declarations
• Confusing Stream getter syntax
• Thinking StreamController must always be closed immediately

5. You want to create a BLoC that filters out even numbers and only emits odd numbers to the UI. Which code snippet correctly implements this behavior?

hard

A. final _controller = StreamController<int>();
Stream<int> get stream => _controller.stream.skip(1);

B. final _controller = StreamController<int>();
Stream<int> get stream => _controller.stream.map((n) => n * 2);

C. final _controller = StreamController<int>();
Stream<int> get stream => _controller.stream.where((n) => n % 2 != 0);

D. final _controller = StreamController<int>();
Stream<int> get stream => _controller.stream.where((n) => n % 2 == 0);

Solution

1. Step 1: Understand filtering logic

   We want to emit only odd numbers, so filter with condition n % 2 != 0.

2. Step 2: Check each option's stream transformation

   Only the transformation using where((n) => n % 2 != 0) correctly filters odd numbers. The others either skip the first element, double the numbers with map, or filter even numbers with where((n) => n % 2 == 0).

3. Final Answer:

   final _controller = StreamController<int>();\nStream<int> get stream => _controller.stream.where((n) => n % 2 != 0); -> Option C

4. Quick Check:

   Filter odd numbers with where(n % 2 != 0) [OK]

Hint: Use where() with condition to filter stream data [OK]

Common Mistakes:

• Using map() instead of where() for filtering
• Filtering even numbers instead of odd
• Using skip() which removes elements by count