How to use AutoDisposeFamilyAsyncNotifier

car_auto_dispose_family_async_notifier.dart

import 'dart:async';
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

/// Car model class holding relevant car attributes
class Car {
  final String modelName;
  final int modelYear;

  Car(this.modelName, this.modelYear);
}

/// CarProviderArgs used to pass some data to the provider
class CarProviderArgs {
  final bool isUsed;
  final int miles;

  CarProviderArgs({
    required this.isUsed,
    required this.miles,
  });

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) return true;

    return other is CarProviderArgs &&
        other.isUsed == isUsed &&
        other.miles == miles;
  }

  @override
  int get hashCode => isUsed.hashCode ^ miles.hashCode;

  @override
  String toString() {
    return 'CarProviderArgs{used: $isUsed, miles: $miles}';
  }
}

/// CarNotifier getting the CarProviderArgs and holding the state
class CarNotifier
    extends AutoDisposeFamilyAsyncNotifier<List<Car>, CarProviderArgs> {
  @override
  FutureOr<List<Car>> build(CarProviderArgs arg) async {
    log("Passed arguments: $arg");
    state = const AsyncLoading();
    final newState = await AsyncValue.guard(_fetchCars);
    state = newState;
    return newState.value ?? [];
  }

  Future<List<Car>> _fetchCars() async {
    await Future.delayed(const Duration(milliseconds: 1000));
    return await ref.read(carRepoProvider).fetchCars(
          arg.isUsed,
          arg.miles,
        );
  }
}

/// FirebaseCarRepository for fetching cars from a DB
class FirebaseCarRepository {
  Future<List<Car>> fetchCars(bool isUsed, int miles) async {
    // TODO: fetch your car list e.g from firebase
    // await FirebaseFirestore.instance.collection("YOUR_COLLECTION") ...
    return [];
  }
}

/// CarRepoProvider, providing the repository
final carRepoProvider = Provider<FirebaseCarRepository>((ref) {
  return FirebaseCarRepository();
});

/// Main carProvider used in the UI
final carProvider = AutoDisposeAsyncNotifierProviderFamily<CarNotifier,
    List<Car>, CarProviderArgs>(CarNotifier.new);

/// My UI Widget as ConsumerWidget to read / watch the carProvider
class MyCarWidget extends ConsumerWidget {
  const MyCarWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var args = CarProviderArgs(isUsed: true, miles: 5000);
    var cars = ref.watch(carProvider(args));
    // do what ever you like with the cars list, e.g display inside ListView etc.
    return const Placeholder();
  }
}