Flutter图像转换插件flutter_image_converter的使用

简介

Flutter Image Converter 是一个用于在Flutter项目中轻松进行图像格式转换的插件。它支持多种图像来源和目标格式之间的转换，包括但不限于ImageProvider、ui.Image、image.Image、widget.Image以及原始字节流（Uint8List）。此插件能够识别并处理来自image包支持的所有图像格式，并且兼容各种类型的ImageProvider。

使用方法

1. 添加依赖

首先，在pubspec.yaml文件中添加flutter_image_converter作为依赖：

dependencies:
  flutter_image_converter: ^latest_version # 替换为最新版本号

然后执行flutter pub get来安装该库。

2. 导入包

接下来，在需要使用的Dart文件顶部导入此库：

import 'package:flutter_image_converter/flutter_image_converter.dart';

3. 示例代码

下面是一个完整的示例应用程序，演示了如何使用flutter_image_converter来进行不同类型的图像转换操作。我们将创建一个简单的Flutter应用界面，展示从不同源获取的图像，并将其转换为目标格式后显示出来。

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

void main() => runApp(const App());

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: appBar,
          body: SafeArea(
            child: SingleChildScrollView(
              child: Column(children: children),
            ),
          ),
        ),
        debugShowCheckedModeBanner: false,
      );

  AppBar get appBar => AppBar(
        title: const Text('Flutter Image Converter'),
        centerTitle: true,
      );

  List<Widget> get children => [
        const SizedBox(height: 24),
        ...demoImageProvider,
        ...demoUiImage,
        ...demoPackageImage,
        ...demoFileImage,
        ...demoBytesImage,
      ].map((w) => Padding(padding: const EdgeInsets.all(12), child: w)).toList();

  // ImageProvider to widget.Image
  List<Widget> get demoImageProvider => [
        const Text('From ImageProvider'),
        source(1).widgetImageSync,
      ];

  // image.Image to widget.Image
  List<Widget> get demoPackageImage => [
        const Text('From package Image'),
        FutureBuilder(
          future: source(2).imageImage,
          builder: (_, snapshot) =>
              snapshot.data == null ? const SizedBox() : snapshot.data!.widgetImageSync,
        ),
      ];

  /// See [ImageConverterOnFileExt].
  // FileImage or any format raw bytes to widget.Image
  List<Widget> get demoFileImage => [
        const Text('From File Image, any format'),
        FutureBuilder(
          // same as a file
          future: source(3).uint8List,
          builder: (_, snapshot) =>
              snapshot.data == null ? const SizedBox() : snapshot.data!.widgetImageSync,
        ),
      ];

  // Any formatted raw bytes to widget.Image
  List<Widget> get demoBytesImage => [
        const Text('From raw bytes, any format'),
        FutureBuilder(
          future: source(4).uint8List,
          builder: (_, snapshot) =>
              snapshot.data == null ? const SizedBox() : snapshot.data!.widgetImageSync,
        ),
      ];

  // ui.Image to widget.Image
  List<Widget> get demoUiImage => [
        const Text('From ui.Image'),
        FutureBuilder(
          future: source(5).uiImage,
          builder: (_, snapshot) => snapshot.data == null
              ? const SizedBox()
              : FutureBuilder(
                  future: snapshot.data!.widgetImage,
                  builder: (_, snapshot) =>
                      snapshot.data == null ? const SizedBox() : snapshot.data!,
                ),
        ),
      ];

  ImageProvider source(int n) => AssetImage('assets/$n.webp');
}

在这个例子中，我们定义了一个包含多个部分的应用程序：

• demoImageProvider: 将ImageProvider直接转换成widget.Image。
• demoPackageImage: 先将图片资源加载为image.Image再转成widget.Image。
• demoFileImage: 从文件或任何格式的原始字节数组开始，最终生成widget.Image。
• demoBytesImage: 直接从原始字节数组创建widget.Image。
• demoUiImage: 通过先获得ui.Image再进一步转换为widget.Image。

每个部分都使用了FutureBuilder来异步处理可能耗时的操作，并确保UI能够在数据准备好之前保持响应性。

支持的类型与转换器

以上表格展示了所有支持的数据类型及其相互之间的转换关系。你可以根据自己的需求选择合适的扩展方法来进行转换。

更多信息

有关更多细节和高级用法，请参考官方文档及示例代码。如果你有任何问题或者建议，欢迎访问GitHub仓库提交issue或pull request。希望这个插件能帮助你在Flutter开发中更方便地处理图像！

注意：请确保你已经在项目中正确配置了资源路径（如assets），以便能够顺利运行上述示例代码中的图片加载逻辑。