【Flutter】多语言方案一：flutter

介绍

多语言方案：flutter_localizations 与 GetX 配合版，好处：命令行生成多语言字符串的引用常量类，缺点：切换语言以后，主界面需要手动触发setState，重绘将最新的Locale数据设置给GetMaterialApp。

目录

• 介绍
• 运行效果
• 一、安装
• 二、使用
• • 1.lib文件夹中新建文件夹l10n/arb，并在其中创建app_en.arb 、app_zh.arb、app_zh_HK.arb文件
  • 2.项目的根目录中添加l10n.yaml，配置如下
  • 3.添加完成之后，执行命令`flutter gen-l10n`，执行命令`flutter run`，.dart_tools会自动生成相关的文件
  • 4.MaterialApp改成GetMaterialApp配置国际化字段
  • 5.调用
  • 6.多语言切换

    ---

    运行效果

    一、安装

    dependencies:flutter_localizations:sdk: flutterintl: anyget: ^4.6.6flutter:uses-material-design: truegenerate: true

    二、使用

    1.lib文件夹中新建文件夹l10n/arb，并在其中创建app_en.arb 、app_zh.arb、app_zh_HK.arb文件

    app_en.arb类

    {  "@@locale": "en",  "appName": "BraveComponent",  "@appName": {      "description": "备注"  },  "helloWorld": "HelloWorld",  "followerSystemLanguage": "FollowerSystemLanguage",  "simplifiedChinese": "SimplifiedChinese",  "traditionalChinese": "TraditionalChinese",  "english": "English",  "setting": "Setting",  "multiLanguage": "MultiLanguage",  "theme": "Theme"}

    app_zh.arb类

    {  "@@locale": "zh",  "appName": "BraveComponent",  "@appName": {      "description": "备注"  },  "helloWorld": "你好，世界",  "followerSystemLanguage": "跟随系统语言",  "simplifiedChinese": "简体中文",  "traditionalChinese": "繁体中文",  "english": "英文",  "setting": "设置",  "multiLanguage": "多语言",  "theme": "主题"}

    app_zh.arb类

    {   "@@locale": "zh_HK",   "appName": "BraveComponent",   "@appName": {       "description": "備注"   },   "helloWorld": "妳好，世界",   "followerSystemLanguage": "跟隨系統語言",   "simplifiedChinese": "簡體中文",   "traditionalChinese": "繁體中文",   "english": "英文",   "setting": "設置",   "multiLanguage": "多語言",   "theme": "主題"}

    2.项目的根目录中添加l10n.yaml，配置如下

    arb-dir: lib/l10n/arbtemplate-arb-file: app_zh.arboutput-localization-file: app_localizations.dartoutput-class: AppLocalizationsuse-deferred-loading: truenullable-getter: false

    3.添加完成之后，执行命令flutter gen-l10n，执行命令flutter run，.dart_tools会自动生成相关的文件

    4.MaterialApp改成GetMaterialApp配置国际化字段

    l10n_app.dart类代码

    import 'package:brave_component/core/utils/language_utils.dart';import 'package:flutter/material.dart';import 'package:flutter_localizations/flutter_localizations.dart';import 'package:get/get.dart';import 'l10n/l10n.dart';import 'routes/route_pages.dart';import 'routes/route_path.dart';class L10nApp extends StatefulWidget {  bool _init = true;  L10nApp({super.key});  @override  State createState() => L10nAppState();}class L10nAppState extends State {  // 供外部使用的_AppSetting实例，用于修改app的状态  static AppSetting setting = AppSetting.instance;  @override  void initState() {    super.initState();    //第一次进入app时，获取本地多语言的countryCode    if (widget._init) {      setting.setLocale();      widget._init = false;    }    // 更改语言    setting.changeLocale = () {      setState(() {});    };  }  @override  Widget build(BuildContext context) {    return GetMaterialApp(      initialRoute: RoutePath.l10n_main,      getPages: RoutePages.getPages,      title: 'component',      theme: ThemeData(        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),        useMaterial3: true,      ),      locale: setting._locale,      fallbackLocale: const Locale("zh", "CN"),      localeResolutionCallback: (deviceLocale, supportedLocales) {        print('当前语言：${deviceLocale.toString()}');        return;      },      supportedLocales: AppLocalizations.supportedLocales,      localizationsDelegates: const [        AppLocalizations.delegate,        GlobalCupertinoLocalizations.delegate,        GlobalWidgetsLocalizations.delegate,        GlobalMaterialLocalizations.delegate      ],    );  }}class AppSetting {  AppSetting._();  static final AppSetting _instance = AppSetting._();  static AppSetting get instance => _instance;  Locale? _locale;  Function()? changeLocale;  void setLocale() {    _locale = LanguageUtils.getLocale();  }}

    language_utils.dart类代码

    import 'package:brave_component/l10n/l10n.dart';import 'package:flutter/widgets.dart';import 'package:get/get.dart';import '../../l10n_app.dart';import '../cache/helpers/cache_helper.dart';import '../enums/language.dart';class LanguageUtils {  static String getLanguage(BuildContext context, String code) {    late String language;    switch (code) {      case 'fs-Lan':        language = context.l10n.followerSystemLanguage;        break;      case 'zh-CN':        language = context.l10n.simplifiedChinese;        break;      case 'zh-HK':        language = context.l10n.traditionalChinese;        break;      case 'en-US':        language = context.l10n.english;        break;      default:        language = context.l10n.followerSystemLanguage;        break;    }    return language;  }  static Locale? getLocale() {    Locale? locale;    String code = CacheHelper.countryCode;    List lang = code.split('-');    locale = (code == Language.fsLan.countryCode)        ? Get.deviceLocale        : Locale(lang[0], lang[1]);    return locale;  }  static void updateLocale(String countryCode, {bool isL10n = false}) {    List lang = countryCode.split('-');    Get.updateLocale((countryCode == Language.fsLan.countryCode)        ? Get.deviceLocale!        : Locale(lang[0], lang[1]));    CacheHelper.saveCountryCode(countryCode);    if (isL10n) {      L10nAppState.setting.changeLocale!();    }  }}

    mian.dart类

    import 'package:flutter/material.dart';import 'app.dart';import 'core/cache/cache/cache.dart';import 'l10n_app.dart';void main() async {  await Cache.instance.init();  runApp(L10nApp()); //flutter_localizations与GetX配合版的多语言  // runApp(const App()); //GetX版多语言}

    5.调用

    1. 直接使用 Text(AppLocalizations.of(context).helloWorld)
    2. 扩展使用

       - 扩展BuildContext

    extension BuildContextExtension on BuildContext {        AppLocalizations get l10n => AppLocalizations.of(this);    }

     - 使用    Text(context.l10n.helloWorld)  

    6.多语言切换

    l10n_multi_language_view.dart类

    import 'package:brave_component/core/enums/language.dart';import 'package:brave_component/l10n/l10n.dart';import 'package:flutter/material.dart';import 'package:get/get.dart';import '../../../../../core/res/colours.dart';import '../../../../../widgets/base/texts.dart';import 'l10n_multi_language_logic.dart';class L10nMultiLanguagePage extends StatelessWidget {  L10nMultiLanguagePage({super.key});  final logic = Get.find();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Texts.fontSize18Normal(context.l10n.multiLanguage,            color: Colours.titleColor),        leading: GestureDetector(          onTap: () {            Get.back(result: 'changeLanguage');          },          child: const Icon(Icons.arrow_back),        ),      ),      body: Container(        padding: const EdgeInsets.symmetric(vertical: 15),        // child: ListView(        //   children: ListTile.pideTiles(        //           context: context,        //           tiles: Language.values        //               .map((e) =>        //                   GetBuilder(builder: (logic) {        //                     return ListTile(        //                       title: Texts.fontSize14Normal(e.title,        //                           color: Colours.titleColor),        //                       trailing: e.countryCode == logic.countryCode        //                           ? const Icon(Icons.check,        //                               color: Colours.primaryColor)        //                           : null,        //                       onTap: () {        //                         logic.changeLanguage(e.countryCode);        //                       },        //                     );        //                   }))        //               .toList())        //       .toList(),        // ),        child: ListView.separated(            itemBuilder: (context, index) {              return _itemContent(context, index);            },            separatorBuilder: (_, index) => const Divider(),            itemCount: Language.values.length),      ),    );  }  Widget _itemContent(BuildContext context, int index) {    return GetBuilder(builder: (logic) {      return Container(        padding: const EdgeInsets.symmetric(horizontal: 15),        height: 44,        child: GestureDetector(          onTap: () {            logic.changeLanguage(Language.values[index].countryCode);          },          child: Row(            children: [              Expanded(                  child: Texts.fontSize14Normal(Language.values[index].title,                      color: Colours.titleColor)),              Visibility(                  visible:                      logic.countryCode == Language.values[index].countryCode,                  child: const Icon(Icons.check, color: Colours.primaryColor))            ],          ),        ),      );    });  }}

    l10n_multi_language_logic.dart类

    import 'package:brave_component/core/cache/helpers/cache_helper.dart';import 'package:brave_component/core/utils/language_utils.dart';import 'package:get/get.dart';class L10nMultiLanguageLogic extends GetxController {  late String countryCode;  @override  void onInit() {    super.onInit();    countryCode = CacheHelper.countryCode;  }  void changeLanguage(String code) {    countryCode = code;    LanguageUtils.updateLocale(code, isL10n: true);//切换Locale    update();  }}

    l10n_multi_language_binding.dart类

    import 'package:get/get.dart';import 'l10n_multi_language_logic.dart';class L10nMultiLanguageBinding extends Bindings {  @override  void dependencies() {    Get.lazyPut(() => L10nMultiLanguageLogic());  }}

    language 类

    enum Language {  fsLan(title: "跟随系统语言", countryCode: "fs-Lan"),  zhCN(title: "简体中文", countryCode: "zh-CN"),  zhHK(title: "繁体中文", countryCode: "zh-HK"),  enUS(title: "English", countryCode: "en-US");  final String title;  final String countryCode;  const Language({required this.title, required this.countryCode});}

    这里关于GetX的binding用法不会的可以参考Flutter GetX使用—简洁的魅力！这个博主开发的GetX插件，生成模版代码提高研发效率，建议看看用起来。

    持久化就不赘述了，参考源码

    源码

    下一篇 多语言方案二：GetX 版