Flutter语言翻译插件codebase_translate的使用

简介

codebase_translate 是一个功能强大的 Flutter 定位/国际化库，支持多语言切换。它允许你为不同的语言定义翻译，并轻松在它们之间切换。

特性

• 非常易于使用
• 支持移动端、Web 和桌面端
• 支持复数和双数
• 支持 languageCode（如 en）和 languageCode_countryCode（如 en_US）格式
• 自动保存和恢复所选的语言环境
• 完全支持右到左语言
• 提供回退语言环境的支持
• 支持内联或嵌套 JSON

示例

效果图

使用步骤

1. 添加依赖

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

dependencies:
  codebase_translate: ^版本号

然后运行 flutter pub get。

2. 初始化并配置

在 main.dart 中初始化并配置 LocalizationDelegate：

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

void main() async {
  // 创建 LocalizationDelegate
  var delegate = await LocalizationDelegate.create(
      fallbackLocale: 'en_US', // 设置默认语言
      supportedLocales: ['en_US', 'es', 'fa', 'ar', 'ru']); // 支持的语言列表

  // 启动应用
  runApp(LocalizedApp(delegate, MyApp()));
}

3. 配置 Material App

在 MyApp 中配置 MaterialApp，并将 LocalizationDelegate 添加到 localizationsDelegates 中：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var localizationDelegate = LocalizedApp.of(context).delegate;

    return LocalizationProvider(
      state: LocalizationProvider.of(context).state,
      child: MaterialApp(
        title: 'Flutter Translate Demo',
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          localizationDelegate // 添加本地化代理
        ],
        supportedLocales: localizationDelegate.supportedLocales, // 支持的语言列表
        locale: localizationDelegate.currentLocale, // 当前语言环境
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage(),
      ),
    );
  }
}

4. 创建 Home 页面

在 MyHomePage 中实现语言切换和多语言支持：

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

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

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

  void _decrementCounter() => setState(() => _counter--);

  void _incrementCounter() => setState(() => _counter++);

  [@override](/user/override)
  Widget build(BuildContext context) {
    var localizationDelegate = LocalizedApp.of(context).delegate;

    return Scaffold(
      appBar: AppBar(
        title: Text(translate('app_bar.title')), // 使用翻译函数
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 显示当前选择的语言
            Text(translate('language.selected_message', args: {
              'language': translate(
                  'language.name.${localizationDelegate.currentLocale.languageCode}')
            })),
            // 按钮用于切换语言
            Padding(
                padding: EdgeInsets.only(top: 25, bottom: 160),
                child: CupertinoButton.filled(
                  child: Text(translate('button.change_language')),
                  padding: const EdgeInsets.symmetric(
                      vertical: 10.0, horizontal: 36.0),
                  onPressed: () => _onActionSheetPress(context),
                )),
            // 复数支持示例
            Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Text(translatePlural('plural.demo', _counter))),
            // 增减计数器按钮
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.remove_circle),
                  iconSize: 48,
                  onPressed: _counter > 0
                      ? () => setState(() => _decrementCounter())
                      : null,
                ),
                IconButton(
                  icon: Icon(Icons.add_circle),
                  color: Colors.blue,
                  iconSize: 48,
                  onPressed: () => setState(() => _incrementCounter()),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  // 显示语言选择弹窗
  void showDemoActionSheet(
      {required BuildContext context, required Widget child}) {
    showCupertinoModalPopup<String>(
        context: context,
        builder: (BuildContext context) => child).then((String? value) {
      if (value != null) changeLocale(context, value);
    });
  }

  // 处理语言切换按钮点击事件
  void _onActionSheetPress(BuildContext context) {
    showDemoActionSheet(
      context: context,
      child: CupertinoActionSheet(
        title: Text(translate('language.selection.title')),
        message: Text(translate('language.selection.message')),
        actions: <Widget>[
          CupertinoActionSheetAction(
            child: Text(translate('language.name.en')),
            onPressed: () => Navigator.pop(context, 'en_US'),
          ),
          CupertinoActionSheetAction(
            child: Text(translate('language.name.es')),
            onPressed: () => Navigator.pop(context, 'es'),
          ),
          CupertinoActionSheetAction(
            child: Text(translate('language.name.ar')),
            onPressed: () => Navigator.pop(context, 'ar'),
          ),
          CupertinoActionSheetAction(
            child: Text(translate('language.name.ru')),
            onPressed: () => Navigator.pop(context, 'ru'),
          ),
        ],
        cancelButton: CupertinoActionSheetAction(
          child: Text(translate('button.cancel')),
          isDefaultAction: true,
          onPressed: () => Navigator.pop(context, null),
        ),
      ),
    );
  }
}