Flutter未知功能插件flutter_ilib的介绍与使用

Flutter未知功能插件flutter_ilib的介绍与使用

简介

flutter_ilib 是一个用于在Flutter应用中方便地使用iLib库的插件。iLib是一个用纯JavaScript编写的国际化库，该插件通过flutter_js使JavaScript文件能够在Flutter应用中正常工作。

如何使用

初始化

首先，添加以下导入语句：

import 'package:flutter_ilib/flutter_ilib.dart';

然后，添加一个监听器以获取iLib准备就绪的回调消息：

final FlutterILib _flutterIlibPlugin = FlutterILib.instance;
_flutterIlibPlugin.addListener(() {
    // 执行某些操作
});

更新语言环境

从版本v1.0.0开始，结构已更新为仅加载当前激活的语言环境数据。当应用程序启动时，包会自动通过检测系统的语言环境来加载语言环境数据。当语言环境发生变化时，建议在适当的时间调用以下方法以加载更新的语言环境数据文件：

_flutterIlibPlugin.loadLocaleData(curLocale);

例如，可以使用localeResolutionCallback属性来处理语言环境变化：

Locale? appLocaleResolutionCallback(
      Locale? locale,
      Iterable<Locale> supportedLocales,
    ) {
      ...
      _flutterIlibPlugin.loadLocaleData(locale);
      ...
    }

[@override](/user/override)
Widget build(BuildContext context) {
....
    return MaterialApp(
        ....
        localeResolutionCallback: appLocaleResolutionCallback,
    ....
}

格式化

使用flutter_ilib提供的类进行格式化操作。以下是几个示例：

短日期格式化：

final ILibDateFmtOptions fmtOptions = ILibDateFmtOptions(
    locale: 'ko-KR',
    length: 'short',
    useNative: false,
    timezone: 'local');
final ILibDateFmt fmt = ILibDateFmt(fmtOptions);
final ILibDateOptions dateOptions = ILibDateOptions(
    year: 2024,
    month: 6,
    day: 27,
    hour: 13,
    minute: 45,
    second: 0,
    millisecond: 0);
fmt.format(dateOptions);
// '24. 6. 27.'

完整日期时间格式化：

final ILibDateFmtOptions fmtOptions = ILibDateFmtOptions(
    locale: 'ko-KR',
    length: 'full',
    type: 'datetime',
    useNative: false,
    timezone: 'local');
final ILibDateFmt fmt = ILibDateFmt(fmtOptions);
final ILibDateOptions dateOptions =
    ILibDateOptions(dateTime: DateTime.parse('2024-06-27 10:42'));
fmt.format(dateOptions);
// '2024년 6월 27일 오전 10:42'

获取一周的第一天：

// 0:sun, 1:mon, 2:tue, 3:wed, 4:thu, 5:fri, 6:sat
final ILibLocaleInfo locInfo = ILibLocaleInfo('ko-KR');
locInfo.getFirstDayOfWeek();
// 0

类

FlutterILib

• 方法：evaluateILib()：允许使用iLib中的任何API类。将要执行的JavaScript代码转换为字符串并作为参数传递。

  String lo = 'am-ET';
  String jscode1 = 'new LocaleInfo("$lo").getCalendar()';
  _flutterIlibPlugin.evaluateILib(jscode1);
  // 'ethiopic'
  

为了提供更高效的方式，我们提供了一些可以在Flutter应用中轻松使用的类，目前包括ILibDateFmt和ILibLocaleInfo，未来计划提供更多类和方法。

ILibDateFmt

• 类：ILibDateOptions
• 类：ILibDateFmtOptions
• 类：ILibDateFmt
  • 方法：format()，getClock()，getTemplate()，getMeridiemsRange()

ILibLocaleInfo

• 类：ILibLocaleInfo
  • 方法：getFirstDayOfWeek()，getWeekEndStart()，getWeekEndEnd()

支持的语言环境

以下语言环境的结果已通过单元测试验证，与原始iLib方法的结果相同：

af-ZA, am-ET, ar-AE, ar-EG, ar-IQ, ar-MA, ar-SA, as-IN, az-Latn-AZ, bg-BG, bn-IN, bs-Latn-BA, bs-Latn-ME, cs-CZ, da-DK, de-AT, de-CH, de-DE, de-LU, el-CY, el-GR, en-AM, en-AU, en-AZ, en-CA, en-CN, en-GB, en-GE, en-GH, en-HK, en-IE, en-IN, en-IS, en-JP, en-KE, en-LK, en-MM, en-MW, en-MX, en-MY, en-NG, en-NZ, en-PH, en-PR, en-SG, en-TW, en-UG, en-US, en-ZA, en-ZM, es-AR, es-BO, es-CA, es-CL, es-CO, es-DO, es-EC, es-ES, es-GT, es-HN, es-MX, es-NI, es-PA, es-PE, es-PR, es-PY, es-SV, es-US, es-UY, es-VE, et-EE, fa-IR, fi-FI, fr-BE, fr-CA, fr-CH, fr-FR, fr-LU, ga-IE, gu-IN, ha-Latn-NG, he-IL, hi-IN, hr-HR, hr-ME, hu-HU, id-ID, is-IS, it-CH, it-IT, ja-JP, kk-Cyrl-KZ, km-KH, kn-IN, ko-KR, ko-US, ku-Arab-IQ, lt-LT, lv-LV, mk-MK, ml-IN, mn-Cyrl-MN, mr-IN, ms-MY, nb-NO, nl-BE, nl-NL, or-IN, pa-IN, pl-PL, pt-BR, pt-PT, ro-RO, ru-BY, ru-GE, ru-KG, ru-KZ, ru-RU, ru-UA, si-LK, sk-SK, sl-SI, sq-AL, sq-ME, sr-Latn-ME, sr-Latn-RS, sv-FI, sv-SE, sw-Latn-KE, ta-IN, te-IN, th-TH, tr-AM, tr-AZ, tr-CY, tr-TR, uk-UA, ur-IN, uz-Latn-UZ, vi-VN, zh-Hans-CN, zh-Hant-HK, zh-Hant-TW

支持的平台

• Linux
• webOS

测试

运行单元测试

在Linux上，需要导出一个指向libquickjs_c_bridge_plugin.so文件的环境变量LIBQUICKJSC_TEST_PATH：

export LIBQUICKJSC_TEST_PATH="${PWD}/test/linux/libquickjs_c_bridge_plugin.so"
flutter test test/flutter_ilib_test.dart

我们有一个脚本文件可以一次性完成所有这些操作：

./execute_unit_test.sh

执行示例应用

我们提供了一个可以执行的示例应用：

cd example
flutter build linux --release
flutter run -d linux --release

许可证

版权所有 © 2024, JEDLSoft

此插件根据Apache2许可证发布。详情请参阅LICENSE文件。

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用flutter_ilib插件：

import 'dart:async';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_ilib/flutter_ilib.dart';

void main() {
  runZonedGuarded<void>(
    () {
      FlutterError.onError = (FlutterErrorDetails details) {
        FlutterError.presentError(details);
        debugPrint(
          'FlutterError.onError : ${details.exceptionAsString()}, stackTrace: ${details.stack}',
        );
      };

      runApp(const MyApp());
    },
    (Object error, StackTrace stackTrace) {
      debugPrint(
        'runZonedGuarded : $error, stackTrace: $stackTrace',
      );
    },
  );
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _iLibVersion = 'Unknown iLib';
  String _iLibCLDRVersion = 'CLDR';
  String _currentTime = 'Current Time';
  List<String> newList = <String>['-', '-', '-'];
  String curLocale =
      PlatformDispatcher.instance.locale.toString().replaceAll('_', '-');
  String result1 = '', result2 = '', result3 = '';
  final FlutterILib _flutterIlibPlugin = FlutterILib.instance;

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.endOfFrame.then((void value) {
      if (!mounted) {
        return;
      }
      _flutterIlibPlugin.addListener(() => updateState());
    });
  }

  void updateState() {
    String iLibVersion;
    String currentTime;
    String iLibCLDRVersion;

    try {
      iLibVersion = _flutterIlibPlugin.getVersion ?? 'Unknown iLib version';
    } on PlatformException {
      iLibVersion = 'Failed to get iLib version.';
    }

    try {
      iLibCLDRVersion =
          _flutterIlibPlugin.getCLDRVersion ?? 'Unknown CLDR version';
    } on PlatformException {
      iLibCLDRVersion = 'Failed to get iLib CLDR version.';
    }

    try {
      currentTime = getDateTimeFormatNow('en-US');
    } on PlatformException {
      currentTime = 'Failed to get iLib DatFmt.';
    }

    result1 = getDateTimeFormat(curLocale);
    result2 = getFirstDayOfWeek(curLocale);
    result3 = getClock(curLocale);

    setState(() {
      _iLibVersion = iLibVersion;
      _iLibCLDRVersion = iLibCLDRVersion;
      _currentTime = currentTime;
      newList = <String>[result1, result2, result3];
    });
  }

  static const TextStyle textStyle = TextStyle(fontSize: 30);
  static const TextStyle itemTextStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const TextStyle infoTextStyle = TextStyle(fontSize: 20);
  static const TextStyle infoItemTextStyle =
      TextStyle(fontSize: 20, fontWeight: FontWeight.bold);
  static const TextStyle buttonTextStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  List<String> localeList = <String>[
    'en-GB',
    'en-US',
    'ko-KR',
    'fa-IR',
    'am-ET'
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FlutterIlibPlugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              _customTextBox('Current Locale', curLocale),
              _customTextBox('DateTime (full)', newList[0]),
              _customTextBox('First Day Of the Week', newList[1]),
              _customTextBox('Clock (12 or 24)', newList[2]),
              const SizedBox(
                height: 30,
              ),
              Wrap(
                alignment: WrapAlignment.center,
                spacing: 20,
                children: <Widget>[
                  const Text('Change Locale', style: itemTextStyle),
                  for (int i = 0; i < localeList.length; i++)
                    ElevatedButton(
                      child: Text(localeList[i], style: buttonTextStyle),
                      onPressed: () {
                        curLocale = localeList[i];
                        _flutterIlibPlugin.loadLocaleData(curLocale);

                        result1 = getDateTimeFormat(curLocale);
                        result2 = getFirstDayOfWeek(curLocale);
                        result3 = getClock(curLocale);
                        setState(() {
                          newList = <String>[result1, result2, result3];
                        });
                      },
                    )
                ],
              ),
              const SizedBox(
                height: 40,
              ),
              _customTextBox('iLib Version', _iLibVersion, main: false),
              _customTextBox('CLDR Version', _iLibCLDRVersion, main: false),
              _customTextBox('Current Time', _currentTime),
            ],
          ),
        ),
      ),
    );
  }

  Widget _customTextBox(String item, String value, {bool main = true}) {
    return SizedBox(
      width: 700,
      height: (main ? 40 : 30),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(item, style: (main ? itemTextStyle : infoItemTextStyle)),
          Text(value, style: (main ? textStyle : infoTextStyle)),
        ],
      ),
    );
  }

  String getDateTimeFormatNow(String lo) {
    final ILibDateOptions dateOptions =
        ILibDateOptions(dateTime: DateTime.now());
    final ILibDateFmtOptions fmtOptions = ILibDateFmtOptions(
        locale: lo,
        length: 'full',
        type: 'datetime',
        useNative: false,
        timezone: 'local');
    final ILibDateFmt fmt = ILibDateFmt(fmtOptions);
    return fmt.format(dateOptions);
  }

  String getDateTimeFormat(String curlo) {
    final ILibDateOptions dateOptions =
        ILibDateOptions(dateTime: DateTime.now());
    final ILibDateFmtOptions fmtOptions = ILibDateFmtOptions(
        locale: curlo,
        length: 'full',
        type: 'datetime',
        useNative: false,
        timezone: 'local');
    final ILibDateFmt fmt = ILibDateFmt(fmtOptions);
    return fmt.format(dateOptions);
  }

  String getFirstDayOfWeek(String curlo) {
    final ILibLocaleInfo locInfo = ILibLocaleInfo(curlo);
    final List<String> days = <String>[
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday'
    ];

    final int firstDay = locInfo.getFirstDayOfWeek();
    return days[firstDay];
  }

  String getClock(String curlo) {
    final ILibDateFmtOptions fmtOptions = ILibDateFmtOptions(locale: curlo);
    final int clock = ILibDateFmt(fmtOptions).getClock();
    return '$clock';
  }
}