Provider package in Flutter - Mini App: Build & Ship

Build: Counter with Provider

A simple counter app that uses the Provider package to manage and share state across widgets.

Target UI

┌───────────────────────────┐
│       Counter App         │
├───────────────────────────┤
│                           │
│         0                 │
│                           │
│   [+]          [-]        │
│                           │
└───────────────────────────┘

Use Provider package to manage counter state.

Display the current counter value in the center.

Add two buttons: '+' to increment and '-' to decrement the counter.

Update the counter value reactively when buttons are pressed.

Starter Code

Flutter

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter with Provider',
      home: // TODO: Wrap HomeScreen with Provider
    );
  }
}

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter with Provider')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // TODO: Display counter value
            // TODO: Add buttons to increment and decrement
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => Counter(),
      child: MaterialApp(
        title: 'Counter with Provider',
        home: const HomeScreen(),
      ),
    );
  }
}

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = context.watch<Counter>();

    return Scaffold(
      appBar: AppBar(title: const Text('Counter with Provider')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '${counter.count}',
              style: const TextStyle(fontSize: 48),
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: counter.increment,
                  child: const Text('+'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: counter.decrement,
                  child: const Text('-'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

We wrapped the entire app with ChangeNotifierProvider to provide the Counter instance to all widgets below. The Counter class extends ChangeNotifier and holds the counter state with methods to increment and decrement it, calling notifyListeners() to update the UI.

In HomeScreen, we use context.watch<Counter>() to listen for changes and rebuild the widget when the counter updates. The counter value is shown in a large text widget. Two buttons call the increment and decrement methods to update the counter reactively.

This setup cleanly separates state management from UI and uses Provider to share state easily.

Final Result

Completed Screen

┌───────────────────────────┐
│       Counter App         │
├───────────────────────────┤
│                           │
│          0                │
│                           │
│   [+]          [-]        │
│                           │
└───────────────────────────┘

Tapping '+' increases the number in the center by 1.

Tapping '-' decreases the number in the center by 1.

The displayed number updates immediately after each tap.

Stretch Goal

Add a reset button that sets the counter back to zero.

💡 Hint

Add a new method reset() in Counter that sets _count to 0 and calls notifyListeners(). Add a third button labeled 'Reset' that calls this method.

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