Flutter国际化插件very_easy_localization的使用

Flutter国际化插件very_easy_localization的使用

Very Easy Localization

Very Easy Localization 是一个命令行工具,用于从您的 Flutter 应用中提取字符串,并使用 Google 翻译创建超过100种语言的本地化。

安装

首先,通过以下命令安装 Very Easy Localization:

dart pub global activate very_easy_localization

基本使用

安装完成后,可以运行以下命令查看帮助信息:

dart pub global run very_easy_localization --help

基本选项

以下是可用的基本选项:

 -------------------------------------------------------------------
|                                                                   |
| -h, --help       Shows the help                                   |
| -v, --version    Prints the Very Easy Localization CLI Version    |
| run              Run the localization process                     |
|                                                                   |
 -------------------------------------------------------------------

生成

要生成本地化文件,运行以下命令:

dart pub global run very_easy_localization run

运行选项

以下是运行时的可用选项:

 --------------------------------------------------------------------------------
|                                                                                |
| -h, --help                    Shows the help                                   |
| -v, --version                 Prints the Very Easy Localization CLI Version    |
| -l, --languages               Pass the languages eg: en,ja,... [defaut: en,hi] |
| -i, --include-external-files  External Lib Files eg: ./assets/file.txt         |
| -o, --output-directory        Output Directory [default: ./ve_localization]    |
|                                                                                |
 --------------------------------------------------------------------------------

使用示例

下面是一个完整的示例,展示如何在 Flutter 应用中使用 Very Easy Localization 插件进行国际化。

1. 初始化项目

首先,确保你已经安装了 Flutter 和 Dart SDK。然后创建一个新的 Flutter 项目:

flutter create my_flutter_app
cd my_flutter_app

2. 添加依赖

pubspec.yaml 文件中添加 very_easy_localization 依赖:

dependencies:
  flutter:
    sdk: flutter
  very_easy_localization: ^1.0.0

然后运行以下命令以安装依赖:

flutter pub get

3. 生成本地化文件

使用 Very Easy Localization 工具生成本地化文件。假设你想生成英语(en)和日语(ja)的本地化文件:

dart pub global run very_easy_localization run -l en,ja

这将会在当前目录下创建 ./ve_localization 文件夹,并生成相应的 JSON 文件。

4. 配置应用

main.dart 文件中配置 Very Easy Localization:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return VELocalization(
      path: './ve_localization', // 本地化文件路径
      initialLocale: Locale('en'), // 初始语言
      supportedLocales: [
        Locale('en'),
        Locale('ja')
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

5. 使用本地化文本

在你的 Flutter 小部件中使用本地化文本:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(VeText('app_title')), // 使用本地化文本
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(VeText('welcome_message')), // 使用本地化文本
            TextButton(
              onPressed: () {
                // 切换语言
                VELocalization.of(context).setLocale(Locale('ja'));
              },
              child: Text(VeText('switch_language')),
            ),
          ],
        ),
      ),
    );
  }
}

6. 本地化文件

./ve_localization 文件夹中,你会看到类似如下的 JSON 文件:

{
  "en": {
    "app_title": "My Flutter App",
    "welcome_message": "Welcome to my app!",
    "switch_language": "Switch Language"
  },
  "ja": {
    "app_title": "私の Flutter アプリ",
    "welcome_message": "アプリへようこそ!",
    "switch_language": "言語を切り替える"
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用very_easy_localization插件来实现国际化的代码示例。这个示例将展示如何设置插件、定义翻译文件以及在实际应用中使用这些翻译。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加very_easy_localization及其依赖:

dependencies:
  flutter:
    sdk: flutter
  very_easy_localization: ^2.4.0  # 请检查最新版本号
  flutter_localizations:
    sdk: flutter

2. 创建翻译文件

在项目的assets目录下创建translations文件夹,并在其中创建不同语言的JSON文件。例如,创建en.jsonzh.json

assets/translations/en.json:

{
  "greeting": "Hello",
  "farewell": "Goodbye"
}

assets/translations/zh.json:

{
  "greeting": "你好",
  "farewell": "再见"
}

3. 配置pubspec.yaml中的assets

pubspec.yaml中,添加翻译文件到assets部分:

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

4. 初始化VeryEasyLocalization

main.dart文件中初始化VeryEasyLocalization

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

void main() {
  runApp(
    VeryEasyLocalization(
      supportedLocales: [Locale('en', ''), Locale('zh', '')],
      pathToJsonFolder: 'assets/translations',
      fallbackLocale: Locale('en', ''),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

5. 使用翻译

在你的应用中使用翻译,比如在MyHomePage中:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(tr('greeting')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(tr('greeting')),
            ElevatedButton(
              onPressed: () {
                // 切换语言示例
                context.setLocale(Locale('zh'));
              },
              child: Text(tr('farewell')),
            ),
          ],
        ),
      ),
    );
  }
}

6. 运行应用

现在,你可以运行你的Flutter应用,并看到初始的英语翻译。当你点击按钮时,应用将切换到中文翻译。

这个示例展示了如何使用very_easy_localization插件进行基本的国际化设置和使用。根据实际需求,你可能需要添加更多的翻译文件、处理更复杂的语言逻辑或者集成其他功能。

回到顶部