Combining Riverpod and Provider

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

Watching Provider objects in Riverpod

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

Press + to interact
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:

Press + to interact
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. ...

Get hands-on with 1400+ tech skills courses.