Flutter GetX 自定义语言包 国际化配置

在我们使用系统自带MaterialApp 来实现国际化配置,需要进行很多配置,而且还需要手动去依赖第三方组件,而使用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',
    }
  };
}

应用程序入口配置

  • translations: 国际化配置文件
  • locale: 设置默认语言,不设置的话为系统当前语言
  • fallbackLocale:添加一个回调语言选项,以备上面指定的语言翻译不存在
return GetMaterialApp(
  translations: Messages(), // 你的翻译
  locale:const Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
  fallbackLocale:const Locale('en', 'US'), // 添加一个回调语言选项,以备上面指定的语言翻译不存在
);

调用语言包

只要将.tr追加到指定的键上,就会使用Get.localeGet.fallbackLocale 的当前值进行翻译。

Text('title'.tr);

改变语言

调用Get.updateLocale(locale) 来更新语言环境。然后翻译会自动使用新的locale。

更新后所有页面生效

var locale = Locale('en', 'US');
Get.updateLocale(locale);

完整代码

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("切换到英文")),
          ],
        ),
      ),
    );
  }
}

results matching ""

    No results matching ""