【Flutter】vscode快速估计插件 Flutter Intl

---

前言

当软件有国际化的需求的时候，你可以就需要多种语言的支持了。如果你使用的ide 支持该插件的话，vscode I，ntelliJ /，Android Studio.，那么你可以使用里面的快速国际化的插件Flutter Intl来快速完成这项工作

---

一、Flutter Intl是什么？

快速构建国际化功能的插件，如果不使用也可以构建国际化的

二、使用步骤（vscode 为例子）

1.安装

2.输入命令：

ctrl+shift+p
Flutter Intl: Initialize

执行之后会自动产生一个文件和文件夹：
lib/l10n/intl_en.arb.

3.pubspec.yaml 里面做一些配置

dependencies:
flutter:
sdk: flutter
flutter_localizations: # 添加这个
sdk: flutter # 添加这个

flutter_intl: # 添加这个
enabled: true # 添加这个

如果你的设备是ios的话，还需要在xcode 里面设置info.plist 添加支持的语言类型：

可以在命令输入ios/Runner/Info.plist 会自动打开xcode的页面，比如下面的添加就是支持英语和德语

<key>CFBundleLocalizations</key>
<array>
    <string>en</string>
    <string>de_DE</string>
    ...
</array>
1
2
3
4
5
6

4.在代码里面使用

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,//生成的支持的语言种类
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

5.其他使用

Intl.getCurrentLocale() //获取当前的语言环境
1

6.新增其他的语言支持，在这边新建一个arb的文件

你新增一个他会自动的获取到你新增了一个并自动添加到message_all 里面；

7.如何使用

英文对应的其他的语言，比如下图：

1.简单使用

直接使用，这样就会在该页面上面显示，里面的内容，前提是你手机设备当前语言是你设置语言里面支持的，手机设备切换下中英文，页面显示的就会不一样

 S.of(context).myName,
1

2.如果你的内容是不确定，动态的，你可以使用如下：

arb 文件加入 {} 可以传入参数

{
    "myName": "马大帅",
    "myFullName": "马大帅 {work} {age}"
}
1
2
3
4

        children: <Widget>[
            Text(
              ' ${S.of(context).myName}',
            ),
            Text(
              ' ${S.of(context).myFullName('sb 工作', 50)}',
            ),
          ],
1
2
3
4
5
6
7
8

3.可以选项的内容和复数

复数：

    "getMessageTips": "{howMany, plural, zero{你选择的零} two{你选择的二} other{你选择了{howMany}其他}}",
1

  Text(S.of(context).getMessageTips(2)),
1

可以选项的内容：相当于是一个字典，传入key ，然后传入value 就可以完成

"select": "{select,select, option1{{lastName}, select} option2{{lastName}, select} other{{lastName}, default select}}",
1

Text(S.of(context).select("option2", "USA"));
Text(S.of(context).select("other", "china"));
1
2

总结

欢迎关注，留言，咨询，交流！