Riverpod 本地化

演示如何使用 Riverpod 在应用程序内进行动态区域设置切换，并支持持久化。

工作原理

• 备用区域设置：在 locale_state.dart 中声明，并使用 @Default 装饰器设置。
• 默认区域设置：启动时，获取系统的 Platform.localeName (通过 dart:io) 并用它来设置应用的区域设置。
  • 如果平台区域设置与支持的区域设置不匹配
    • 将设置第一个匹配的语言代码区域设置。
    • 否则，将使用备用区域设置。
• 支持的区域设置：这些存储在一个 provider 中，可以从任何地方访问。更新此列表以添加更多区域设置。
• 当前区域设置：在 ref 对象可用的任何地方都可以从 provider 访问。观察此 provider，以便在区域设置更改时自动重建。您仍然可以使用 Localizations.localeOf(context) 来获取 Locale。

区域设置更改

• initState 从平台设置初始区域设置。

  • 应用以备用区域设置启动
  • initState 立即尝试从持久存储中恢复区域设置到 Riverpod 状态。
  • 如果存储中没有区域设置，则尝试使用平台的区域设置。

• 可以使用下拉菜单选择新的区域设置。

  • 这将更新状态并将区域设置保存到持久存储。

• MaterialApp() 被包裹在一个 Riverpod 的 ConsumerWidget 中，每当 *观察到的* ref.watch() 区域设置值发生变化时，它都会自动重建。

• 所有翻译的字符串都将作为此过程的一部分被重建。

平台区域设置

dart:io 库的 Platform.locale 属性仅在移动设备上可用。在 Web 上，我们需要使用 dart:html 的 window.navigator.language。
这是通过 PlatformLocale() 接口和条件导入实现的。

依赖项

• 状态管理：Riverpod
• 不可变状态：Freezed
  • 请注意，用于保存 Locale 的自定义转换器 toJson 和 fromJson。Freezed 自然地与 json_serializable 配合使用。
• 国际化/本地化：flutter_localizations
• 持久化：shared_preferences

入门

代码生成：此应用程序使用 build_runner 为 freezed 生成代码。

# flutter pub run build_runner build --delete-conflicting-outputs

GitHub

查看 Github