What is Provider and how to use in Flutter projects - MultiProvider and Consumer

A provider package is a third-party library that provides a simple and efficient way to manage state and dependencies in Flutter applications. The package implements the Provider pattern, which is a design pattern for managing state and dependencies in a Flutter app. 

The Provider package offers a set of widgets and tools that simplify the process of accessing and updating the state throughout the app, without having to pass data manually between widgets. Some popular provider packages in Flutter include provider, scoped_model, and the bloc.

Step 1: Import the Provider package:

import 'package:provider/provider.dart';

Step 2: Create a class for the data you want to store and manage:

The ChangeNotifier class in Flutter is used as a base class for implementing a simple data model that can be used with the Provider package for state management. The ChangeNotifier class provides a simple API for managing and updating the state of a model and notifying listeners when the state has changed. 

By using the ChangeNotifier class, you can implement a data model that can be easily provided to your widgets tree using the ChangeNotifierProvider widget. The ChangeNotifierProvider widget can then be used to manage the lifecycle of the ChangeNotifier instance and to notify listeners when the state of the model has changed. This makes it easy to keep your widgets up-to-date with the latest data, without having to manually manage subscriptions or re-build the widget tree.

class Counter with ChangeNotifier {
  int value = 0;

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

Step 3: Wrap the top-level widget of our app with MultiProvider:

The MultiProvider widget in Flutter is used to provide multiple providers to the widgets tree. This can be useful when you have multiple different data sources or state management solutions that you want to use in your Flutter app. The MultiProvider widget takes a list of providers and a single child widget. The child widget can then access and consume data from any of the providers through the Consumer or Selector widgets. The MultiProvider widget in Flutter is used to provide multiple providers to the widgets tree. This can be useful when you have multiple different data sources or state management solutions that you want to use in your Flutter app. The MultiProvider widget takes a list of providers and a single child widget. The child widget can then access and consume data from any of the providers through the Consumer or Selector widgets.

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
      ],
      child: MyApp(),
    ),
  );
}

Step 4: Use the Consumer widget to access the data from the provider:

The Consumer widget in Flutter is a widget that is used to access and consume data from a Provider in a reactive way. The Consumer widget takes the data provided by a Provider and passes it down to its children widgets through a builder function. This way, the Consumer can re-render itself and its children whenever the data provided by the Provider changes. The Consumer widget is more efficient than using a BuildContext and Provider.of in situations where multiple widgets need to access and use the same data provided by a Provider. This is because the Consumer widget only re-builds the widgets that depend on the data, rather than re-building the entire widget tree.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Consumer<Counter>(
            builder: (context, counter, child) {
              return Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headline4,
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () =>
            Provider.of<Counter>(context, listen: false).increment(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

....

Above example, the Counter class is the provider, and the Consumer widget is used to access and update the data stored in the provider.