Flutter图像处理插件protonimage的使用

Flutter图像处理插件protonimage的使用

简介

protonimage 是一个Flutter插件，提供了一个可自定义的图像小部件，并内置了闪烁加载效果（Shimmer Loading Effect）。它可以帮助你在Flutter应用程序中更方便地显示图像，同时为UI增添专业感。你可以轻松加载网络图片、自定义外观并控制加载过程。

支持平台

• Android: SDK 16+
• iOS: 12.0+
• Linux: 任意版本
• macOS: 10.14+
• Web: 任意版本
• Windows: Windows 10+

功能特点

• 可自定义的闪烁效果：轻松添加闪烁加载效果到你的图像。
• 灵活配置：调整高度、宽高比、圆角半径等。
• 支持网络图片：可以轻松从网络URL加载图片。
• Fit选项：通过BoxFit控制图像如何适应小部件。
• 备用背景颜色：在图片加载时指定备用背景颜色。
• 测试完善：该小部件经过单元测试，确保可靠性。

安装

你可以通过以下命令安装 protonimage：

flutter pub add protonimage

这将在你的 pubspec.yaml 文件中添加如下依赖项（请替换为最新版本）：

dependencies:
  protonimage: ^1.0.0

引入包

在Dart代码中引入 protonimage：

import 'package:protonimage/protonimage.dart';

使用示例

快速使用

以下是一个简单的示例，展示了如何快速使用 ProtonImage 小部件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Proton Image Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Proton Image Example'),
        ),
        body: Center(
          child: ProtonImage(
            path: 'https://example.com/image.jpg', // 图片URL
            height: 200, // 图片高度
            radius: 20, // 圆角半径
          ),
        ),
      ),
    );
  }
}

自定义配置

你可以通过传递更多参数来自定义 ProtonImage 小部件的外观和行为：

ProtonImage(
  path: 'https://example.com/image.jpg',
  height: 200,
  radius: 20,
  aspectRatio: 16 / 9, // 设置宽高比
  baseColor: Colors.white24, // 闪烁效果的基础颜色
  highlightColor: Colors.white54, // 闪烁效果的高亮颜色
  backgroundColor: Colors.white, // 加载时的背景颜色
)

图像叠加效果

你还可以为图像添加渐变叠加效果：

ProtonImage(
  path: 'https://example.com/image2.jpg',
  height: 200,
  radius: 20,
  overlayGradient: LinearGradient(
    begin: Alignment.bottomRight, // 渐变起点
    stops: const [0.1, 0.8], // 渐变停靠点
    colors: [
      Colors.black45.withOpacity(.1), // 渐变颜色1
      Colors.black45.withOpacity(.0), // 渐变颜色2
    ],
  ),
)

可用的渐变类型

• 线性渐变 (LinearGradient)：沿直线过渡的渐变。
• 径向渐变 (RadialGradient)：从中心向外过渡的渐变。
• 扫掠渐变 (SweepGradient)：沿着圆周过渡的渐变。

常见的宽高比

• 1:1：正方形
• 16:9：宽屏
• 4:3：标准电视
• 3:2：经典摄影
• 21:9：超宽屏
• 9:16：竖屏（适用于移动设备）
• 3:4：竖屏（适用于摄影）

完整示例Demo

以下是一个完整的示例，展示了 ProtonImage 的多种用法：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final imageUrl =
        'https://cdn.dribbble.com/users/730703/screenshots/17515984/media/4dd92322fb915b00e6a0f0f3b1d4bf6c.jpg';

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Proton Image Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Proton Image Example'),
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 快速使用
                  ProtonImage(
                    path: imageUrl,
                    height: 200,
                    radius: 20,
                  ),
                  SizedBox(height: 20),

                  // 高级用法
                  ProtonImage(
                    path: imageUrl,
                    height: 200,
                    radius: 20,
                    aspectRatio: 16 / 9,
                    baseColor: Colors.blue.withOpacity(0.3),
                    highlightColor: Colors.blue.withOpacity(0.6),
                  ),
                  SizedBox(height: 20),

                  // 图像叠加效果
                  ProtonImage(
                    path: imageUrl,
                    height: 200,
                    radius: 20,
                    aspectRatio: 16 / 9,
                    baseColor: Colors.blue.withOpacity(0.3),
                    highlightColor: Colors.blue.withOpacity(0.6),
                    overlayGradient: LinearGradient(
                      begin: Alignment.bottomRight,
                      stops: const [0.1, 0.8],
                      colors: [
                        Colors.black45.withOpacity(.1),
                        Colors.black45.withOpacity(.0),
                      ],
                    ),
                  ),
                  SizedBox(height: 20),

                  // 透明背景
                  ProtonImage(
                    path: imageUrl,
                    height: 200,
                    radius: 20,
                    backgroundColor: Colors.transparent,
                  ),
                  SizedBox(height: 20),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}