Flutter国际化插件flutter_i18n_plus的使用

Flutter国际化插件flutter_i18n_plus的使用

flutter_i18n_plus 是一个用于Flutter应用的高级国际化包。它提供了一个简单且灵活的方式来管理翻译、日期格式化、货币格式化以及复数形式。

功能特性

• 简单易用的翻译管理，支持嵌套键
• 支持复数形式
• 日期格式化
• 货币格式化
• 动态语言切换
• 支持翻译中的参数

安装

在项目的 pubspec.yaml 文件中添加 flutter_i18n_plus 依赖：

dependencies:
  flutter_i18n_plus: ^1.0.0

然后运行以下命令来获取依赖项：

flutter pub get

配置

1. 在项目中创建一个名为 assets/translations/ 的文件夹。
2. 将翻译文件（例如 en.json 和 fr.json）添加到该文件夹中。
3. 更新 pubspec.yaml 文件以包含这些资源：

flutter:
  assets:
    - assets/translations/

使用

初始化

将 MaterialApp 或 CupertinoApp 包裹在 I18nPlusProvider 中：

void main() {
  runApp(
    I18nPlusProvider(
      supportedLocales: [const Locale('en', 'US'), const Locale('fr', 'FR')],
      defaultLocale: const Locale('en', 'US'),
      translationsPath: 'assets/translations',
      child: MyApp(),
    ),
  );
}

简单翻译

使用 t 扩展方法从 BuildContext 访问翻译：

Text(context.t('greeting'))

带参数的翻译

Text(context.t('welcome', args: {'name': 'John'}))

复数形式

使用 p 扩展方法处理复数形式：

Text(context.p('items', itemCount, args: {'count': itemCount.toString()}))

日期格式化

Text(I18nPlus().formatDate(DateTime.now()))

货币格式化

Text(I18nPlus().formatCurrency(1234.56))

语言切换

使用按钮动态更改语言：

ElevatedButton(
  onPressed: () {
    final newLocale = I18nPlus().currentLocale.languageCode == 'en'
        ? const Locale('fr', 'FR')
        : const Locale('en', 'US');
    I18nPlusProvider.of(context).setLocale(newLocale);
  },
  child: Text('Changer de langue'),
)

示例翻译文件

en.json

{
  "greeting": "Hello",
  "welcome": "Welcome, {name}!",
  "items": {
    "one": "{count} item",
    "other": "{count} items"
  },
  "app.title": "I18nPlus Demo",
  "increment": "Increment",
  "current_date": "Current Date: {date}",
  "account_balance": "Account Balance: {balance}"
}

示例代码

以下是完整的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return I18nPlusProvider(
      supportedLocales: const [Locale('en', 'US'), Locale('fr', 'FR')],
      defaultLocale: const Locale('en', 'US'),
      translationsPath: 'assets/translations',
      child: MaterialApp(
        title: 'I18nPlus Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(context.t('app.title')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(context.t('greeting', args: {'name': 'Flutter'})),
            const SizedBox(height: 20),
            Text(
              context
                  .p('counter', _counter, args: {'count': _counter.toString()}),
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 20),
            Text(context.t('current_date',
                args: {'date': I18nPlus().formatDate(DateTime.now())})),
            const SizedBox(height: 20),
            Text(context.t('account_balance',
                args: {'balance': I18nPlus().formatCurrency(1234.56)})),
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: () {
                final newLocale = I18nPlus().currentLocale.languageCode == 'en'
                    ? const Locale('fr', 'FR')
                    : const Locale('en', 'US');
                I18nPlusProvider.of(context).setLocale(newLocale);
                setState(() {}); // 强制重建小部件
              },
              child: Text(
                  '${context.t('change_language')} (${I18nPlus().currentLocale.languageCode})'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: context.t('increment'),
        child: const Icon(Icons.add),
      ),
    );
  }
}