Search⌘ K
Home
Courses
Master State Management in Flutter

Combining Riverpod and Provider

Learn how you can get the best of two worlds by mixing up the riverpod and provider libraries.

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 ...