Flutter国际化翻译插件easy_translations的使用

Flutter国际化翻译插件easy_translations的使用

easy_translations 是一个轻量级的 Flutter 翻译包，用于实现应用程序的国际化。下面是如何在你的 Flutter 应用程序中使用 easy_translations 的详细步骤。

引入依赖

首先，在你的 pubspec.yaml 文件中添加 easy_translations 依赖：

dependencies:
  easy_translations: ^x.x.x

然后运行 flutter pub get 来安装依赖。

初始化

在你的应用程序入口点，使用 BlocProvider 初始化 LocalizationCubit。这里我们设置初始语言为意大利语（'it'），并提供英文（'en'）作为回退语言。

import 'package:flutter/material.dart';
import 'package:bloc_pattern/bloc_pattern.dart'; // 假设你使用了 bloc_pattern 包
import 'package:easy_translations/easy_translations.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => LocalizationCubit(
        translations: CustomTranslations(),
        initialLocale: Locale('it'), // 设置初始语言为意大利语
        fallbackLocale: Locale('en'), // 设置回退语言为英文
      ),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

使用翻译

在你的应用中，你可以通过 context.tr('key') 来获取翻译文本。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Tr.of(context).translate('app_title')), // 获取翻译后的标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              Tr.of(context).translate('hello_world'), // 获取翻译后的 "Hello World"
            ),
          ],
        ),
      ),
    );
  }
}

自定义翻译文件

为了支持多语言，你需要创建翻译文件。假设你有两个文件：en.json 和 it.json。

en.json

{
  "app_title": "My App",
  "hello_world": "Hello World"
}

it.json

{
  "app_title": "Il Mio App",
  "hello_world": "Ciao Mondo"
}

将这些文件放在项目的某个目录下，并确保它们被正确加载。

切换语言

如果你的应用允许用户切换语言，可以使用 LocalizationCubit 提供的方法来改变当前语言。

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

class LanguageSwitcher extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DropdownButton<Locale>(
      value: Tr.of(context).locale,
      items: [
        DropdownMenuItem(
          value: Locale('en'),
          child: Text('English'),
        ),
        DropdownMenuItem(
          value: Locale('it'),
          child: Text('Italian'),
        ),
      ],
      onChanged: (value) {
        Tr.of(context).setLocale(value); // 切换语言
      },
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用easy_translations插件进行国际化翻译的一个代码示例。这个示例将展示如何设置和使用easy_translations来加载和显示不同语言的文本。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加easy_translations依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_translations: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 准备翻译文件

在项目的assets目录下创建一个locales文件夹，并在其中为每种语言创建相应的JSON文件。例如，为英语和中文创建以下文件：

  • assets/locales/en.json
  • assets/locales/zh.json

en.json内容示例：

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

zh.json内容示例：

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

3. 配置pubspec.yaml中的assets

确保在pubspec.yaml中声明了这些JSON文件作为assets：

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

4. 初始化和使用EasyTranslations

在你的main.dart文件中，初始化EasyTranslations并使用它来加载和显示翻译文本。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return EasyTranslations(
      // 设置默认语言
      defaultLocale: Locale('en'),
      // 设置支持的语言
      supportedLocales: [Locale('en'), Locale('zh')],
      // 加载翻译文件
      assetBundle: (locale) {
        return {
          'en': 'assets/locales/en.json',
          'zh': 'assets/locales/zh.json',
        }[locale.languageCode] ?? 'assets/locales/en.json';
      },
      child: MaterialApp(
        title: 'Flutter Easy Translations Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Locale? currentLocale;

  void changeLanguage(Locale locale) {
    setState(() {
      currentLocale = locale;
      EasyTranslations.of(context).setLocale(locale);
    });
  }

  @override
  Widget build(BuildContext context) {
    final translations = EasyTranslations.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(translations.tr('greeting')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(translations.tr('greeting')),
            Text(translations.tr('farewell')),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => changeLanguage(Locale('en')),
                  child: Text('English'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: () => changeLanguage(Locale('zh')),
                  child: Text('中文'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

现在，你可以运行你的Flutter应用，并通过点击按钮来切换语言。应用将根据当前选定的语言显示相应的翻译文本。

这个示例展示了如何设置和使用easy_translations插件来进行基本的国际化翻译。你可以根据需要扩展这个示例，以支持更多的语言和更复杂的翻译需求。

回到顶部