Flutter实现国际化（多语言）

在全球化趋势下，应用支持多语言是非常重要的。Flutter 提供了强大的国际化（i18n）支持，可以通过 flutter_localizations 与 gen-l10n 工具生成的本地化类来实现不同区域和语言的适配。本篇博客将介绍如何在 Flutter 项目中使用 flutter_localizations，并实现多语言支持与动态切换。

效果图：

1. 什么是国际化（i18n）和本地化（l10n）？

国际化（i18n） 是指编写软件，使其能够在不同的语言和文化环境中运行。它包含了将软件中的文本、日期、时间等元素抽象出来，以便根据用户的区域设置进行翻译和显示。

本地化（l10n） 是国际化的具体应用步骤，它包括将应用程序的语言、日期格式、货币符号等内容适配到特定地区。

2. 配置

在settings -> plugins里下载intl插件

需要在 pubspec.yaml 中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

在最底部加上：

flutter_intl:
  enabled: true

运行 flutter pub get 下载依赖，会自动生成文件,他默认生成一个英文的文件：

 

修改 MaterialApp 以支持国际化

在 MaterialApp 中配置 localizationsDelegates 和 supportedLocales 以支持本地化。具体代码如下：

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale _locale = Locale('en'); // 默认语言

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: _locale,// 设置当前的 Locale
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', 'US'), //英文
        Locale('zh', 'CN'), //简体中文
        Locale('zh', 'TW') //繁体中文
      ],
      home: MyHomePage(
        onLocaleChange: (Locale locale) {
          setLocale(locale);
        },
      ),
    );
  }
}

3. 添加和生成语言文件

intl 使用 .arb 文件来存储不同语言的翻译资源。接下来，我们点击：Tools -> Flutter Intl -> Add Local，可以新增其他语言

我们可以加上中文简体：zh 和繁体：zh_TW：

语言文件示例

lib/l10n/intl_en.arb:

{
  "content": "china"
}

lib/l10n/intl_zh.arb:

{
  "content": "中国"
}

lib/l10n/intl_zh_TW.arb:

{
  "content": "中國"
}

4.动态切换语言：

5.通过手机系统语言来显示对应语言的话：

6.完整示例代码:

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

import 'generated/l10n.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale _locale = const Locale('en', 'US'); // 默认语言

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: _locale,
      // 设置当前的 Locale
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', 'US'), //英文
        Locale('zh', 'CN'), //简体中文
        Locale('zh', 'TW'), //繁体中文
        Locale('zh', 'UG') //维语
      ],
      //如果使用系统语言，使用下面的：
      /*localeResolutionCallback: (locale, supportedLocales) {
        if (locale?.countryCode == 'CN') {// 如果语言是简体
          return const Locale('zh', 'CN');
        } else if (locale?.countryCode == 'TW') {// 如果语言繁体
          return const Locale('zh', 'TW');
        } else {
          return const Locale('en', 'US');
        }
      },*/
      home: MyHomePage(
        onLocaleChange: (Locale locale) {
          setLocale(locale);
        },
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final Function(Locale) onLocaleChange;

  const MyHomePage({Key? key, required this.onLocaleChange}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter 国际化 Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //此处国际化文字
            Text(
              S.current.content,
              style: const TextStyle(
                  color: Colors.red, fontSize: 50, fontWeight: FontWeight.w700),
            ),
            changeButton(const Locale('zh', 'CN'), '简体'),
            changeButton(const Locale('zh', 'TW'), '繁体'),
            changeButton(const Locale('en', 'US'), '英文'),
            changeButton(const Locale('zh', 'UG'), '维语'),
          ],
        ),
      ),
    );
  }

  Widget changeButton(Locale newLocale, String text) {
    return ElevatedButton(
      onPressed: () {
        onLocaleChange(newLocale); // 调用 MyAppState 的 setLocale 方法
      },
      child: Text(text),
    );
  }
}

希望这篇文章对你了解 Flutter 国际化有所帮助！