【Flutter 必备插件】国际化 Flutter Intl、flutter_localizations

安装 Flutter Intl

Android Studio 和 VS Code 都有 Flutter Intl 插件。

  • Android Studio → File → Setting → Plugins → 搜索 Flutter Intl。

安装重启即可。

安装 flutter_localizations

添加依赖

yaml 复制代码
dependencies:
	flutter_localizations:
    sdk: flutter

初始化工程

  • Android Studio → Tools → Flutter Intl → Initalize。

在 lib 下生成 generated 和 l10n

  • generated 包下的 itnl 目录默认生成 messages_all.dart 和 messages_en.dart 文件,messages 开头的文件无需手动修改,是自动生成的。
  • generated 包下的 l10n.dart 是 Localizations 和 Delegate的实现,无需手动修改,是自动生成的。
  • l10n 包下存在一个 intl_en.arb 文件,文案存放在此处。

pubspec.yaml 生成如下内容:

添加语言

  • Android Studio → Tools → Flutter Intl → Add Locale。

添加中文支持

自动生成相关文件

初始化

  • main.dart
csharp 复制代码
import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
 localizationsDelegates: [
   // 本地化的代理类
   // GlobalMaterialLocalizations.delegate 为Material 组件库提供的本地化
   // 的字符串和其他值,它可以使Material 组件支持多语言
   GlobalMaterialLocalizations.delegate,
   // GlobalWidgetsLocalizations.delegate 定义组件默认的文本方向,
   // 从左到右或从右到左,这是因为有些语言的阅读习惯并不是从左到右,比如如阿拉伯语就是从右向左的
   GlobalWidgetsLocalizations.delegate,
 ],
 supportedLocales: S.delegate.supportedLocales,
  // ...
)

在 intl_zh.arb 下添加文案

json 复制代码
{
  "appName": "appName"
}

使用示例

scss 复制代码
Text(S.of(context).appName)
相关推荐
律宏阔1 小时前
Flutter Riverpod 3:统一打印 Provider 错误与自动重试日志
前端·flutter
m0_738185822 小时前
Flutter 鸿蒙化实战:flutter_exif_plugin 适配 OpenHarmony,图片 EXIF 读写
flutter·华为·harmonyos·鸿蒙
恋猫de小郭2 小时前
Shopify 回应为什么从 RN 回到原生,为什么不用 KMP ?
android·前端·flutter
事圆则缓7 小时前
Flutter 状态管理框架对比(五):GetX 的响应式、依赖注册与生命周期
前端·javascript·flutter
事圆则缓11 小时前
Flutter 状态管理框架对比(六):同一个购物车,四种方案怎么落地?
前端·javascript·flutter
恋猫de小郭1 天前
Android 原生的 Compose A2UI 也来了,你还抱着 XML 养老吗?
android·前端·flutter
事圆则缓1 天前
Flutter 状态管理框架对比(三):Riverpod 如何连起购物车与异步价格
开发语言·javascript·flutter
事圆则缓1 天前
Flutter 状态管理框架对比(二):Provider 怎样管住一份购物车
flutter
GitCode官方1 天前
开源鸿蒙跨平台直播|Flutter HCPP 开源鸿蒙实践:让原生视图回到系统合成层
flutter·华为·harmonyos