Flutter多语言支持插件 multi_language_json 的使用

简介

multi_language_json 是一个简单易用的Flutter插件，用于在Flutter应用中实现多语言支持。通过该插件，您可以轻松地为您的应用添加多种语言，并且可以根据用户的设备语言自动选择合适的语言。

开始使用

1. 创建语言文件目录

首先，在项目的主目录下创建一个名为 lang 的文件夹，并在其中放置不同语言的 JSON 文件。每个 JSON 文件的名称应包含语言和国家代码，例如 en_US.json 和 pt_BR.json。

project/
├── lib/
│   └── ...
└── lang/
    ├── en_US.json
    └── pt_BR.json

2. 在 pubspec.yaml 中添加语言文件

确保在 pubspec.yaml 文件中正确引用这些语言文件：

flutter:
  assets:
    - lang/en_US.json
    - lang/pt_BR.json

3. 初始化 MultiLanguageBloc

在代码中，您需要创建一个 MultiLanguageBloc 对象，并指定初始语言、默认语言、通用路由以及支持的语言列表。

final language = MultiLanguageBloc(
  initialLanguage: 'pt_BR',
  defaultLanguage: 'pt_BR',
  commonRoute: 'common',
  supportedLanguages: ['en_US', 'pt_BR'],
);

4. 使用 MultiLanguageStart 初始化语言

在应用启动时，使用 MultiLanguageStart 小部件来初始化语言。这只需要在应用首次启动时执行一次，之后可以仅使用 MultiStreamLanguage 小部件。

[@override](/user/override)
Widget build(BuildContext context) {
  return MultiLanguageStart(
    future: language.init(),
    builder: (context) => MultiStreamLanguage(
      screenRoute: ['home'],
      builder: (context, data) => Scaffold(
        appBar: AppBar(
          title: Text(data.getValue(route: ['title'])),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text(data.getValue(route: ['btn'])),
            onPressed: () => language.showAlertChangeLanguage(
              context: context,
              title: data.getValue(route: ['dialog', 'title'], inRoute: false),
              btnNegative: data.getValue(route: ['dialog', 'btn_negative'], inRoute: false),
            ),
          ),
        ),
      ),
    ),
  );
}

使用 MultiStreamLanguage 小部件

1. 设置 screenRoute

screenRoute 参数用于指定当前屏幕的语言路径。例如，如果您的 JSON 文件结构如下：

{
  "home": {
    "title": "Home",
    "btn": "Click me"
  }
}

则可以这样设置 screenRoute：

screenRoute: ['home']

如果需要访问更深层次的节点，可以通过传递更多的路径元素：

screenRoute: ['home', 'nested_route']

2. 使用 getValue 方法获取文本

getValue 方法用于从指定路径获取文本。它有两个参数：route 和 inRoute。inRoute 决定是否在当前屏幕路径内查找文本。

示例：

假设 JSON 文件结构如下：

{
  "home": {
    "title": "Home",
    "my_route": "A"
  },
  "my_route": "B"
}

• 如果调用 data.getValue(route: ['my_route'], inRoute: true)，将返回 "B"。
• 如果调用 data.getValue(route: ['my_route'], inRoute: false)，将返回 "A"。

3. 处理不存在的路径

如果指定的路径在当前语言中不存在，插件会尝试在默认语言中查找。如果仍然找不到，则返回 'NULL'。

切换语言

为了支持语言切换功能，每个语言节点必须包含一个名为 config 的子节点，其中包含语言名称和图标信息。

{
  "config": {
    "title": "Portuguese (Brazil)",
    "icon": "path_to_flag"
  }
}

显示语言切换对话框

调用 showAlertChangeLanguage 方法显示语言切换对话框：

language.showAlertChangeLanguage(
  context: context,
  title: 'Select Language',
  btnNegative: 'Cancel'
);

编程方式切换语言

您也可以通过编程方式切换语言：

language.changeLanguage('pt_BR');

完整示例代码

以下是一个完整的示例应用，展示了如何使用 multi_language_json 插件实现多语言支持：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multi Language - Example',
      home: Home(),
      supportedLocales: [const Locale('en', 'US'), const Locale('pt', 'BR')],
    );
  }
}

class Home extends StatefulWidget {
  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final language = MultiLanguageBloc(
    initialLanguage: 'pt_BR',
    defaultLanguage: 'pt_BR',
    commonRoute: 'common',
    supportedLanguages: ['en_US', 'pt_BR'],
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiLanguageStart(
      future: language.init(),
      builder: (context) => MultiStreamLanguage(
        screenRoute: ['home'],
        builder: (context, data) => Scaffold(
          appBar: AppBar(
            title: Text(data.getValue(route: ['title'])),
          ),
          body: Center(
            child: ElevatedButton(
              child: Text(data.getValue(route: ['btn'])),
              onPressed: () => language.showAlertChangeLanguage(
                context: context,
                title: data.getValue(route: ['dialog', 'title'], inRoute: false),
                btnNegative: data.getValue(route: ['dialog', 'btn_negative'], inRoute: false),
              ),
            ),
          ),
        ),
      ),
    );
  }
}