Search⌘ K
Home
Courses
Master State Management in Flutter

StateProvider Widget: Watch Function

Explore how to implement the StateProvider watch function in Riverpod to manage state effectively in Flutter. Understand how separating logic using the MVC pattern and tracking widget rebuilds can optimize app performance and reduce boilerplate code.

We'll cover the following...

Watching the StateProvider

Although the code snippet is shorter than the other, it still plays an essential role in watching the Provider.

Dart
import 'package:flutter/material.dart';
class WatchNameAndCity extends StatelessWidget {
  const WatchNameAndCity({
    Key? key,
    @required this.stateProviderNameObject,
    @required this.stateProviderCityObject,
  }) : super(key: key);
  final String? stateProviderNameObject;
  final String? stateProviderCityObject;
  @override
  Widget build(BuildContext context) {
    return Text(
      stateProviderNameObject! + ' from ' + stateProviderCityObject!,
      style: TextStyle(
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

This process of breaking down the whole app architecture may seem daunting, but it is necessary. Moreover, it makes our code testable, and produces less boilerplate code.

Now, as regards the less boilerplate, the Riverpod state management makes a huge difference.

Why so? Because now we can place our Provider's watch() and read() methods ...