Flutter GetX 自定义语言包 国际化配置
Flutter Getx 对应视频教程访问:https://www.itying.com/goods-1176.html
Flutter GetX 自定义语言包 国际化配置相比元素Flutter更简单
Flutter GetX 自定义语言包需要在我们使用系统自带MaterialApp
来实现国际化配置,需要进行很多配置,而且还需要手动去依赖第三方组件,而使用GetX
来实现国际化配置,你只需要一行代码即可实现切换,接下来我们看一下具体实现。
一、Flutter GetX 自定义语言包第一步: 定义一个语言包
import 'package:get/get.dart';
class Messages extends Translations {
@override
Map<String, Map<String, String>> get keys => {
'zh_CN': {
'hello': '你好 世界',
},
'de_DE': {
'hello': 'Hallo Welt',
}
};
}
二、Flutter GetX 自定义语言包第二步 应用程序入口配置
- translations: 国际化配置文件
- locale: 设置默认语言,不设置的话为系统当前语言
- **fallbackLocale:**添加一个回调语言选项,以备上面指定的语言翻译不存在
return GetMaterialApp(
translations: Messages(), // 你的翻译
locale:const Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
fallbackLocale:const Locale('en', 'US'), // 添加一个回调语言选项,以备上面指定的语言翻译不存在
);
三、Flutter GetX 自定义语言包第三步 调用语言包
只要将.tr
追加到指定的键上,就会使用Get.locale
和Get.fallbackLocale
的当前值进行翻译。
Text('hello'.tr);
四、Flutter GetX 自定义语言包第四步 改变语言
调用Get.updateLocale(locale)
来更新语言环境。然后翻译会自动使用新的locale。
更新后所有页面生效
var locale = Locale('en', 'US');
Get.updateLocale(locale);
五、Flutter GetX 自定义语言包 完整代码
import 'package:get/get.dart';
class Messages extends Translations {
@override
Map<String, Map<String, String>> get keys => {
'zh_CN': {
'hello': '你好 世界',
},
'de_DE': {
'hello': 'Hallo Welt',
}
};
}
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import './language/message.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
translations: Messages(), // 你的翻译
locale: const Locale('zh', 'CN'), //设置默认语言
fallbackLocale: const Locale('en', 'US'), // 添加一个回调语言选项,以备上面指定的语言翻译不存在
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('title'.tr),
const SizedBox(),
Text('hello'.tr),
ElevatedButton(
onPressed: () {
var locale = const Locale('zh', 'CN');
Get.updateLocale(locale);
},
child: const Text("切换到中文")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
var locale = const Locale('en', 'US');
Get.updateLocale(locale);
},
child: const Text("切换到英文")),
],
),
),
);
}
}