ChangeNotifier and Consumer in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a ChangeNotifier class named Counter.

Flutter

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

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

AnotifyListeners()

BsetState()

Cupdate()

Drefresh()

Attempts:

3 left

💡 Hint

Common Mistakes

Using setState() inside ChangeNotifier instead of notifyListeners()

Forgetting to call notifyListeners() after changing data

In a ChangeNotifier, notifyListeners() tells the app to update widgets listening to this model.

2fill in blank

medium

Complete the code to use Consumer widget to listen to Counter and show the count.

Flutter

Consumer<Counter>(
  builder: (context, counter, child) {
    return Text('Count: ${counter.[1]');
  },
)

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

Anumber

Btotal

Ccount

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name that does not exist in Counter

Trying to access a private variable directly

The Counter class has a getter named count that holds the current count value.

3fill in blank

hard

Fix the error in the code to provide Counter to the widget tree.

Flutter

ChangeNotifierProvider(
  create: (context) => [1](),
  child: MyApp(),
)

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

ACounterNotifier

BCounter

CCounterConsumer

DCounterProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong class name that does not extend ChangeNotifier

Confusing provider and consumer class names

The provider needs to create an instance of the Counter class, which extends ChangeNotifier.

4fill in blank

hard

Fill both blanks to correctly increment the counter when a button is pressed.

Flutter

ElevatedButton(
  onPressed: () {
    context.[1]<Counter>().[2]();
  },
  child: Text('Increment'),
)

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

Aread

Bincrement

Cwatch

DnotifyListeners

Attempts:

3 left

💡 Hint

Common Mistakes

Using context.watch instead of context.read inside onPressed

Calling notifyListeners() directly instead of increment()

Use context.read<Counter>() to get the model without listening, then call increment() to update the count.

5fill in blank

hard

Fill all three blanks to create a Consumer that rebuilds only the Text widget when count changes.

Flutter

Consumer<Counter>(
  builder: (context, [1], [2]) {
    return Text('Value: $[1].[3]');
  },
)

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

Acounter

Bchild

Ccount

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of builder arguments

Trying to access count on the wrong variable

The builder function receives counter as the model, child as a widget that does not rebuild, and uses counter.count to show the value.