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

发布于 1周前 作者 phonegap100 最后一次编辑是 5天前 来自 分享

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

回到顶部