Flutter本地化翻译插件translate_local_package的使用

Features

Translate all text by local

Getting Started

只需准备字符串和语言代码即可开始使用。

Usage

以下是一个完整的示例，展示如何在Flutter项目中使用translate_local_package插件进行本地化翻译。

步骤 1: 添加依赖

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

dependencies:
  translate_local_package: ^1.0.0

运行以下命令以安装依赖：

flutter pub get

步骤 2: 创建本地化文件

创建一个包含不同语言翻译的JSON文件。例如，创建en.json（英语）和zh.json（中文）文件。

en.json (English)

{
  "hello_world": "Hello World",
  "greeting": "Welcome to Flutter"
}

zh.json (Chinese)

{
  "hello_world": "你好世界",
  "greeting": "欢迎使用Flutter"
}

将这些文件放在assets/i18n/目录下。

步骤 3: 配置 pubspec.yaml

确保在pubspec.yaml中添加assets路径：

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

再次运行以下命令以应用更改：

flutter pub get

步骤 4: 初始化本地化

创建一个LocalizationsDelegate类来加载不同的语言文件。

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

class AppLocalizations {
  final Locale locale;

  AppLocalizations(this.locale);

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  }

  // Load translation file
  static Future<AppLocalizations> load(Locale locale) async {
    String jsonString = await TranslateLocalPackage.load(
        'assets/i18n/${locale.languageCode}.json');
    return AppLocalizations(locale);
  }

  // Create a delegate
  static const LocalizationsDelegate<AppLocalizations> delegate =
      _AppLocalizationsDelegate();

  // Delegate implementation
}

class _AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  [@override](/user/override)
  bool isSupported(Locale locale) {
    return ['en', 'zh'].contains(locale.languageCode);
  }

  [@override](/user/override)
  Future<AppLocalizations> load(Locale locale) async {
    return AppLocalizations(locale);
  }

  [@override](/user/override)
  bool shouldReload(covariant LocalizationsDelegate<AppLocalizations> old) {
    return false;
  }
}

步骤 5: 使用本地化文本

在应用程序中使用本地化文本。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Localization Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      supportedLocales: [
        Locale('en', ''), // English
        Locale('zh', ''), // Chinese
      ],
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Locale _locale = Locale('en', '');

  void _changeLanguage(Locale locale) {
    setState(() {
      _locale = locale;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.translate('greeting')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(AppLocalizations.of(context)!.translate('hello_world')),
            ElevatedButton(
              onPressed: () {
                _changeLanguage(Locale('en', ''));
              },
              child: Text('English'),
            ),
            ElevatedButton(
              onPressed: () {
                _changeLanguage(Locale('zh', ''));
              },
              child: Text('中文'),
            ),
          ],
        ),
      ),
    );
  }
}