Flutter多语言支持插件getx_multilanguage_helper的使用

Flutter多语言支持插件getx_multilanguage_helper的使用

此Flutter插件通过GetX状态管理库提供了一种方便的方式来管理Flutter应用程序中的多语言支持。它包括控制器、翻译和配置类,以简化多语言功能的实现。

Buy Me A Coffee ☕️

Buy Me A Coffee

安装

在你的pubspec.yaml文件中添加以下依赖:

dependencies:
  getx_multilanguage_helper: ^version_number

使用

添加语言JSON文件

将特定语言的JSON文件放在指定的翻译路径(例如assets/languages/)。例如,为英语和土耳其语翻译分别创建en.jsontr.json文件。

en.json:

{
  "app_title": "我的应用",
  "welcome_message": "欢迎来到我的应用!",
  // 添加更多英文翻译的键值对...
}

初始化GetxMultilanguageHelperController

在你的main.dart文件中,使用所需的配置初始化GetxMultilanguageHelperController。你可以指定翻译路径、支持的语言、默认区域和备用区域。

void main() async {
  await Get.putAsync(
    () async => await GetxMultilanguageHelperController().init(
      config: GetxMultilanguageHelperConfiguration(
        translationPath: 'assets/languages/',
        languages: [
          LanguageModel(title: 'en'.tr, localeKey: 'en_EN'),
          LanguageModel(title: 'tr'.tr, localeKey: 'tr_TR'),
          LanguageModel(title: 'de'.tr, localeKey: 'de_DE'),
          // 添加更多语言...
        ],
        defaultLocale: const Locale('en', 'EN'),
        fallbackLocale: const Locale('de', 'DE'),
      ),
    ),
  );
  runApp(const Main());
}

配置GetMaterialApp

在你的主小部件中,使用GetxMultilanguageHelperTranslation来配置GetMaterialApp,指定默认区域和备用区域。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      translations: GetxMultilanguageHelperTranslation(),
      locale: GetxMultilanguageHelperTranslation.defaultLocale,
      fallbackLocale: GetxMultilanguageHelperTranslation.fallbackLocale,
      // 添加其他配置...
    );
  }
}

示例代码

example/example.dart

import 'package:flutter/widgets.dart';
import 'package:getx_multilanguage_helper/getx_multilanguage_helper.dart';

void main() async {
  // 使用配置初始化GetxMultilanguageHelperController。
  await Get.putAsync(
    () async => await GetxMultilanguageHelperController().init(
      config: GetxMultilanguageHelperConfiguration(
        translationPath: 'assets/languages/',
        languages: [
          LanguageModel(title: 'en'.tr, localeKey: 'en_EN'),
          LanguageModel(title: 'tr'.tr, localeKey: 'tr_TR'),
          LanguageModel(title: 'de'.tr, localeKey: 'de_DE'),
          // 添加更多语言...
        ],
        defaultLocale: const Locale('en', 'EN'),
        fallbackLocale: const Locale('de', 'DE'),
      ),
    ),
  );

  // 运行带有Main小部件的应用程序。
  runApp(const Main());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用多语言支持配置GetMaterialApp。
    return GetMaterialApp(
      translations: GetxMultilanguageHelperTranslation(),
      locale: GetxMultilanguageHelperTranslation.defaultLocale,
      fallbackLocale: GetxMultilanguageHelperTranslation.fallbackLocale,
    );
  }
}

更多关于Flutter多语言支持插件getx_multilanguage_helper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多语言支持插件getx_multilanguage_helper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用getx_multilanguage_helper插件来实现多语言支持的示例代码。

首先,确保你已经在pubspec.yaml文件中添加了getx_multilanguage_helperget依赖:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.1  # 请检查最新版本
  getx_multilanguage_helper: ^1.0.0  # 请检查最新版本

然后运行flutter pub get来安装这些依赖。

接下来,我们配置getx_multilanguage_helper

1. 创建语言文件

assets文件夹下创建一个languages文件夹,然后在其中创建两个JSON文件,比如en.jsonzh.json,分别表示英文和中文翻译。

assets/languages/en.json:

{
  "welcome": "Welcome",
  "goodbye": "Goodbye"
}

assets/languages/zh.json:

{
  "welcome": "欢迎",
  "goodbye": "再见"
}

2. 更新pubspec.yaml

pubspec.yaml中,添加这些JSON文件到assets部分:

flutter:
  assets:
    - assets/languages/en.json
    - assets/languages/zh.json

3. 配置GetMaterialAppGetX

在你的主文件中(通常是main.dart),配置GetMaterialAppGetX服务:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Multi-language Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => HomePage()),
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        // 添加GetX Localizations Delegate
        GetMaterialApp.defaultLocalizationsDelegate,
        // 添加Multilanguage Delegate
        Multilanguage.delegate,
      ],
      supportedLocales: [
        Locale('en', ''),
        Locale('zh', ''),
      ],
      locale: Get.find<Multilanguage>().currentLocale,
    );
  }
}

4. 初始化Multilanguage控制器

创建一个控制器文件(比如controllers/multilanguage_controller.dart)来初始化Multilanguage控制器:

import 'package:get/get.dart';
import 'package:getx_multilanguage_helper/getx_multilanguage_helper.dart';

class MultilanguageController extends GetxController {
  final Multilanguage multilanguage = Multilanguage();

  @override
  void onInit() {
    super.onInit();
    // 加载语言文件
    multilanguage.load(
      'en',
      'assets/languages/en.json',
    );
    multilanguage.load(
      'zh',
      'assets/languages/zh.json',
    );
    // 设置默认语言
    multilanguage.setLocale(Locale('en'));
    update();
  }
}

5. 使用翻译文本

在你的页面(比如home_page.dart)中使用翻译文本:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_multilanguage_helper/getx_multilanguage_helper.dart';
import 'controllers/multilanguage_controller.dart';

class HomePage extends StatelessWidget {
  final MultilanguageController controller = Get.put(MultilanguageController());

  @override
  Widget build(BuildContext context) {
    final Multilanguage multilanguage = Get.find<Multilanguage>();
    return Scaffold(
      appBar: AppBar(
        title: Text(multilanguage.tr('welcome')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(multilanguage.tr('welcome')),
            ElevatedButton(
              onPressed: () {
                multilanguage.setLocale(Locale('zh'));
                update(); // 强制刷新UI
              },
              child: Text('切换到中文'),
            ),
            ElevatedButton(
              onPressed: () {
                multilanguage.setLocale(Locale('en'));
                update(); // 强制刷新UI
              },
              child: Text('切换到英文'),
            ),
            Text(multilanguage.tr('goodbye')),
          ],
        ),
      ),
    );
  }
}

6. 启动应用

确保在main.dart中正确实例化了MultilanguageController,然后运行你的应用。你现在应该能够在应用中切换语言并看到相应的翻译。

注意:update()方法在GetX中不是必要的,因为GetX会自动监听控制器的变化。但在这个例子中,为了确保UI立即刷新,我们手动调用了它。在实际应用中,你可以依赖GetX的自动监听机制。

以上代码展示了如何使用getx_multilanguage_helper插件在Flutter中实现多语言支持。你可以根据需要进行扩展和修改。

回到顶部