Gain insights into mastering Flutter state management with Riverpod. Learn about reducing widget rebuilds and best practices to enhance your cross-platform app development skills.

data.tar.gz

Flutter_Web

Flutter_Web_Chp12

Flutter SDK is an excellent tool for developing cross-platform applications from a single codebase. So, it's no surprise that many professionals and learners have decided to gain mastery over Flutter concepts.

One such concept is state management, and many, despite having intermediate-to-advanced proficiency in Flutter, still struggle with this concept. This course will help you learn and master the best practices for state management in Flutter.

You will learn to use the two best Flutter libraries, Riverpod and Provider, for state management. You will even learn about reducing widget rebuilds by managing their state.

Master State Management in Flutter

# Watching `Provider` objects in Riverpod

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

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:

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 `ScopedReader watch` passes through the `build()` method and drastically reduces the boilerplate code.

# Mixing up Riverpod and `Provider`

In this app structure, we have a usual controller folder with two widgets in it.
The first widget will use the `ScopedReader watch` as just mentioned.

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

Introduction

Stateless vs. Stateful Widgets

Flutter Callbacks and Maps

Managing States and Widgets in Flutter

A Brief Look at the Flutter Provider Library

A Deeper Dive Into the Provider Library

Riverpod Library for State Management

Flutter Challenges

Essential Tools to Enhance Your Flutter Workflow

Conclusion

Appendix

Combining Riverpod and Provider