flutter中实现多语言配置

flutter_localizations插件使用

• 先导入插件

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;

• 然后在DemoLocalizations类中对文字进行配置，并声明字段获取方法

class DemoLocalizations {
  final Locale locale;
  DemoLocalizations(this.locale);
  static Map<String, Map<String, String>> _localizedValues = {
    'en': { // 英文配置
      'page title': 'Report'
    },
    'zh': { // 中文配置
      'page title': '报告'
    },
    'ja': { // 日文配置
      'page title': 'レポート'
    }
  };
  // 声明获取函数
  get pageTitle => _localizedValues[locale.languageCode]!['page title']; // 这里的'page title'对应上面配置的字段的名字
  
  static DemoLocalizations of(BuildContext context) {
    return Localizations.of(context, DemoLocalizations);
  }

• 然后在DemoLocalizationsDelegate类中配置支持的语种

class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations> {
  const DemoLocalizationsDelegate();
  @override
  bool isSupported(Locale locale) {
    return ['en', 'zh', 'ja'].contains(locale.languageCode);
  }
  @override
  Future<DemoLocalizations> load(Locale locale) {
    // 这里的SynchronousFuture也需要在上面导入
    return new SynchronousFuture<DemoLocalizations>(new DemoLocalizations(locale));
  }
  @override
  bool shouldReload(LocalizationsDelegate<DemoLocalizations> old) {
    return false;
  }
  static DemoLocalizationsDelegate delegate = const DemoLocalizationsDelegate();
}

• 至此，配置部分就完成了，然后就是怎么使用了：
• 首先再main中引入配置

// 在MaterialApp中
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Color.fromRGBO(62, 160, 233, 1)),
      home: MyHomePage(title: "flutter"),
      builder: EasyLoading.init(),

      //localeResolutionCallback回调是当本地系统语言发生改变时隐式调用的
      localeResolutionCallback: (locale, supportedLocales) {
        var res = supportedLocales.where((element) => element.languageCode == locale!.languageCode);
        if (res.isNotEmpty) {
          return locale;
        } else {
          return Locale("en", '');
        }
      },
      localizationsDelegates: [
        //前两个delegate为默认的，第三个才是在locale.dart中自定义的
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DemoLocalizationsDelegate.delegate,
      ],
      supportedLocales: [//支持3种语言，这里没有区分地区
        const Locale('zh', ''),
        const Locale('en', ''),
        const Locale('ja', '')
      ]
    );
  }
}

• 然后在需要用到的地方导入多语言配置文件

import 'locale.dart';

• 然后flutter中使用多语言配置需要上下文context，为了方便起见，可以声明一个全局的rootContext，然后根Widget那里给它赋值rootContext = context;
• 最后就可以将需要多语言的text内容替换为DemoLocalizations.of(rootContext).pageTitle，这里调用的pageTitle就是在配置文件中声明的获取方法