Flutter插件Get（7）：实现语言的国际化

一、前言

除了 Flutter Intl 的方式实现国际化（参考我以前的博客：Flutter进阶（2）：国际化开发 - fengMisaka - 博客园），还可以使用 GetX 实现国际化（推荐）。

先看下效果图：

二、GetX 实现国际化（推荐）

新建一个 Flutter 工程，使用 GetX 实现国际化的具体步骤如下：

2.1 安装Getx

在pubspec.yaml文件中配置 Get：

dependencies:
	get: ^4.6.5 

2.2 创建国际化的文件

Flutter 要国际化的字符串以键值对的方式保存在字典中。我们要自定义自己的国际化字符串，先创建一个自定义类文件，这里命名为Translation.dart：

import 'package:get/get.dart';

// （2）自定义自己的国际化字符串 
class Translation extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
    // 1-配置中文简体
    'zh_CN': {
      '中国': '中国',
    },

    // 2-配置中文繁体
    'zh_HK': {
      '中国': '中國',
    },
    
    // 3-配置英文
    'en_US': {
      '中国': 'China',
    }
  };
}

2.3 使用国际化字符串

使用字符串的时候非常简单，在字符串后面添加.tr后缀即可。

Text(
  '中国'.tr, // （3）在字符串后面添加.tr后缀即可
),

2.4 配置GetMaterialApp

在pubspec.yaml文件中配置 Get：

return GetMaterialApp(
	// ...
  
  // （4）配置GetMaterialApp
  translations: Translation(), // 你的翻译
  locale: const Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
  fallbackLocale: const Locale('en', 'US'), // 添加一个回调语言选项，以备上面指定的语言翻译不存在
  
	// ...
);

2.5 更改语言

使用字符串的时候非常简单，在字符串后面添加.tr后缀即可。

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

三、完整示例代码

main.dart：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'Translation.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,

      // （4）配置GetMaterialApp
      translations: Translation(), // 你的翻译类
      locale: const Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
      fallbackLocale: const Locale('en', 'US'), // 添加一个回调语言选项，以备上面指定的语言翻译不存在

      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '中国'.tr, // （3）在字符串后面添加.tr后缀即可
              style: const TextStyle(
                  color: Colors.red, fontSize: 50, fontWeight: FontWeight.w700),
            ),
            changeButton(const Locale('zh', 'CN'), '简体'),
            changeButton(const Locale('zh', 'HK'), '繁体'),
            changeButton(const Locale('en', 'US'), '英文'),
          ],
        ),
      ),
    );
  }

  Widget changeButton(Locale newLocale, String text) {
    return ElevatedButton(
      onPressed: () {
        // （5）更改语言
        Get.updateLocale(newLocale);
      },
      child: Text(text),
    );
  }
}