Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

Loading

Provider vs Riverpod in Flutter | Code example of Counter App

svgFebruary 17, 2023DartFlutterCodeStackGuide

Flutter Provider and Riverpod are both state management solutions for Flutter apps. They both allow you to manage and update state in your app in a more efficient and organized way.

Flutter Provider is a lightweight and straightforward state management solution that is built into Flutter. It provides a way to share data between different widgets in your app without having to pass data down through a long chain of widgets. Provider is based on the InheritedWidget class, which allows you to create a hierarchy of widgets that can access a shared data source.

Riverpod, on the other hand, is a newer state management solution for Flutter that was developed by the creator of the Flutter Hooks package. Riverpod is built on top of Provider and provides a more powerful and flexible way to manage state in your app. It allows you to create and manage multiple “scopes” of state, which can be used to separate concerns and simplify your code.

One of the main benefits of Riverpod is that it is designed to be more testable and modular than Provider. It uses a “ProviderContainer” object that can be easily mocked and tested in isolation. Additionally, Riverpod provides a more flexible way to handle asynchronous data and allows you to use more advanced dependency injection patterns.

Overall, both Flutter Provider and Riverpod are great options for state management in Flutter apps. If you need a simple and lightweight solution, Flutter Provider may be the better choice. If you need more flexibility and testability, Riverpod may be a better fit.

Here are some key differences between Flutter Provider and Riverpod:

Flutter Provider:

  • Built-in state management solution in Flutter
  • Lightweight and easy to use
  • Based on the InheritedWidget class
  • Provides a way to share data between widgets without passing it down the widget tree
  • Suitable for small to medium-sized apps with simple state management needs

Riverpod:

  • Third-party state management solution for Flutter
  • Built on top of Flutter Provider
  • Provides more advanced state management features
  • Allows for more flexible dependency injection patterns
  • Separates concerns by creating and managing multiple “scopes” of state
  • Designed to be more testable and modular than Flutter Provider
  • Supports asynchronous data handling
  • Suitable for larger and more complex apps with advanced state management needs

Here are some code examples of using Flutter Provider and Riverpod for state management: A simple counter app code example

Provider:

// Define a model class for the data you want to share
class MyData {
  int counter = 0;
}

// Create a Provider that can be used to share the data
final myDataProvider = ChangeNotifierProvider((_) => MyData());

// Use the Provider in a widget to access the shared data
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myData = Provider.of<MyData>(context);
    return Text('Counter: ${myData.counter}');
  }
}

// Update the shared data using the Provider
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myData = Provider.of<MyData>(context, listen: false);
    return ElevatedButton(
      onPressed: () {
        myData.counter++;
      },
      child: Text('Increment'),
    );
  }
}

Riverpod:

// Define a model class for the data you want to share
class MyData {
  int counter = 0;
}

// Create a Riverpod Provider that can be used to share the data
final myDataProvider = StateNotifierProvider((_) => MyDataController());

// Define a StateNotifier class to manage the shared data
class MyDataController extends StateNotifier<MyData> {
  MyDataController() : super(MyData());

  void incrementCounter() {
    state.counter++;
  }
}

// Use the Provider in a widget to access the shared data
class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final myData = watch(myDataProvider);
    return Text('Counter: ${myData.counter}');
  }
}

// Update the shared data using the Provider
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myData = context.read(myDataProvider.notifier);
    return ElevatedButton(
      onPressed: () {
        myData.incrementCounter();
      },
      child: Text('Increment'),
    );
  }
}
0 People voted this article. 0 Upvotes - 0 Downvotes.
svg

What do you think?

Show comments / Leave a comment

Leave a reply

svg
Quick Navigation
  • 01

    Provider vs Riverpod in Flutter | Code example of Counter App