Flutter 图片处理插件 NexImage 的使用

NexImage 是一个 Flutter 小部件，用于简化多种格式图像的渲染和动画支持。该库能够自动检测并呈现来自资源文件和网络源的不同图像格式，还支持 Lottie 动画、高效加载网络图像，并可以将 PDF 转换为图像。

特性

• 自动资源图像检测：轻松地从资源文件中检测并呈现不同格式的图像。
• Lottie 动画支持：可以从资源文件和网络 URL 显示 Lottie 动画。
• 网络图像支持：通过 CachedNetworkImage 高效加载网络图像，以优化缓存和性能。
• PDF 转换为图像：将 PDF 的第一页转换为图像以快速显示。
• 多种图像扩展支持：支持包括 SVG、PNG、BMP、GIF、WEBP、TIFF、HEIC 在内的多种图像格式。

截图

安装

在 pubspec.yaml 文件中添加 nex_image：

dependencies:
  nex_image: ^1.0.0

然后运行：

flutter pub get

使用

以下是如何使用 NexImage 小部件来显示不同类型图像的示例：

显示资源图像

import 'package:nex_image/nex_image.dart';

Column(
  children: [
    Text('PNG Image'),
    NexImage.asset(
      imagePath: 'assets/images/sample.png',
    ),
  ],
);

显示网络图像

import 'package:nex_image/nex_image.dart';

Column(
  children: [
    Text('Network Image'),
    NexImage.network(
      imageUrl: 'https://example.com/sample.jpg',
    ),
  ],
);

显示 Lottie 动画

从资源文件

import 'package:nex_image/nex_image.dart';

Column(
  children: [
    Text('Lottie Animation from Assets'),
    NexImage.lottie(
      imagePath: 'assets/animations/sample.json',
      repeat: true,
    ),
  ],
);

从网络

import 'package:nex_image/nex_image.dart';

Column(
  children: [
    Text('Lottie Animation from Network'),
    NexImage.lottie(
      imagePath: 'https://example.com/animation.json',
      repeat: true,
    ),
  ],
);

显示 PDF 作为图像

import 'package:nex_image/nex_image.dart';

Column(
  children: [
    Text('PDF as Image'),
    NexImage.asset(
      imagePath: 'assets/pdfs/sample.pdf',
    ),
  ],
);

支持的图像格式

• SVG：可缩放矢量图形
• PNG：便携式网络图形
• BMP：位图图像文件
• GIF：图形交换格式（支持动画）
• WEBP：WebP 图像格式
• TIFF：标记图像文件格式
• HEIC：高效图像编码
• PDF：显示 PDF 的第一页作为图像
• 网络图像：任何标准图像格式的 URL
• Lottie 动画：基于 JSON 的动画

贡献

欢迎贡献！请随时提交问题或拉取请求。

许可证

该项目采用 MIT 许可证。详情请参阅 LICENSE 文件。

完整示例代码

以下是完整的示例代码，展示了如何使用 NexImage 来显示多种类型的图像。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'NexImage Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const SingleChildScrollView(
        child: Wrap(
          spacing: 8,
          runAlignment: WrapAlignment.center,
          alignment: WrapAlignment.center,
          children: <Widget>[
            Column(
              children: [
                Text('SVG'),
                NexImage.asset(
                  imagePath: 'assets/svg/star.svg',
                ),
              ],
            ),
            Column(
              children: [
                Text('PNG'),
                NexImage.asset(
                  imagePath: 'assets/images/star.png',
                ),
              ],
            ),
            Column(
              children: [
                Text('PDF'),
                NexImage.asset(
                  imagePath: 'assets/pdfs/sample.pdf',
                ),
              ],
            ),
            Column(
              children: [
                Text('WEBP'),
                NexImage.asset(
                  imagePath: 'assets/webp/sample.webp',
                ),
              ],
            ),
            Column(
              children: [
                Text('BMP'),
                NexImage.asset(
                  imagePath: 'assets/bmp/sample.bmp',
                ),
              ],
            ),
            Column(
              children: [
                Text('GIF'),
                NexImage.asset(
                  imagePath: 'assets/gif/sample.gif',
                ),
              ],
            ),
            Column(
              children: [
                Text('TIFF'),
                NexImage.asset(
                  imagePath: 'assets/tiff/sample.tiff',
                ),
              ],
            ),
            Column(
              children: [
                Text('HEIC'),
                NexImage.asset(
                  imagePath: 'assets/heic/sample.heic',
                ),
              ],
            ),
            Column(
              children: [
                Text('Network'),
                NexImage.network(
                  imageUrl: 'https://cdn.myanimelist.net/images/anime/1141/142503.jpg',
                ),
              ],
            ),
            Column(
              children: [
                Text('Lottie Network'),
                NexImage.lottie(
                  imagePath: 'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
                  repeat: true,
                ),
              ],
            ),
            Column(
              children: [
                Text('Lottie Assets'),
                NexImage.lottie(
                  imagePath: 'assets/lottie/sample.json',
                  repeat: true,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}