Flutter图片渐变效果插件image_gradient的使用

image_gradient 插件可以用于在Flutter中给图片添加渐变效果。它最好的用例之一是为灰度图像添加颜色，例如光束效果。

Demo

您可以查看 Live Demo 来了解实际效果。

Installation

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

dependencies:
  ...
  image_gradient: ^0.0.2

然后运行 flutter pub get 来安装此插件。

Usage

基本用法如下所示：

ImageGradient(
  image: Image.asset("assets/light.png"),
  gradient: const RadialGradient(colors: [Colors.deepOrange, Colors.purpleAccent]),
)

Alternative constructors

根据不同的需求，您还可以选择以下构造函数来创建不同类型的渐变效果：

Linear Gradient 线性渐变

ImageGradient.linear(
  image: Image.asset("assets/light.png"),
  colors: const [Colors.yellow, Colors.pinkAccent],
)

Radial Gradient 径向渐变

ImageGradient.radial(
  image: Image.asset("assets/light.png"),
  colors: const [Colors.yellow, Colors.pinkAccent],
)

Sweep Gradient 扫描渐变

ImageGradient.sweep(
  image: Image.asset("assets/light.png"),
  colors: const [Colors.yellow, Colors.pinkAccent],
)

完整示例代码

下面是一个完整的例子，展示了如何在一个应用中切换不同的渐变效果：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<Gradient> exampleGradients;
  int activeGradient = 0;

  @override
  void initState() {
    super.initState();
    exampleGradients = [
      const RadialGradient(colors: [Colors.white, Colors.white]),
      const RadialGradient(colors: [Colors.blue, Colors.cyanAccent]),
      const RadialGradient(colors: [Colors.deepOrange, Colors.purpleAccent]),
      const RadialGradient(colors: [Colors.yellow, Colors.pinkAccent]),
      const LinearGradient(colors: [Colors.yellow, Colors.pinkAccent]),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: List.generate(exampleGradients.length, buildGradientButton),
            ),
            Expanded(
              child: ImageGradient(
                image: Image.asset("assets/light.png"),
                gradient: exampleGradients[activeGradient],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget buildGradientButton(int index) {
    return InkWell(
      onTap: () {
        setState(() {
          activeGradient = index;
        });
      },
      child: Container(
        width: 50,
        height: 50,
        margin: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          gradient: exampleGradients[index],
          border: Border.all(color: Colors.grey),
        ),
      ),
    );
  }
}

通过上述代码，您可以创建一个简单的Flutter应用程序，并使用 image_gradient 插件为图片添加多种渐变效果。希望这可以帮助您更好地理解和使用该插件！