Flutter应用国际化文本处理教程

Flutter应用国际化文本处理教程

3 回复

Flutter国际化：使用LocalizationsDelegate加载不同语言的字符串文件。

更多关于Flutter应用国际化文本处理教程的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


  1. 定义多语言文件，如 zh.json 和 en.json
  2. 使用 Localizations 和 Delegate 加载对应语言
  3. 在 Widget 中使用 Text(Locales.string('key'))

在Flutter应用中实现国际化（i18n）可以帮助你的应用支持多种语言。以下是实现Flutter应用国际化的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_localizations 和 intl 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

2. 创建 Arb 文件

ARB（Application Resource Bundle）文件是JSON格式的文件，用于存储不同语言的翻译。在 lib/l10n 目录下创建 app_en.arb 和 app_zh.arb 文件：

app_en.arb

{
  "@@locale": "en",
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"
  }
}

app_zh.arb

{
  "@@locale": "zh",
  "helloWorld": "你好，世界！"
}

3. 生成 Dart 代码

使用 flutter pub run intl_utils:generate 命令生成 Dart 代码。生成的代码将包含一个 AppLocalizations 类，用于访问翻译文本。

4. 配置 MaterialApp

在 main.dart 中配置 MaterialApp 以支持国际化：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('zh', ''),
      ],
      home: MyHomePage(),
    );
  }
}

5. 使用翻译文本

在应用中使用 AppLocalizations.of(context) 来获取翻译文本：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.helloWorld),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context)!.helloWorld),
      ),
    );
  }
}

6. 切换语言

你可以通过 MaterialApp 的 locale 属性来动态切换语言：

MaterialApp(
  locale: Locale('zh'),
  // 其他配置
);

通过以上步骤，你的Flutter应用就可以支持多语言了。

回到顶部