Flutter翻译功能插件flappy_translator的使用

flappy_translator 是一个工具，可以从CSV和Excel文件自动生成Flutter本地化资源。团队成员可以编辑CSV/Excel文件，并通过终端命令将后续的翻译导入到项目中。基本变量（字符串和整数）是支持的，但不计划支持性别或复数形式。如果需要这种功能，请考虑使用 arb_generator。

开始使用

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_localizations:
    sdk: flutter
    
dev_dependencies: 
  flappy_translator: ^最新版本号

定义设置

flappy_translator 的设置必须在项目的 pubspec.yaml 文件中定义。input_file_path 是唯一必需的参数。

flappy_translator:
  input_file_path: "test.csv"
  output_dir: "lib"
  file_name: "i18n"
  class_name: "I18n"
  delimiter: ","
  start_index: 1
  depend_on_context: true
  use_single_quotes: false
  replace_no_break_spaces: false
  expose_get_string: false
  expose_loca_strings: false
  expose_locale_maps: false
  generate_comments: false
  comment_languages: []

运行包

确保当前工作目录是项目根目录，然后运行以下命令：

flutter pub get
dart run flappy_translator

更新iOS Info.plist

对于iOS，ios/Runner/Info.plist 需要更新以包含应用程序支持的语言数组：

<key>CFBundleLocalizations</key>
<array>
  <string>fr</string>
  <string>en</string>
  <string>de</string>
</array>

更多信息请参阅 Internationalizing Flutter apps。

使用生成的i18n文件

包使用您的输入文件生成一个名为 file_name 的文件，位于您提供的 output_dir 中。以下示例使用默认的 class_name I18n，并且依赖于 BuildContext。

首先，将 I18nDelegate 添加到您的委托列表中：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'i18n.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        I18nDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: I18nDelegate.supportedLocals,
      home: const Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flappy_translator'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(I18n.of(context).plainText),
            Text(I18n.of(context).welcome(name: 'Dash')),
            Text(I18n.of(context).favoriteColor),
          ],
        ),
      ),
    );
  }
}

示例Demo

以下是一个完整的示例demo，展示如何使用 flappy_translator 插件进行多语言支持：

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'i18n.dart'; // 自动生成的文件

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        I18nDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: I18nDelegate.supportedLocals,
      home: const Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flappy_translator Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(I18n.of(context).plainText),
            Text(I18n.of(context).welcome(name: 'John')),
            Text(I18n.of(context).favoriteColor),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，展示了如何使用 flappy_translator 插件来支持多语言文本显示。通过编辑CSV或Excel文件并运行生成命令，您可以轻松地为应用添加新的语言支持。

希望这个教程能帮助您快速上手 flappy_translator 插件的使用！更多详细信息请参考 官方文档。