State management with Provider, in Flutter

Imagine your Flutter app as a house with different rooms (widgets). Each room needs access to certain things, like furniture, light, or information (the state of your app).

What is State Management?

Think of state as the data your app is currently working with. It could be:

• User data: Name, profile picture, login status.

• App data: Shopping cart items, current screen, theme settings, counter value.

• UI state: Is a button pressed? Is a form valid?

State Management is how you organize and share this data across your app's rooms (widgets) in a way that's easy to manage and update. Without proper state management, your "rooms" might not know what's going on in other "rooms," leading to confusion and bugs!

Why Provider?

Provider is like a friendly delivery service for your app's state. It makes it easy for any "room" (widget) in your house (app) to:

1. Access the data they need.

2. Listen for changes to the data.

3. Update the data (sometimes).

4. Rebuild only the "rooms" that care about the changed data, keeping your app efficient.

Think of it like this:

• State (Data): Groceries you ordered (e.g., number of items in a cart, user's name).

• Provider (Delivery Service): The delivery guy/company that holds and delivers your groceries.

• Widgets (Rooms): Different rooms in your house (like the kitchen, living room, bedroom) that need access to groceries (data).

Key Concepts in Provider (Simple Explanation):

1. Provider Widget (The Delivery Service Container):

   • You wrap a part of your app (or the whole app) with a Provider widget.

   • This Provider widget holds the state (your groceries) and makes it available to widgets below it in the widget tree (rooms in your house).

   • You tell the Provider what kind of data it will hold (like "shopping cart data" or "user profile data").

2. ChangeNotifier (The "Something Changed!" Signal):

   • Often, you'll use a ChangeNotifier class to manage your state.

   • Think of ChangeNotifier as someone who can shout "Hey! The groceries have changed!" whenever the data is updated.

   • When you update your state inside a ChangeNotifier class, you call notifyListeners(). This is like shouting "Groceries updated!"

3. Consumer Widget (The Room that Listens for Delivery):

   • If a widget (room) needs to use some state, you wrap it with a Consumer widget.

   • The Consumer is like a person in a room listening at the door for the delivery guy.

   • It knows what kind of data to expect (like "shopping cart data").

   • When the ChangeNotifier shouts "Groceries updated!", the Consumer gets the new data and rebuilds itself to show the updated information.

4. Provider.of<MyData>(context) (Directly Asking for Groceries):

   • Sometimes, a widget just needs to read the state once, without constantly listening for changes.

   • You can use Provider.of<MyData>(context) to directly ask the "delivery service" for the data.

   • This is like quickly grabbing something from the delivery box without waiting for a notification.

Example (Counter App):

Let's say you want to build a simple counter app.

1. Create your State (using ChangeNotifier):

      import 'package:flutter/material.dart';

class Counter with ChangeNotifier { // Counter is our state, it can "notify" listeners
  int _count = 0; // Private variable to hold the count

  int get count => _count; // Getter to access the count

  void increment() {
    _count++;
    notifyListeners(); // Tell everyone listening that the count has changed!
  }
}

2. Wrap your App (or part of it) with Provider:

      import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; // Import the provider package
import 'counter.dart'; // Import our Counter class

void main() {
  runApp(
    ChangeNotifierProvider( // Use ChangeNotifierProvider for ChangeNotifier classes
      create: (context) => Counter(), // Create an instance of our Counter state
      child: MyApp(), // MyApp is the widget tree that will have access to Counter
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Counter App',
      home: MyHomePage(),
    );
  }
}

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

3. Use Consumer to access and display the count:

      class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Provider Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Consumer<Counter>( // Consumer listens for changes in Counter
              builder: (context, counter, child) { // `counter` is the instance of Counter
                return Text(
                  '${counter.count}', // Access the count from the Counter instance
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<Counter>(context, listen: false).increment(); // Increment the counter
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation of the Code:

• ChangeNotifierProvider(create: (context) => Counter(), child: MyApp()): We set up the Provider at the top of our app (MyApp). It creates a Counter object and makes it available to all widgets inside MyApp.

• Consumer<Counter>(builder: (context, counter, child) { ... }): Inside MyHomePage, we use Consumer<Counter> to listen for changes in the Counter state. The builder function gets the current Counter instance as counter. We display counter.count.

• Provider.of<Counter>(context, listen: false).increment(): In the FloatingActionButton, we use Provider.of<Counter>(context, listen: false) to get the Counter instance. listen: false is important here because we only want to update the state, not rebuild the button itself when the count changes. We then call counter.increment() to increase the count and notifyListeners() is automatically called inside increment(), which triggers the Consumer to rebuild and update the displayed count.

In Simple Terms Recap:

1. Provider: The container holding your data and making it accessible.

2. ChangeNotifier: Your data class that can tell listeners when it changes.

3. Consumer: Widgets that want to listen for changes and rebuild when the data updates.

4. Provider.of<MyData>(context): Widgets that want to directly access the data.

Provider makes state management in Flutter organized, efficient, and easier to understand. It avoids passing data down through many layers of widgets ("prop drilling") and keeps your UI in sync with your app's data!

This is a very basic introduction. Provider can do much more, but hopefully, this simple explanation gives you a good starting point to understand and use it! As you build more complex apps, you'll appreciate the power and simplicity of Provider for managing your app's state.