使用 FutureProvider RiverPod 组合 FutureProviders答案

【问题标题】：Combining FutureProviders using a FutureProvider RiverPod使用 FutureProvider RiverPod 组合 FutureProviders
【发布时间】：2021-12-24 00:34:11
【问题描述】：

我目前正在 Flutter 中制作 Udacity Sunshine 项目。我有两个不同的提供商来获取当前温度和每日预报。

我想合并这两个提供者并创建一个新的单一提供者，称为weatherProvider。

文件：weather_data.dart

import 'package:app/models/current_weather_data.dart';

import 'one_call_weather_data.dart';

class WeatherData {
  final OneCallWeatherData oneCallWeatherData;
  final CurrentWeatherData currentWeatherData;

  WeatherData({
    required this.oneCallWeatherData,
    required this.currentWeatherData,
  });
}

文件：weather_provider.dart

import 'package:app/models/current_weather_data.dart';
import 'package:app/models/one_call_weather_data.dart';
import 'package:app/services/weather.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

var oneCallWeatherProvider = FutureProvider<OneCallWeatherData>((ref) async {
  return await WeatherService.getOneCallWeatherData();
});

var currentWeatherProvider = FutureProvider<CurrentWeatherData>((ref) async {
  return await WeatherService.getCurrentWeatherData();
});

final weatherProvider = FutureProvider<WeatherData>((ref) async {
  final currentWeatherData = ref.watch(currentWeatherProvider);

  final onecallWeatherData = ref.watch(oneCallWeatherProvider);

 // How to return WeatherData here??
});

在上面的提供者中，我试图从两个未来的提供者那里获取数据，并获取 currentWeatherData 和 onecallWeatherData 的对象。我想在这里等他们，得到这两个数据。如果错误，这两个数据也会发送错误。现在，如何将数据从提供者发送到 UI，以便我可以在小部件上执行 .when(data:xx, error: xx, loading: xx) 并安全地获取这两个数据？

注意：我可以通过创建单个 FutureProvider 并使用 Future.wait() 等待两个期货来获取整个数据，而无需组合提供者。但是，我正在尝试学习结合提供者。因此，社区的任何解决方案都受到高度赞赏。

【问题讨论】：

标签： flutter dart future flutter-provider riverpod

【解决方案1】：

你应该这样做。

示例：

final weatherProvider = FutureProvider<WeatherData>((ref) async {
  final currentWeatherData = ref.watch(currentWeatherProvider);
  final onecallWeatherData = ref.watch(oneCallWeatherProvider);

  return WeatherData(
    oneCallWeatherData: onecallWeatherData,
    currentWeatherData: currentWeatherData,
  );
});

【讨论】：

【解决方案2】：

您可以使用provider.future 获取Future，然后您可以等待

这允许你写：

final weatherProvider = FutureProvider<WeatherData>((ref) async {
  final currentWeatherData = ref.watch(currentWeatherProvider.future);
  final onecallWeatherData = ref.watch(oneCallWeatherProvider.future);

  return WeatherData(
    oneCallWeatherData: await onecallWeatherData,
    currentWeatherData: await currentWeatherData,
  );
});

【讨论】：