Flutter自带国际化适配自动生成方案

1. 介绍

在研究别人的项目期间,突然发现了此方案,特意分享,原来flutter自己已经有一套成熟的国际化生成功能,配置完成后,只需要编写arb即可,主要有以下步骤

    1. 新建一个l10n.yaml文件
    1. 添加和配置所需文件
    1. 更改pubspec.yaml
    1. flutter packages get
    1. 使用

1. 新建一个l10n.yaml文件

添加内容如下:

arb-dir: lib/l10n/arb
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
nullable-getter: false

解析:

  • arb-dir: arb 所在的目录
  • template-arb-file: 默认使用的arb文件
  • output-localization-file: 导出的文件名
  • nullable-getter: 获取国际化文本是否可空

2. 添加和配置所需文件

新建文件及文件夹如下:

  • 项目下的lib
    • l10n
      • arb
        • app_en.arb
        • app_es.arb
      • l10n.dart

app_en.arb 文件内容

{
  "@@locale": "en",
  "appName": "Remarks",
  "@appName": {
      "description": "备注"
  }
}

@appName表示配置一些东西,description表示添加注释,app_es.arb 同理可得

l10n.dart 代码如下:(导入的内容虽然有报错,先不用管)

import 'package:flutter/widgets.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

export 'package:flutter_gen/gen_l10n/app_localizations.dart';

extension AppLocalizationsX on BuildContext {
  AppLocalizations get l10n => AppLocalizations.of(this);
}

3. 更改pubspec.yaml

添加generate属性

flutter:
  uses-material-design: true
  # 添加这个属性
  generate: true

4. 运行flutter packages get

运行成功后,可以在.dart_tool目录下,生成了国际化适配的代码,再重新查看之前报错的代码,都正常了

5.使用

MaterialApp修改如下:


需要使用的地方:

arb的内容还有很多,例如,添加参数等,自行可研究,以上完!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国际化命令:flutter --no-color pub global run intl_utils:genera...
    iLeooooo阅读 3,161评论 0 1
  • 前言 如果APP有需要支持多种语言,就需要支持国际化,无论是android和ios,现在针对flutter的国际化...
    lebonbill阅读 10,803评论 4 6
  • 概述 国际化的认识 国际化的适配 国际化的工具 一、国际化的认识 开发一个App,如果我们的App需要面向不同的语...
    IIronMan阅读 760评论 0 2
  • 如果App的用户使用的是不同语言,那进行国际化是必要的。国际化主要包括文案的国际化(不同的语言展示不同的文案)和布...
    chonglingliu阅读 2,284评论 5 6
  • 一. 国际化的认识 开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们需要对齐...
    5e4c664cb3ba阅读 1,473评论 0 3