Flutter图像处理插件 avs_image 的使用

avs_image 是一个功能强大的Flutter插件，它可以帮助你轻松地加载和显示本地及网络图片，并支持SVG文件。该插件还提供了缓存机制来优化性能，并且可以创建图像画廊。以下是详细的使用指南。

功能特性

• 使用 AVSImageProvider 可以轻松加载图片和SVG文件。
• 使用 AVSImageGallery 可以展示图片画廊。
• 支持渐变色的SVG文件。
• 提供了多种配置选项，如圆形裁剪、错误图片显示等。

安装

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  avs_image: ^1.1.11

然后运行 flutter pub get 来安装依赖。

基本用法

加载网络图片

下面是一个简单的例子，展示了如何使用 AVSImage 来加载并显示一张网络图片：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AVSImage Demo')),
        body: Center(
          child: AVSImage(
            "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/About_to_Launch_%2826075320352%29.jpg/1280px-About_to_Launch_%2826075320352%29.jpg",
            isCircle: true,
            width: 100,
            height: 100,
            alignment: Alignment.center,
            errorImgWidget: Icon(Icons.error, color: Colors.red),
          ),
        ),
      ),
    );
  }
}

显示错误图片

当图片加载失败时，可以设置一个错误图片或图标：

AVSImage(
  "invalid_url",
  isCircle: true,
  errorImgWidget: Icon(Icons.error, color: Colors.red),
)

使用 AVSImageProvider

如果你想将图片作为背景或其他装饰用途，可以使用 AVSImageProvider：

Container(
  height: 200,
  width: 300,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    image: DecorationImage(
      fit: BoxFit.contain,
      image: AVSImageProvider("https://www.svgrepo.com/show/530440/machine-vision.svg", scale: 9),
    ),
  ),
  child: Text("SVG Image Provider"),
)

创建图片画廊

你可以通过 AVSImageGallery 来创建一个图片画廊：

TextButton(
  onPressed: () {
    AVSImageGallery(context, imagePaths: [
      "assets/images/1.jpg",
      "assets/images/2.jpg",
      "assets/images/3.jpg",
      "assets/images/4.jpg",
    ]).show();
  },
  child: Text("Open Gallery"),
)

完整示例

以下是一个完整的示例代码，展示了如何使用 avs_image 插件的各种功能：

import 'package:flutter/material.dart';
import 'package:avs_image/avs_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 HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AVSImage Demo Home Page'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const SizedBox(height: 30),

              AVSImage(
                "https://images.pexels.com/photos/378570/pexels-photo-378570.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
                radius: BorderRadius.circular(20),
                height: 200,
                zoom: true,
                zoomCloseType: ZoomCloseType.dragAndTap,
                cachedImage: false,
                zoomStyle: ZoomStyle.onTap,
                alignment: Alignment.center,
                progressIndicatorWidget: const Text("loading..."),
                errorImgWidget: const Icon(
                  Icons.error,
                  color: Colors.red,
                ),
              ),
              const SizedBox(height: 30),
              Container(
                height: 200,
                width: 300,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey[300],
                  image: DecorationImage(
                    fit: BoxFit.contain,
                    image: AVSImageProvider(
                        "https://www.svgrepo.com/show/530440/machine-vision.svg",
                        scale: 9),
                  ),
                ),
                child: const Text("SVG Image Provider"),
              ),
              const SizedBox(height: 30),
              Container(
                height: 200,
                width: 200,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey[300],
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AVSImageProvider(
                      "https://cdnuploads.aa.com.tr/uploads/Contents/2020/07/19/thumbs_b_c_24ab0f37a2ebc9b694d4c1fceeb2171c.jpg?v=130117",
                    ),
                  ),
                ),
                child: const Text("Network Image Provider"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}