【Flutter】多语言方案一：flutter_localizations 与 GetX 配合版

2024-04-19 12:04
文章标签 语言 方案 flutter 配合 getx localizations

本文主要是介绍【Flutter】多语言方案一：flutter_localizations 与 GetX 配合版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

介绍

多语言方案：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: flutter
intl: any
get: ^4.6.6flutter:
uses-material-design: true
generate: 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/arb
template-arb-file: app_zh.arb
output-localization-file: app_localizations.dart
output-class: AppLocalizations
use-deferred-loading: true
nullable-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});@overrideState<L10nApp> createState() => L10nAppState();
}class L10nAppState extends State<L10nApp> {// 供外部使用的_AppSetting实例，用于修改app的状态static AppSetting setting = AppSetting.instance;@overridevoid initState() {super.initState();//第一次进入app时，获取本地多语言的countryCodeif (widget._init) {setting.setLocale();widget._init = false;}// 更改语言setting.changeLocale = () {setState(() {});};}@overrideWidget 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<String> 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<String> 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<L10nMultiLanguageLogic>();@overrideWidget 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.divideTiles(//           context: context,//           tiles: Language.values//               .map((e) =>//                   GetBuilder<MultiLanguageLogic>(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<L10nMultiLanguageLogic>(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;@overridevoid onInit() {super.onInit();countryCode = CacheHelper.countryCode;}void changeLanguage(String code) {countryCode = code;LanguageUtils.updateLocale(code, isL10n: true);//切换Localeupdate();}
}

l10n_multi_language_binding.dart类

import 'package:get/get.dart';import 'l10n_multi_language_logic.dart';class L10nMultiLanguageBinding extends Bindings {@overridevoid 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 版

这篇关于【Flutter】多语言方案一：flutter_localizations 与 GetX 配合版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/917489。

相关文章

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

摘要 近日，万博智云推出了基于AWS的无代理跨云容灾解决方案，并与拉丁美洲，中东，亚洲的合作伙伴面向全球开展了联合发布。这一方案以AWS应用环境为基础，将HyperBDR平台的高效、灵活和成本效益优势与无代理功能相结合，为全球企业带来实现了更便捷、经济的数据保护。 一、全球联合发布 9月2日，万博智云CEO Michael Wong在线上平台发布AWS无代理跨云容灾解决方案的阐述视频，介绍了
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

介绍 R语言的扩展物种堆积图是一种数据可视化工具，它不仅展示了物种的堆积结果，还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异，为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl
阅读更多...
透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

引言 随着时间的发展，大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用，随着人们期望的不断增加，目标也发生了巨大的变化。在短短的几个月的时间里，人们对大模型的认识已经从对其zero-shot能力感到惊讶，转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构（例如Transformer）对海量的、多种多样的数据分布进行建模得到，它包含了大量的先验
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
如何选择SDR无线图传方案

如何选择SDR无线图传方案

在开源软件定义无线电（SDR）领域，有几个项目提供了无线图传的解决方案。以下是一些开源SDR无线图传方案： 1. **OpenHD**：这是一个远程高清数字图像传输的开源解决方案，它使用SDR技术来实现高清视频的无线传输。OpenHD项目提供了一个完整的工具链，包括发射器和接收器的硬件设计以及相应的软件。 2. **USRP（Universal Software Radio Periphera
阅读更多...
C语言 | Leetcode C语言题解之第393题UTF-8编码验证

C语言 | Leetcode C语言题解之第393题UTF-8编码验证

题目： 题解： static const int MASK1 = 1 << 7;static const int MASK2 = (1 << 7) + (1 << 6);bool isValid(int num) {return (num & MASK2) == MASK1;}int getBytes(int num) {if ((num & MASK1) == 0) {return
阅读更多...
MiniGPT-3D, 首个高效的3D点云大语言模型，仅需一张RTX3090显卡，训练一天时间，已开源

MiniGPT-3D, 首个高效的3D点云大语言模型，仅需一张RTX3090显卡，训练一天时间，已开源

项目主页：https://tangyuan96.github.io/minigpt_3d_project_page/ 代码：https://github.com/TangYuan96/MiniGPT-3D 论文：https://arxiv.org/pdf/2405.01413 MiniGPT-3D在多个任务上取得了SoTA，被ACM MM2024接收，只拥有47.8M的可训练参数，在一张RTX
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2