Flutter基于Riverpod实现本地化及切换

1. 创建一个本地化提供者

import 'dart:ui';  
  
import 'package:flutter_riverpod/flutter_riverpod.dart';  
  
final localeProvider = StateNotifierProvider<LocaleNotifier, Locale>((ref) {  
    return LocaleNotifier();  
});  
  
class LocaleNotifier extends StateNotifier<Locale> {  
    LocaleNotifier() : super(const Locale('en', 'US'));  
  
    void setLocale(Locale locale) {  
        state = locale;  
    }  
}

2. 监听主题切换

class MyApp extends ConsumerWidget {  
    MyApp({super.key});  
  
    @override  
    Widget build(BuildContext context, WidgetRef ref) {  
    final locale = ref.watch(localeProvider);  
    return MaterialApp.router(  
        locale: locale,  
        localizationsDelegates: [  
            S.delegate,  
            GlobalMaterialLocalizations.delegate,  
            GlobalCupertinoLocalizations.delegate,  
            GlobalWidgetsLocalizations.delegate  
        ],  
        supportedLocales: S.delegate.supportedLocales,
        home: HomePage());  
    }  
}

3. 触发主题切换

class HomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: Text(S.current.appName)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                ref.read(localeProvider.notifier).setLocale(Locale('zh'));
              },
              child: Text('Theme Switch'),
            ),
          ],
        ),
      ),
    );
  }
}

至此，我们就完成了本地化的切换。但是注意到我们在做监听的时候使用了S.delegate和 S.delegate.supportedLocales,这是因为我们使用了intl插件。

intl插件的使用

在扩展应用市场搜索intl, 选择Flutter Intl安装：

Android Studio

VSCode

启动插件

Android Studio在菜单栏选择Tools->Flutter Intl->Initialize for the Project进行初始化

VSCode使用Command+Shift+P打开包命令窗口，输入Flutter Intl选择 Flutter Intl: Initialize进行初始化

自动生成相关文件

调用初始化方法后会在flutter工程的目录下自动生成以下目录及文件：

--lib 
    --l10n 
        --intl_en.arb 
    --generated 
        --l10n.dart 
        --intl
            --messages_all.dart 
            --messages_en.dart

其中intl_en.arb就是对应的英文翻译文档，l10n.dart中自动生成了本地化相关的类类名默认为S，messages_en.dart映射了intl_en.arb的对应字段，messages_all.dart编写了管理messages_en.dart以及其他对应地区的messages_xx.dart的工厂类。 除过生成的上述文件，插件也会在pubspec.yaml文件末尾自动添加intl的启用标志

flutter_intl: 
    enabled: true

添加本地依赖

我们需要在pubspec.yaml文件中添加flutter_localizations：

dependencies:
    flutter_localizations:
        sdk: flutter

添加新的语言

在初始化的时候，我们可以看到有add locale,只要填入对应的区域代码即可自动生成对应语言的intl_xx.arb和messages_xx.dart文件。

arb文件操作

只需要在arb文件中添加需要映射的字段即可，例如：

{
    "appName": "RiverPod",
    "setting": "Setting"
}

注意最后一组值后面，一定不要添加,

本地化配置

只要需要本文的监听主题切换的代码即可。

使用

我们只需要调用S.current或者S.of(context)的对应arb字段即可：

S.current.appName;
S.of(context).seeting;

至此，我们就完成了基于Riverpod实现的本地化及切换功能。