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.

Practice

1.

What is the main purpose of the Provider package in Flutter?

easy

A. To create animations in Flutter apps

B. To handle user input events

C. To share and manage app data easily across widgets

D. To style widgets with themes

Solution

1. Step 1: Understand Provider's role

   Provider is designed to help share and manage data across different parts of a Flutter app.

2. Step 2: Compare with other options

   Animations, user input, and styling are handled by other Flutter features, not Provider.

3. Final Answer:

   To share and manage app data easily across widgets -> Option C

4. Quick Check:

   Provider = Data sharing and management [OK]

Hint: Provider is about data sharing, not UI or input [OK]

Common Mistakes:

• Confusing Provider with animation tools
• Thinking Provider handles user input
• Assuming Provider styles widgets

2.

Which of the following is the correct way to provide a ChangeNotifier model using Provider?

?

easy

A. ChangeNotifierProvider(builder: (_) => MyModel(), child: MyApp())

B. Provider(create: (_) => MyModel(), child: MyApp())

C. ChangeNotifierProvider(value: MyModel(), child: MyApp())

D. ChangeNotifierProvider(create: (_) => MyModel(), child: MyApp())

Solution

1. Step 1: Identify correct Provider constructor

   For ChangeNotifier models, ChangeNotifierProvider.create is the recommended way to create the model instance.

2. Step 2: Check other options

   Provider(create: (_) => MyModel(), child: MyApp()) uses generic Provider which doesn't listen to ChangeNotifier. ChangeNotifierProvider(value: MyModel(), child: MyApp()) uses value which is discouraged for new instances. ChangeNotifierProvider(builder: (_) => MyModel(), child: MyApp()) uses a non-existent builder parameter.

3. Final Answer:

   ChangeNotifierProvider(create: (_) => MyModel(), child: MyApp()) -> Option D

4. Quick Check:

   Use create with ChangeNotifierProvider [OK]

Hint: Use create, not value, for new ChangeNotifier instances [OK]

Common Mistakes:

• Using Provider instead of ChangeNotifierProvider
• Using value instead of create for new objects
• Using builder instead of create

3.

Given this code snippet, what will be printed when the button is pressed?

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

// Inside a widget:
final counter = Provider.of<Counter>(context);
print(counter.value);
counter.increment();
print(counter.value);

medium

A. 0 then 1

B. 1 then 1

C. 0 then 0

D. 1 then 2

Solution

1. Step 1: Check initial value

   The counter starts at 0, so the first print outputs 0.

2. Step 2: After increment

   The increment method increases value to 1 and calls notifyListeners, so the second print outputs 1.

3. Final Answer:

   0 then 1 -> Option A

4. Quick Check:

   Initial 0, incremented to 1 [OK]

Hint: Increment updates value before second print [OK]

Common Mistakes:

• Assuming value changes before first print
• Ignoring notifyListeners effect
• Confusing initial and updated values

4.

What is wrong with this Provider usage code?

ChangeNotifierProvider(
  create: (context) => MyModel(),
  child: Consumer<MyModel>(
    builder: (context, model, child) {
      return Text(model.data);
    },
  ),
);

medium

A. Missing MaterialApp as ancestor

B. No error, code is correct

C. Consumer should not be a child of ChangeNotifierProvider

D. ChangeNotifierProvider needs a value parameter

Solution

1. Step 1: Verify the code structure

   The code correctly uses ChangeNotifierProvider with create to instantiate MyModel and passes it to a Consumer child that rebuilds on model changes.

2. Step 2: Review other options

   MaterialApp is not required as an ancestor of Provider (Provider often wraps MaterialApp). Consumer can be a direct child. The create parameter is correct; value is not needed.

3. Final Answer:

   No error, code is correct -> Option B

4. Quick Check:

   Valid Provider + Consumer setup [OK]

Hint: Provider with direct Consumer child is valid [OK]

Common Mistakes:

• Thinking MaterialApp must be an ancestor
• Believing Consumer cannot be a direct child
• Confusing create with required value parameter

5.

You want to update UI only when a specific field count changes in your ChangeNotifier model. Which approach with Provider is best?

hard

A. Use Selector to listen only to count changes

B. Use Consumer and rebuild on any model change

C. Use Provider.of<Model>(context) with listen: false

D. Use ChangeNotifierProvider.value with manual setState

Solution

1. Step 1: Understand selective listening

   Selector allows widgets to listen to only part of the model, rebuilding only when that part changes.

2. Step 2: Compare other options

   Consumer rebuilds on any change, not selective. Provider.of with listen:false doesn't rebuild. ChangeNotifierProvider.value is unrelated to selective rebuild.

3. Final Answer:

   Use Selector to listen only to count changes -> Option A

4. Quick Check:

   Selector = selective rebuild [OK]

Hint: Selector rebuilds only on selected field changes [OK]

Common Mistakes:

• Using Consumer causing unnecessary rebuilds
• Using listen:false which disables rebuild
• Confusing Provider.value with selective listening