基于Riverpod的Flutter用户偏好同步访问与UI同步方案优化咨询

我正在开发一款Flutter应用，用户偏好会影响UI展示——比如用户选择的度量单位系统会控制度量值以kg或lbs形式显示。需要实现一种用户偏好检索方法，满足以下要求：

• 允许在代码中同步访问用户偏好（每次映射实体到ViewModel都要await getUserPreferences过于繁琐）
• 允许UI同步响应存储的用户偏好变更

当前实现方案 #

通过Stream获取用户偏好，在MaterialApp上方的主入口监听，以此同步访问UserPreferences值：

主入口代码 #

class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return _UserEagerInitialization(
        child: MaterialApp.router(
      locale: context.locale,
      builder: (context, widget) =>
          responsiveAppBuilder.defineDevicesScreenWidth(widget!),
      debugShowCheckedModeBanner: false,
      title: 'App',
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      theme: AppTheme.themeData,
      routerConfig: router,
    ));
  }
}

class _UserEagerInitialization extends ConsumerWidget {
  const _UserEagerInitialization({required this.child});
  final Widget child;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userAuthenticationStream =
        ref.watch(getUserAuthenticationStatusProvider);
    final userPreferencesStream = ref.watch(getUserPreferencesProvider);
    final userProfileStream = ref.watch(getUserProfileProvider);

    return userAuthenticationStream.maybeWhen(
        data: (userSession) => userPreferencesStream.maybeWhen(
            data: (userPreferences) => userProfileStream.maybeWhen(
                data: (userProfile) => child,
                orElse: () => const LoadingSpinner(),
                skipLoadingOnRefresh: true,
                skipLoadingOnReload: true),
            orElse: () => const LoadingSpinner(),
            skipLoadingOnRefresh: true,
            skipLoadingOnReload: true),
        orElse: () => const LoadingSpinner(),
        skipLoadingOnRefresh: true,
        skipLoadingOnReload: true);
  }
}

其他位置同步访问代码 #

ref.watch(getUserPreferencesProvider).requireValue

现有方案的问题 #

• 使用requireValue存在出错风险：一旦Provider未完成加载就调用，会直接抛出异常
• 可能触发过度重建：用户偏好变更时，当前方案可能导致根节点的MaterialApp相关组件更新，尽管Riverpod文档声称不会重建整个应用，但仍存在不必要的性能消耗

优化方案参考Riverpod预初始化机制 #

Riverpod的预初始化机制可确保依赖在应用启动时完成加载，结合以下方式优化用户偏好的访问逻辑：

1. 用AsyncValue.when替代requireValue #

在需要访问用户偏好的Widget中，通过when方法处理加载、错误、就绪三种状态，彻底规避requireValue的异常风险：

final userPreferences = ref.watch(getUserPreferencesProvider);
return userPreferences.when(
  loading: () => const LoadingSpinner(),
  error: (err, stack) => ErrorWidget(err),
  data: (prefs) => Text(prefs.unitSystem == UnitSystem.metric ? 'kg' : 'lbs'),
);

2. 拆分Provider，减少不必要的监听 #

不要在根节点同时监听多个StreamProvider，将用户偏好、认证状态、用户信息拆分为独立Provider，仅在需要的Widget中监听对应依赖：

• 仅在展示度量单位的Widget中监听userPreferencesProvider
• 认证状态和用户信息Provider同理，只在依赖它们的组件中使用

3. 用StateNotifierProvider管理可修改的用户偏好 #

如果用户偏好支持修改，将其封装为StateNotifier，既能同步访问当前状态，又能在变更时精准通知UI更新：

class UserPreferencesNotifier extends StateNotifier<UserPreferences> {
  UserPreferencesNotifier(UserPreferences initialState) : super(initialState);

  void updateUnitSystem(UnitSystem system) {
    state = state.copyWith(unitSystem: system);
    // 同步保存到本地存储
    _savePreferences(state);
  }

  Future<void> _savePreferences(UserPreferences prefs) async {
    // 实现本地存储逻辑，例如SharedPreferences
  }
}

final userPreferencesProvider = StateNotifierProvider<UserPreferencesNotifier, UserPreferences>((ref) {
  // 从本地加载初始偏好
  final initialPrefs = _loadInitialPreferences();
  return UserPreferencesNotifier(initialPrefs);
});

访问时直接使用ref.watch(userPreferencesProvider)，无需处理异步状态，且状态变更仅会重建依赖该状态的Widget。

4. 优化预初始化逻辑 #

若必须在应用启动时加载所有依赖，使用FutureProvider组合多个初始化任务，替代嵌套的maybeWhen：

final appInitializationProvider = FutureProvider<void>((ref) async {
  await ref.watch(getUserAuthenticationStatusProvider.future);
  await ref.watch(getUserPreferencesProvider.future);
  await ref.watch(getUserProfileProvider.future);
});

class _UserEagerInitialization extends ConsumerWidget {
  const _UserEagerInitialization({required this.child});
  final Widget child;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final initialization = ref.watch(appInitializationProvider);
    return initialization.when(
      loading: () => const LoadingSpinner(),
      error: (err, stack) => ErrorWidget(err),
      data: (_) => child,
    );
  }
}

此方式代码更简洁，同时确保所有依赖加载完成后才展示主应用。

内容的提问来源于stack exchange，提问作者salim.elkh