State management with Provider, Flutter

What is State Management?

In Flutter, "state" refers to the data that can change over time and affects how your UI looks or behaves. State management is the process of handling this data—storing it, updating it, and notifying the UI when it changes so it can rebuild accordingly.

Provider is a lightweight, dependency-injection-based state management solution recommended by the Flutter team. It builds on top of Flutter’s InheritedWidget to make state accessible across your app efficiently.

---

Why Use Provider?

• Simple to learn and implement.

• Scalable for small to medium-sized apps (and even larger ones with proper architecture).

• Integrates well with Flutter’s reactive nature.

• Avoids boilerplate compared to other solutions like Redux.

---

Step 1: Setup

First, add the provider package to your project. Open your pubspec.yaml file and include:

yaml

dependencies:
  provider: ^6.1.2  # Check pub.dev for the latest version

Run flutter pub get to install it.

---

Step 2: Basic Concepts

Provider works by:

1. Providing state (data) at a high level in your widget tree.

2. Consuming that state in widgets lower in the tree.

3. Notifying consumers when the state changes, triggering a UI rebuild.

There are several types of providers, but the most common ones are:

• Provider: For simple, immutable data or objects that don’t change.

• ChangeNotifierProvider: For mutable state that notifies listeners when it changes (uses ChangeNotifier).

• Consumer: A widget to listen to and rebuild based on state changes.

• context.read() and context.watch(): Methods to access state without a Consumer widget.

---

Step 3: Example – Counter App with Provider

Let’s build a simple counter app to see Provider in action.

1. Create a Model with ChangeNotifier

This will hold your state and notify listeners when it changes.

dart

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Tells Provider to notify widgets that depend on this
  }

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

• ChangeNotifier is a Flutter class that provides notifyListeners().

• Call notifyListeners() whenever the state changes to trigger a rebuild.

2. Provide the State

Wrap your app (or a part of it) with ChangeNotifierProvider to make the Counter available.

dart

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(), // Creates an instance of Counter
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

• create: A function that instantiates your state object.

• child: The widget tree that can access this provider.

3. Consume the State

Use Consumer or context.watch() to listen to changes and rebuild the UI.

dart

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter with Provider')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Listen to Counter and rebuild when it changes
            Consumer<Counter>(
              builder: (context, counter, child) {
                return Text(
                  'Count: ${counter.count}',
                  style: TextStyle(fontSize: 24),
                );
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Access Counter and call increment
                Provider.of<Counter>(context, listen: false).increment();
              },
              child: Text('Increment'),
            ),
            ElevatedButton(
              onPressed: () {
                Provider.of<Counter>(context, listen: false).decrement();
              },
              child: Text('Decrement'),
            ),
          ],
        ),
      ),
    );
  }
}

• Consumer<Counter>: Rebuilds only the part inside its builder when Counter changes.

• Provider.of<Counter>(context, listen: false): Accesses the Counter instance without listening (good for actions like button presses).

---

Step 4: Key Tips

1. Minimize Rebuilds: Use Consumer only around the widgets that need to rebuild, not the entire build method.

2. context.read() vs context.watch():

   • context.read<T>(): Get the state without listening (like Provider.of<T>(context, listen: false)).

   • context.watch<T>(): Listen to changes and rebuild (use inside build methods).

3. Multiple Providers: Use MultiProvider if you have more than one state object:

dart

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => Counter()),
    ChangeNotifierProvider(create: (_) => ThemeModel()),
  ],
  child: MyApp(),
)

---

Step 5: Practice Exercise

Try extending the counter app:

• Add a reset button to set the count back to 0.

• Create a second provider (e.g., ThemeModel) to toggle between light and dark themes.

Here’s a hint for the reset:

dart

void reset() {
  _count = 0;
  notifyListeners();
}

---

How It Works Under the Hood

• Provider uses Flutter’s InheritedWidget to propagate data down the widget tree.

• When you call notifyListeners(), it tells all dependent widgets (via Consumer or context.watch()) to rebuild.

• It’s efficient because only the widgets that explicitly listen to the state are rebuilt.

---

When to Use Something Else?

• For tiny apps, setState might be enough.

• For large, complex apps, consider Riverpod (a Provider evolution) or Bloc for stricter separation of concerns.

---

Let me know if you want to dive deeper into any part—say, multiple providers, Riverpod, or a specific example! What do you think—ready to try it out?