Flutter翻译弹窗插件flutter_translation_sheet的使用

flutter_translation_sheet 是一个强大的工具，用于管理Flutter应用中的多语言支持。它通过Google Sheets进行自动翻译和同步，并生成相应的代码文件。以下是如何使用该插件的详细指南。

安装步骤

1. 添加依赖

在你的 pubspec.yaml 文件中添加 flutter_translation_sheet 作为开发依赖：

dev_dependencies:
    flutter_translation_sheet: ^1.0.31

或者全局安装：

flutter pub global activate flutter_translation_sheet

如果你使用的是开发依赖，请在项目根目录运行：

dart run flutter_translation_sheet:main

默认情况下，运行时会执行 run 命令。例如，如果你想运行 fetch 命令：

dart run flutter_translation_sheet:main fetch

2. 创建配置文件

在项目根目录运行 fts 来创建模板配置文件 trconfig.yaml：

fts

配置文件示例

trconfig.yaml 示例：

fts:
  entry_file: strings/app.yaml
  param_output_pattern: "{{*}}"
  dart:
    output_dir: lib/i18n
    keys_id: Strings
    translations_id: Translations
    use_maps: false
    output_fts_utils: true
    
  locales:
    - en
    - es
  gsheets:
    use_iterative_cache: false
    credentials_path: "PATH_TO_YOUR_CREDENTIALS"
    spreadsheet_id: "SPREADSHEET_ID"
    worksheet: Sheet1

Google 凭证配置

有两种方式可以配置凭证：

1. 使用路径：

gsheets:
  credentials_path: c:/my_project/credentials.json or ./credentials.json

注意：Windows用户请使用双反斜杠或正斜杠。

1. 直接嵌入凭证内容：

gsheets:
  credentials: {
    "type": "service_account",
    "project_id": "project-id",
    "private_key_id": "",
    "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCB-----END PRIVATE KEY-----\n",
    "client_email": "gsheets@project.iam.gserviceaccount.com",
    "client_id": "123456",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/gsheets%40evolution-cp-calculator.iam.gserviceaccount.com"
  }

使用命令

运行命令

在终端中进入你的Flutter项目目录并运行：

fts run

第一次运行会创建一个模板，并要求你提供Google凭证json文件。

监听文件变化

你可以让 fts 监听文件变化：

fts run --watch

退出监听器使用 q 然后按 Enter。

提取字符串

提取Dart代码中的字符串：

fts extract --path path/to/dart/files --output path/to/output

下载最新数据

从Google Sheets下载最新数据并生成文件：

fts fetch

示例Demo

以下是一个简单的Flutter应用示例，展示如何使用生成的翻译文件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      localizationsDelegates: const [Fts.delegate],
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          LangPickerMaterial(
            onSelected: (locale) {
              Fts.locale = locale;
            },
            selected: Fts.locale,
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello world'.tr()),
            Text('Welcome back {{user}}, today is {{date}}.'.tr(namedArgs: {'user': 'John', 'date': '2023-10-10'})),
          ],
        ),
      ),
    );
  }
}

以上示例展示了如何集成 flutter_translation_sheet 并使用生成的翻译文件来实现多语言支持。希望这个指南对你有所帮助！如果有任何问题，请参考官方文档或社区资源。