Search⌘ K
AI Features
Home
Courses
Master State Management in Flutter

Combining Riverpod and Provider

Understand how to combine Riverpod and the older Provider package for effective state management in Flutter. Explore methods to watch and update state with minimal widget rebuilds, using ScopedReader and Consumer widgets. Gain practical insights into reducing boilerplate code and optimizing widget performance in your cross-platform Flutter apps.

We'll cover the following...

Watching Provider objects in Riverpod

We can watch it by using the Consumer builder like the following code snippet:

Dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../model/any_type_provider_model.dart';
class ProviderExampleWidget extends StatelessWidget {
  const ProviderExampleWidget({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 10.0,
        ),
        Padding(
          padding: const EdgeInsets.all(18.0),
          child: Text(
            'Riverpod Provider example where we watch a String member variable'
            ' that we have passed through a class method.',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(18.0),
          child: Center(
            child: Consumer(
              builder: (context, watch, child) {
                final x = watch(classTypeProviderModel);
                return Text(
                  x.fetchName('We can now pass any string data...'),
                  style: TextStyle(
                    fontSize: 50.0,
                  ),
                );
              },
            ),
          ),
        ),
        SizedBox(
          height: 10.0,
        ),
      ],
    );
  }
}

In the above code, this part holds the trick:

Dart
Consumer(
  builder: (context, watch, child) {
    final x = watch(classTypeProviderModel);
    return Text(
      x.fetchName('We can now pass any string data...'),
      style: TextStyle(
        fontSize: 50.0,
      ),
    );
  },
),

We’ll show a more straightforward method in this section. That will drastically reduce the boilerplate code. However, the above method reduces the widget rebuilds more than any other method. Here the Text widget is the only widget rebuilt.

In the following code snippet, we can see how the ...