Flutter国际化插件intl_extension_builder的使用

Flutter国际化插件intl_extension_builder的使用

intl_extension_builder 是一个用于 intl_extension 的构建器。该包本身并不提供任何功能,必须与 intl_extension 一起使用。

步骤 1: 添加依赖

首先,在你的 pubspec.yaml 文件中添加 intl_extensionintl_extension_builder 作为依赖项:

dependencies:
  intl_extension: ^1.0.0
  intl_extension_builder: ^1.0.0

然后运行 flutter pub get 来获取这些依赖。

步骤 2: 配置国际化文件

在你的项目根目录下创建一个名为 messages_all.dart 的文件,并配置国际化文件。例如,假设你有两个语言(英语和中文):

// messages_all.dart
import 'package:intl_extension/intl_extension.dart';

extension Messages on String {
  static void register() {
    registerMessages('en', (locale) => new MessagesEn(locale));
    registerMessages('zh', (locale) => new MessagesZh(locale));
  }
}

class MessagesEn extends MessagesBase {
  MessagesEn(Locale locale) : super(locale);

  @override
  String get appTitle => 'My App';
  @override
  String get welcome => 'Welcome';
}

class MessagesZh extends MessagesBase {
  MessagesZh(Locale locale) : super(locale);

  @override
  String get appTitle => '我的应用';
  @override
  String get welcome => '欢迎';
}

步骤 3: 使用国际化插件

接下来,在你的应用中使用 intl_extension 提供的功能。首先,初始化 intl_extension

import 'package:flutter/material.dart';
import 'package:intl_extension/intl_extension.dart';
import './messages_all.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Messages.register();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: Intl.message(
        'My App',
        name: 'appTitle',
        desc: 'The title of the app',
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Intl.message('Welcome')),
      ),
      body: Center(
        child: Text(
          Intl.message('Hello World'),
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

步骤 4: 构建消息文件

为了生成实际的消息文件,你需要运行 intl_extension_builder 命令。这一步可以在你的脚本或者构建过程中完成。假设你有一个 build_messages.sh 脚本:

#!/bin/bash
flutter packages pub run intl_extension_builder

然后执行这个脚本:

./build_messages.sh

更多关于Flutter国际化插件intl_extension_builder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国际化插件intl_extension_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


intl_extension_builder 是一个用于 Flutter 国际化的插件,它可以帮助开发者更方便地管理和生成多语言支持的代码。通过这个插件,你可以将多语言资源文件(如 JSON 文件)自动生成 Dart 代码,从而在应用中使用。

以下是 intl_extension_builder 的基本使用步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 intl_extension_builder 依赖:

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

dev_dependencies:
  build_runner: ^2.1.0
  intl_extension_builder: ^1.0.0

2. 创建多语言资源文件

在项目中创建一个目录来存放多语言资源文件,例如 lib/l10n。然后在该目录下创建 JSON 文件,每个文件对应一种语言。例如:

  • lib/l10n/intl_en.json (英文)
  • lib/l10n/intl_zh.json (中文)

示例 intl_en.json 文件内容:

{
  "hello": "Hello",
  "welcome": "Welcome to Flutter"
}

示例 intl_zh.json 文件内容:

{
  "hello": "你好",
  "welcome": "欢迎使用 Flutter"
}

3. 配置 build.yaml

在项目根目录下创建 build.yaml 文件,并配置 intl_extension_builder

targets:
  $default:
    builders:
      intl_extension_builder|intl_extension:
        enabled: true
        generate_for:
          - lib/l10n/**.json

4. 生成代码

运行以下命令生成多语言支持的 Dart 代码:

flutter pub run build_runner build

生成的文件会放在 lib/l10n/generated 目录下,文件名为 intl_extension.dart

5. 在应用中使用生成的多语言支持

在应用中,你可以通过生成的代码来获取多语言文本。例如:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: Locale('zh'), // 设置当前语言
      supportedLocales: [
        Locale('en'),
        Locale('zh'),
      ],
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.hello),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context)!.welcome),
      ),
    );
  }
}

6. 切换语言

你可以通过 MaterialApplocale 属性来切换应用的语言。例如:

MaterialApp(
  locale: Locale('zh'), // 设置为中文
  // 其他配置
);
回到顶部