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 国际化有所帮助！