Provider in Flutter Complete Tutorial

The provider in flutter is a popular state management library that allows you to easily share and access data across different widgets of your application. You can use it to update the state or widget outside any widget. It updates the value of any variable immediately when it changes.

To use Provider in Flutter, you need to add the provider package as a dependency in your pubspec.yaml file or you can simple run: “flutter pub add provider” in the terminal.


dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

After adding the dependency, run “flutter pub get” to download and install the package.

Now, let’s see how to use `Provider` step by step in flutter:

Create a Data Model: Start by defining the data model or class that represents the data you want to share across your app. For example, let’s create a simple Counter class with an integer value, You can use the variables or function directly creating in the CounterProvider which will creating below. In this case there is no need or Counter Data Model.


class Counter {
  int value = 0;
}

2. Create a Provider: Next, create a provider that will manage the state of the Counter. You can define a provider by extending the ChangeNotifier class from the provider package. You can provide any name in place of CounterProvider.


import 'package:flutter/foundation.dart';

class CounterProvider extends ChangeNotifier {
  Counter _counter = Counter();

  Counter get counter => _counter;

  void increment() {
    _counter.value++;
    notifyListeners(); // Notify listeners when the state changes
  }
}

In this example, the CounterProvider class manages the state of the Counter and provides methods to modify it. The notifyListeners() method is called to notify any listeners (widgets) that the state has changed.

3. Wrap your App with a Provider: In the main() function, wrap your app widget with a ChangeNotifierProvider to make the state available throughout your app. You can wrap also with Multiprovider as well ass.


void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterProvider(),
      child: MyApp(),
    ),
  );
}

Here, we create an instance of the CounterProvider and provide it to the ChangeNotifierProvider. The MyApp widget is then wrapped as a child of the provider.

Now how to use provider in flutter widgets?

4. How to access the Provider in Widgets: Now, you can access the CounterProvider and its state in any widget that is a descendant of the ChangeNotifierProvider, You have to create an instance or Provider by providing the CounterProvider reference. Then by using that declared variable you can access all the properties.


class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CounterProvider counterProvider = Provider.of<CounterProvider>(context);

    return Text('Counter value: ${counterProvider.counter.value}');
  }
}

In this example, the MyWidget widget uses the Provider.of method to access the CounterProvider and retrieve the current counter value. Whenever the counter value changes, the Text widget will automatically update.

5. How to modify the Provider’s State: To modify the state managed by the provider, you can use the Consumer widget or the Provider.of method with the listen parameter set to false. Here’s an example using the Consumer widget:


class IncrementButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        CounterProvider counterProvider = Provider.of<CounterProvider>(context, listen: false);
        counterProvider.increment();
      },
      child: Text('Increment'),
    );
  }
}

In this example, when the button is pressed, it retrieves the CounterProvider and calls the increment method to modify the counter value.

That’s the basic usage of Provider in Flutter. You can visit its official page from Here. You can also learn about the Redux which is similar to provider in flutter.

Thank you for visiting this page on FlutterTpoint. Hope you get that what and how to use Provider in flutter. For more tutorials you can visit the Flutter sections.