Flutter国际化插件tolgee的使用

Flutter国际化插件Tolgee的使用

Tolgee是一个多平台的Flutter SDK，用于Tolgee本地化平台。通过Tolgee，您可以轻松地为您的Flutter应用添加国际化支持。以下是关于如何使用Tolgee插件的完整示例demo。

1. 注册并创建项目

首先，您需要在Tolgee官网注册一个账号，并创建一个新的项目。这将为您提供一个API密钥和API URL，稍后在初始化SDK时会用到。

2. 初始化Tolgee SDK

在main.dart文件中初始化Tolgee SDK。如果您提供了apiKey和apiUrl，SDK将从Tolgee平台获取翻译内容。如果没有提供这些参数，SDK将默认以静态模式运行，从lib/tolgee/目录读取翻译文件。

import 'package:tolgee/tolgee.dart';

Future<void> main() async {
  // 初始化Tolgee。如果未提供apiKey和apiUrl，
  // 应用将以静态模式初始化。
  // 翻译内容将从`lib/tolgee/`目录读取。
  await Tolgee.init(
    apiKey: const String.fromEnvironment('TOLGEE_API_KEY'),
    apiUrl: const String.fromEnvironment('TOLGEE_API_URL'),
  );

  runApp(const MyApp());
}

3. 使用TranslationText和TranslationWidget显示翻译文本

Tolgee提供了两种方式来显示翻译文本：TranslationText和TranslationWidget。TranslationText是一个简单的文本小部件，而TranslationWidget则允许您使用自定义的构建器函数来动态生成翻译内容。

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Locale> supportedLocales = Tolgee.supportedLocales.toList();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: Tolgee.baseLocale.languageCode,
      localizationsDelegates: Tolgee.localizationDelegates,
      supportedLocales: Tolgee.supportedLocales,
      locale: supportedLocales.first,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: TranslationWidget(
            builder: (context, tr) => Text(
              tr('title'), // 显示标题的翻译
            ),
          ),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      for (var locale in supportedLocales)
                        OutlinedButton(
                          onPressed: () {
                            setState(() {
                              Tolgee.setCurrentLocale(locale); // 切换语言
                            });
                          },
                          child: Text(locale.languageCode), // 显示语言代码
                        ),
                    ].divided(width: 8), // 添加间距
                  ),
                ),
                const Spacer(),
                const Text('static text'), // 静态文本
                const Divider(),
                const TranslationText('title'), // 显示标题的翻译
                const Divider(),
                TranslationWidget(
                  builder: (context, tr) => Column(
                    children: [
                      Text(
                        tr('title'), // 显示标题的翻译
                      ),
                      Text(
                        tr('subtitle', {'name': 'John'}), // 显示带有参数的翻译
                      ),
                    ],
                  ),
                ),
                const Divider(),
                TranslationWidget(builder: (context, tr) {
                  return OutlinedButton(
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(
                          content: Text('Clicked!'), // 显示点击提示
                          duration: Duration(milliseconds: 1000),
                        ),
                      );
                    },
                    child: Text(
                      tr('button'), // 显示按钮的翻译
                    ),
                  );
                }),
                const Spacer(),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Tolgee.highlightTolgeeWidgets(), // 高亮Tolgee小部件
          tooltip: 'Toggle',
          child: const Icon(Icons.swap_horizontal_circle_outlined),
        ),
      ),
    );
  }
}

4. 运行应用

当您运行应用时，Tolgee会从Tolgee平台获取翻译内容并显示在应用中。您还可以使用Tolgee.highlightTolgeeWidgets()方法高亮显示使用Tolgee SDK的小部件，并直接从应用中添加或修改翻译内容。

5. 导出翻译文件

您可以通过Tolgee平台导出翻译文件，并将其添加到lib/tolgee/目录中。这样即使在离线状态下，应用也可以使用这些翻译文件。您需要在pubspec.yaml文件中添加以下配置：

flutter:
  assets:
    - lib/tolgee/

6. 静态模式

如果您希望以静态模式使用Tolgee SDK，可以在初始化时不提供apiKey和apiUrl：

import 'package:tolgee/tolgee.dart';

Future<void> main() async {
  // 以静态模式初始化Tolgee
  await Tolgee.init();

  runApp(const MyApp());
}