Summary - Riverpod advanced

Combine StateNotifier and AsyncValue to make an API screen.

Combining StateNotifier and AsyncValue

On an API screen you combine state management and async state modelling by using StateNotifier<AsyncValue<T>>. The constructor sets the initial loading state and starts loading data. AsyncValue.guard runs the Future safely: on success it switches to data, on error to error.

class UserNotifier extends StateNotifier<AsyncValue<String>> {
  UserNotifier() : super(const AsyncValue.loading()) {
    _load();
  }
  Future<void> _load() async {
    state = const AsyncValue.loading();
    state = await AsyncValue.guard(() async => 'Ayşe');
  }
}

Exercise Write a UserNotifier class

Write a class named UserNotifier that extends StateNotifier<AsyncValue<String>>. The constructor should start with super(const AsyncValue.loading()) and call _load. _load should first set loading, then update the state with AsyncValue.guard(() async => 'Ayşe'). In main, create an instance, await _load, and print the value in the data case of state.when.

Show example solution

import 'package:flutter_riverpod/flutter_riverpod.dart';

class UserNotifier extends StateNotifier<AsyncValue<String>> {
  UserNotifier() : super(const AsyncValue.loading()) {
    _load();
  }
  Future<void> _load() async {
    state = const AsyncValue.loading();
    state = await AsyncValue.guard(() async => 'Ayşe');
  }
}

void main() async {
  final notifier = UserNotifier();
  await notifier._load();
  notifier.state.when(
    data: (s) => print(s),
    loading: () => print('Yükleniyor'),
    error: (e, s) => print('Hata'),
  );
}

Test yourself

What does AsyncValue.guard do?
- Runs the Future, switches to data on success or error on failure
- Cancels the Future
- Only sets the loading state
- Converts a Stream into a Future
Show answer

Runs the Future, switches to data on success or error on failure — guard runs the Future passed to it and converts the result into the appropriate AsyncValue; you do not have to write try/catch.

Load with AsyncValue.guard

state = await AsyncValue.____(() async => 'Ayşe');

Show answer

state = await AsyncValue.guard(() async => 'Ayşe');

API screen parts

StateNotifier<AsyncValue<T>>

Holds async state
AsyncValue.guard

Wraps a Future safely
super(AsyncValue.loading())

Initial loading
when

Handles all three states

Next lesson: Bloc class

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies