Flutter国际化插件get_translations_generator的使用

Flutter国际化插件get_translations_generator的使用

安装CLI

首先，你需要全局安装get_translations_generator插件。打开终端并运行以下命令：

dart pub global activate get_translations_generator

运行CLI

安装完成后，你可以通过运行以下命令来生成翻译文件。假设你的CSV文件名为input.csv，输出的Dart文件为output.dart。

dart pub global run get_translations_generator input.csv output.dart

CSV文件示例

以下是一个CSV文件示例，用于生成翻译文件。这个文件包含了不同语言的翻译内容。

th_TH,greetings,สวัสดี
en_US,greetings,hello
th_TH,search,ค้นหา
en_US,search,search

生成的翻译文件示例

运行上述命令后，将会生成一个Dart文件output.dart。这个文件定义了翻译内容。

import 'package:get/get.dart'; 

class Translate extends Translations {
  [@override](/user/override)
  Map<String, Map<String, String>> get keys => {
    'th_TH': {
      'greetings': 'สวัสดี',
      'search': 'ค้นหา',
      'weather': 'สภาพอากาศ',
    },
    'en_US': {
      'greetings': 'hello',
      'search': 'search',
      'weather': 'weather',
    },
  };
}

class TranslateKeys {
    static const String greetings = 'greetings';
    static const String search = 'search';
    static const String weather = 'weather';
}

示例用法

1. 创建应用入口

首先，创建一个应用入口文件，例如main.dart。

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

// 导入翻译文件
import './output.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Example App',
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', 'US'), // 英语
        Locale('th', 'TH'), // 泰语
      ],
      locale: const Locale('en', 'US'), // 默认语言
      translations: Translate(), // 使用翻译类
      home: Example(),
    );
  }
}

2. 创建示例页面

接下来，创建一个示例页面Example，在页面中使用翻译键。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('示例'),
      ),
      body: Center(
        child: Text(TranslateKeys.greetings.tr), // 使用翻译键
      ),
    );
  }
}

更多关于Flutter国际化插件get_translations_generator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国际化插件get_translations_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


get_translations_generator 是一个用于 Flutter 国际化的代码生成插件，它与 get 状态管理库配合使用，可以自动生成用于多语言支持的代码。以下是如何使用 get_translations_generator 插件的详细步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 get 和 get_translations_generator 的依赖：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5

dev_dependencies:
  build_runner: ^2.1.11
  get_translations_generator: ^1.0.0

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

2. 创建翻译文件

在 lib 目录下创建一个 translations 文件夹，并在其中创建一个 translations.dart 文件。这个文件将包含所有的翻译字符串。

例如，lib/translations/translations.dart：

import 'package:get/get.dart';

class AppTranslations extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'en_US': {
          'title': 'Hello World',
          'subtitle': 'Welcome to Flutter',
        },
        'es_ES': {
          'title': 'Hola Mundo',
          'subtitle': 'Bienvenido a Flutter',
        },
      };
}

3. 生成代码

在项目根目录下运行以下命令来生成代码：

flutter pub run build_runner build

这将会生成一个名为 app_translations.g.dart 的文件，其中包含了所有翻译字符串的常量。

4. 使用生成的代码

你可以在你的 Flutter 应用中使用生成的代码来获取翻译字符串。首先，确保在 MaterialApp 或 GetMaterialApp 中设置 translations 和 locale。

例如，在 lib/main.dart 中：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      translations: AppTranslations(),
      locale: Locale('en', 'US'), // 设置默认语言
      fallbackLocale: Locale('en', 'US'), // 设置回退语言
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('title'.tr),
      ),
      body: Center(
        child: Text('subtitle'.tr),
      ),
    );
  }
}

5. 切换语言

你可以使用 Get.updateLocale() 方法来动态切换语言。例如：

Get.updateLocale(Locale('es', 'ES'));

6. 处理更多的语言

如果你需要支持更多的语言，只需在 AppTranslations 类中添加更多的语言映射即可。

例如，添加法语支持：

class AppTranslations extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'en_US': {
          'title': 'Hello World',
          'subtitle': 'Welcome to Flutter',
        },
        'es_ES': {
          'title': 'Hola Mundo',
          'subtitle': 'Bienvenido a Flutter',
        },
        'fr_FR': {
          'title': 'Bonjour le Monde',
          'subtitle': 'Bienvenue à Flutter',
        },
      };
}

然后重新运行 flutter pub run build_runner build 来生成新的代码。

7. 处理动态翻译

如果你需要在运行时动态加载翻译字符串，可以使用 Get 的 translations 功能来实现。

例如，从远程服务器加载翻译字符串：

void loadTranslations() async {
  final response = await http.get('https://example.com/translations.json');
  final translations = json.decode(response.body);
  Get.appendTranslations(translations);
}
回到顶部