Provider package in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Understanding Provider Consumer Widget Behavior

Given the following Flutter code using Provider, what will be the output on the screen when the button is pressed once?

Flutter

class Counter extends ChangeNotifier {
  int value = 0;
  void increment() {
    value++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => Counter(),
      child: MaterialApp(
        home: Scaffold(
          body: Center(
            child: Consumer<Counter>(
              builder: (context, counter, _) => Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Count: ${counter.value}'),
                  ElevatedButton(
                    onPressed: counter.increment,
                    child: Text('Increment'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

A The screen shows 'Count: 1' after pressing the button once.

B The screen shows 'Count: 0' even after pressing the button once.

C The app crashes with a runtime error when the button is pressed.

D The screen shows 'Count: null' after pressing the button once.

💡 Hint

Remember that notifyListeners() triggers UI update in Consumer widgets.

The Counter class increments the value and calls notifyListeners(), which causes the Consumer widget to rebuild and show the updated count.

❓ lifecycle

intermediate

Provider Lifecycle and Disposal

What happens to the ChangeNotifier instance provided by ChangeNotifierProvider when the widget tree containing it is removed?

A The ChangeNotifier instance is automatically disposed to free resources.

B The ChangeNotifier instance remains in memory causing a memory leak.

C The ChangeNotifier instance throws an error when the widget is removed.

D The ChangeNotifier instance resets its state but is not disposed.

💡 Hint

Think about how ChangeNotifierProvider manages the lifecycle of the object it creates.

ChangeNotifierProvider disposes the ChangeNotifier instance automatically when the provider is removed from the widget tree.

📝 Syntax

advanced

Correct Usage of Provider.of with listen Parameter

What is the output of this code snippet inside a widget's build method? final counter = Provider.of(context, listen: false); Text('Count: ${counter.value}')

Flutter

class Counter {
  int value = 5;
}

// Inside build method:
final counter = Provider.of<Counter>(context, listen: false);
return Text('Count: ${counter.value}');

A Displays 'Count: null' because listen: false disables access.

B Displays 'Count: 5' and rebuilds automatically when Counter changes.

C Throws a runtime error because listen: false is invalid here.

D Displays 'Count: 5' and does NOT rebuild when Counter changes.

💡 Hint

listen: false means the widget won't rebuild on changes.

Using listen: false gets the current value but does not subscribe to updates, so the widget won't rebuild automatically.

🔧 Debug

advanced

Debugging Provider Not Updating UI

Why does the UI NOT update when the following ChangeNotifier's value changes? class Counter with ChangeNotifier { int value = 0; void increment() { value++; // Missing notifyListeners() } }

Flutter

class Counter extends ChangeNotifier {
  int value = 0;
  void increment() {
    value++;
    // notifyListeners() is missing here
  }
}

A Because increment() is not called inside setState(), UI won't update.

B Because value is private, the UI cannot access it.

C Because notifyListeners() is not called, the UI does not rebuild on changes.

D Because ChangeNotifier is not extended properly, UI won't update.

💡 Hint

Check if the notifier tells listeners about changes.

Without notifyListeners(), Provider does not know the state changed and does not rebuild dependent widgets.

🧠 Conceptual

expert

Provider Scope and Access

If you have two nested ChangeNotifierProviders providing different Counter instances, which instance will Provider.of(context) return inside the inner widget?

A A runtime error occurs due to multiple providers of the same type.

B The Counter instance from the closest (inner) ChangeNotifierProvider in the widget tree.

C The Counter instance from the outer ChangeNotifierProvider only.

D It returns null because of ambiguity between providers.

💡 Hint

Provider.of finds the nearest matching provider up the widget tree.

Provider returns the nearest provider of the requested type, so the inner provider's instance is returned.