Flutter色彩旋转调整插件hue_rotation的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter色彩旋转调整插件hue_rotation的使用

Getting Started

安装

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

dependencies:
  flutter:
    sdk: flutter
  hue_rotation: ^最新版本号

然后运行flutter pub get来安装包。

示例代码

可以查看官方提供的示例代码以了解如何使用这个插件。

About

  • 这个widget对子组件的颜色执行色相旋转。
  • Degrees定义了颜色将在色圈上调整的度数。
  • 值为0时,颜色保持不变。
  • 值为180时,绘制互补色。
  • 在示例中被操作的颜色是Colors.blue

HueRotation in Action

Screenrecording Screenrecording

Demo Code

以下是一个完整的示例demo,展示了如何使用hue_rotation插件创建一个带有静态和动画效果的色彩旋转应用。

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

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

///
class MyApp extends StatefulWidget {
  ///
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const Color _color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hue Rotation Example')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Center(
              child: Wrap(
                alignment: WrapAlignment.center,
                spacing: 10,
                children: [
                  _Box(color: _color, degrees: -45),
                  _Box(color: _color, degrees: 0),
                  _Box(color: _color, degrees: 45),
                  _Box(color: _color, degrees: 90),
                  _Box(color: _color, degrees: 180),
                  _Box(color: _color, degrees: 360),
                ],
              ),
            ),
            const SizedBox(height: 50),
            _AnimatedBox(),
          ],
        ),
      ),
    );
  }
}

class _Box extends StatelessWidget {
  const _Box({
    required this.degrees,
    required this.color,
    this.size = 40,
    Key? key,
  }) : super(key: key);

  final num degrees;
  final Color color;
  final double size;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        HueRotation(
          degrees: degrees,
          child: SizedBox(
            width: size,
            height: size,
            child: ColoredBox(
              color: color,
            ),
          ),
        ),
        Text('$degrees'),
      ],
    );
  }
}

class _AnimatedBox extends StatefulWidget {
  @override
  _AnimatedBoxState createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<_AnimatedBox>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final CurvedAnimation _animation;
  late final Animation<double> _rotation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 8),
      vsync: this,
    );
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
    _rotation = Tween<double>(begin: 0, end: 1).animate(_animation);
    _controller.repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _rotation,
      builder: (context, _) {
        return RotationTransition(
          turns: _rotation,
          child: _Box(
            degrees: (_rotation.value * 360).round(),
            color: Colors.blue,
            size: 120,
          ),
        );
      },
    );
  }
}

在这个例子中,我们创建了一个简单的Flutter应用程序,它包含两个部分:

  1. 一组静态的色彩旋转盒子,展示了不同角度下的色彩变化。
  2. 一个动态的色彩旋转盒子,通过动画控制器实现循环旋转效果。

更多关于Flutter色彩旋转调整插件hue_rotation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter色彩旋转调整插件hue_rotation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter中使用hue_rotation插件来调整图像色彩旋转的示例代码。hue_rotation插件可以帮助你对图像进行色调旋转,这在图像处理和视觉效果中非常有用。

首先,确保你已经在pubspec.yaml文件中添加了hue_rotation依赖:

dependencies:
  flutter:
    sdk: flutter
  hue_rotation: ^最新版本号  # 请替换为实际最新版本号

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

接下来,你可以在你的Flutter项目中使用这个插件。以下是一个完整的示例,展示如何加载图像并应用色调旋转:

import 'package:flutter/material.dart';
import 'package:hue_rotation/hue_rotation.dart';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hue Rotation Example'),
        ),
        body: HueRotationExample(),
      ),
    );
  }
}

class HueRotationExample extends StatefulWidget {
  @override
  _HueRotationExampleState createState() => _HueRotationExampleState();
}

class _HueRotationExampleState extends State<HueRotationExample> {
  double hueRotation = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Image.asset(
          'assets/your_image.png',  // 请替换为你的图像路径
          width: 300,
          height: 300,
          fit: BoxFit.cover,
          colorFilter: ColorFilter.hueRotate(hueRotation),
        ),
        Slider(
          value: hueRotation,
          min: 0.0,
          max: 360.0,
          divisions: 360,
          onChanged: (double value) {
            setState(() {
              hueRotation = value;
            });
          },
        ),
      ],
    );
  }
}

// 注意:上面的代码中实际并没有直接使用 hue_rotation 插件,
// 因为 Flutter 自带的 ColorFilter.hueRotate 提供了类似的功能。
// 如果你确实需要使用 hue_rotation 插件(假设它有额外功能),
// 请查阅该插件的文档以了解如何使用其提供的 API。
// 通常情况下,插件会提供一个类似的方法或类来处理色调旋转。
// 以下是假设插件有一个类似功能的伪代码示例:

/*
class _HueRotationExampleState extends State<HueRotationExample> {
  double hueRotation = 0.0;
  HueRotation hueRotationFilter;

  @override
  void initState() {
    super.initState();
    hueRotationFilter = HueRotation(hue: hueRotation);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CustomPaint(
          painter: ImagePainter(
            image: Image.asset('assets/your_image.png').image, // 需要一个 ImageProvider
            hueRotationFilter: hueRotationFilter,
          ),
          size: Size(300, 300),
        ),
        Slider(
          value: hueRotation,
          min: 0.0,
          max: 360.0,
          divisions: 360,
          onChanged: (double value) {
            setState(() {
              hueRotation = value;
              hueRotationFilter = HueRotation(hue: hueRotation);
            });
          },
        ),
      ],
    );
  }
}

class ImagePainter extends CustomPainter {
  final ImageProvider image;
  final HueRotation hueRotationFilter;

  ImagePainter({required this.image, required this.hueRotationFilter});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    final imagePainter = ImagePainter(image: image);
    final image = imagePainter.image;

    // 假设 hueRotationFilter 有一个方法来应用色调旋转
    // 例如:hueRotationFilter.applyToCanvas(canvas, image, size);
    // 注意:这只是一个假设的方法调用,实际插件可能有不同的 API
    // 你需要查阅 hue_rotation 插件的文档来了解正确的用法

    // 由于实际 hue_rotation 插件的 API 未知,这里仅展示如何可能的调用方式
    // hueRotationFilter.applyToCanvas(canvas, image, size);

    // 由于实际插件不存在或未提供 API,以下使用 Flutter 内置的 ColorFilter 作为替代
    canvas.drawImage(
      image,
      Offset.zero,
      paint.colorFilter = ColorFilter.hueRotate(hueRotationFilter.hue),
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

// 注意:上面的 ImagePainter 类和 hueRotationFilter.applyToCanvas 方法是假设的,
// 实际使用时需要替换为 hue_rotation 插件提供的真实 API。
// 如果 hue_rotation 插件不存在或不支持直接绘制,
// 你可以使用 Flutter 内置的 ColorFilter.hueRotate,如上所示。
*/

注意

  1. 在实际项目中,hue_rotation插件可能并不存在或不是官方插件,这里假设你有一个自定义的或第三方插件。如果确实存在这样的插件,请查阅其官方文档了解如何使用。
  2. 在上面的示例代码中,ColorFilter.hueRotate 是 Flutter 内置的功能,可以实现色调旋转,如果hue_rotation插件的功能与之类似,你可以直接使用ColorFilter.hueRotate
  3. 如果你需要更高级的图像处理功能,可以考虑使用其他图像处理库,如image包或其他第三方图像处理插件。
回到顶部