【flutter】使用getx完成国际化配置

前言

Flutter 项目需要支持国际化，本次采用getx自带的国际化，简单快捷又方便。在我们使用系统自带MaterialApp来实现国际化配置，需要进行很多配置，而且还需要手动去依赖第三方组件，而使用GetX来实现国际化配置，你只需要一行代码即可实现切换，接下来我们看一下具体实现吧。

1、引入插件

get: ^4.6.5

2、在lib新建一个internationalization包，里面包含intl_en_us.dart、intl_zh_cn.dart和message.dart等文件；
intl_en_us.dart

final Map<String, String> intlEnUs = {
  "title": "Home",
  "setting_language": "Set Language",
  "english": "English",
  "chinese": "Chinese"
};

intl_zh_cn.dart

final Map<String, String> intlZhCn = {
  "title": "首页",
  "setting_language": "设置语言",
  "english": "英文",
  "chinese": "中文"
};

message.dart

import 'package:get/get.dart';

import 'intl_en_us.dart';
import 'intl_zh_cn.dart';

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'zh_cn': intlZhCn,
        'en_us': intlEnUs,
      };
}

3、传递参数给GetMaterialApp来定义语言和翻译

return GetMaterialApp(
    translations: Messages(), // 你的翻译
    locale: Locale('zh', 'CN'), // 默认指定的语言翻译
    fallbackLocale: Locale('en', 'US'), // 添加一个回调语言选项，以备上面指定的语言翻译不存在
);

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

5、示例代码

import 'package:flutter/material.dart';
import 'package:flutter_language_get/internationalization/message.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @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: MyHomePage(title: "title".tr),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _incrementCounter() {
    showModalBottomSheet(
        context: context,
        builder: (_) => Container(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                    title: Text("chinese".tr),
                    onTap: () async {
                      var locale = Locale('zh', 'CN');
                      await Get.updateLocale(locale);
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    title: Text("english".tr),
                    onTap: () async {
                      var locale = Locale('en', 'US');
                      await Get.updateLocale(locale);
                      Navigator.pop(context);
                    },
                  ),
                ],
              ),
            ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '当前的语言为: ${Get.locale}',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'setting_language'.tr,
        child: const Icon(Icons.add),
      ),
    );
  }
}

6、结果截图