Flutter色彩处理插件hue_craft的使用

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

Flutter色彩处理插件hue_craft的使用

hue_craft 是一个用于在 Flutter 中构建自定义颜色选择器的简单包。

示例

下图展示了 hue_craft 插件提供的两个颜色选择器的示例:

包含的部件

hue_craft 包包含以下部件:

  • HorizontalHuePicker
  • VerticalHuePicker
  • HorizontalOpacityPicker
  • VerticalOpacityPicker
  • SaturationValuePicker

如果你想要为这些部件构建一个自定义的滑块(或选择器),你可以通过实现 CustomPainter 类来完成。这允许你设计一个与你的独特风格匹配的滑块。要实现这一点,你需要:

  1. 创建一个类,例如 CustomThumb,它扩展 CustomPainter
  2. 实现 paintshouldRepaint 方法来定义滑块(或选择器)的外观。
class SquareThumbPainter extends CustomPainter {
  final double width;
  final double height;
  final Color squareColor;
  final double borderWidth;

  SquareThumbPainter({
    required this.width,
    required this.height,
    required this.squareColor,
    this.borderWidth = 2.0,
  });

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    // 填充画笔
    final Paint fillPaint = Paint()..color = squareColor;
    // 边框画笔
    final Paint borderPaint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth;

    // 绘制矩形
    final Rect rect = Rect.fromCenter(
      center: Offset(size.width / 2, size.height / 2),
      width: width,
      height: height,
    );
    canvas.drawRect(rect, fillPaint); // 绘制填充矩形
    canvas.drawRect(rect, borderPaint); // 绘制边框矩形
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

现在你可以将其实例传递给任何由该包提供的部件。例如:

HorizontalHuePicker(
  customThumbPainter: SquareThumbPainter(...),
  ...
)

你也可以对其他部件执行相同的操作。

完整示例

以下是完整的示例代码,展示了如何使用 hue_craft 插件。

import 'package:flutter/material.dart';

import 'utils/utils.dart';

import 'dialog/color_picker_one.dart';
import 'dialog/color_picker_two.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text(
          'Example',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20
          ),
        ),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                showDialogBox(
                  context: context,
                  child: const ColorPickerOneDialog()
                );
              },
              child: const Text(
                "Show color picker one"
              ),
            ),
            ElevatedButton(
              onPressed: () {
                showDialogBox(
                  context: context,
                  child: const ColorPickerTwoDialog()
                );
              },
              child: const Text(
                "Show color picker two"
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用hue_craft插件进行色彩处理的示例代码。hue_craft插件允许你调整颜色的色调、饱和度、亮度等属性,非常适合需要复杂色彩操作的应用。

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

dependencies:
  flutter:
    sdk: flutter
  hue_craft: ^最新版本号  # 请替换为实际发布的最新版本号

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

接下来,我们来看一个完整的示例,展示如何使用hue_craft插件来调整颜色:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hue Craft Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HueCraftDemo(),
    );
  }
}

class HueCraftDemo extends StatefulWidget {
  @override
  _HueCraftDemoState createState() => _HueCraftDemoState();
}

class _HueCraftDemoState extends State<HueCraftDemo> {
  Color originalColor = Colors.red;
  Color adjustedColor = Colors.red;
  double hue = 0.0;
  double saturation = 1.0;
  double lightness = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hue Craft Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ColorBox(color: originalColor, label: 'Original Color'),
            SizedBox(height: 16.0),
            ColorBox(color: adjustedColor, label: 'Adjusted Color'),
            SizedBox(height: 32.0),
            Slider(
              value: hue,
              min: 0.0,
              max: 1.0,
              divisions: 10,
              label: 'Hue',
              onChanged: (newValue) {
                setState(() {
                  hue = newValue;
                  adjustedColor = HslColor.fromColor(originalColor)
                      .withHue(hue * 360)
                      .toColor();
                });
              },
            ),
            Slider(
              value: saturation,
              min: 0.0,
              max: 1.0,
              divisions: 10,
              label: 'Saturation',
              onChanged: (newValue) {
                setState(() {
                  saturation = newValue;
                  adjustedColor = HslColor.fromColor(originalColor)
                      .withSaturation(saturation)
                      .toColor();
                });
              },
            ),
            Slider(
              value: lightness,
              min: 0.0,
              max: 1.0,
              divisions: 10,
              label: 'Lightness',
              onChanged: (newValue) {
                setState(() {
                  lightness = newValue;
                  adjustedColor = HslColor.fromColor(originalColor)
                      .withLightness(lightness)
                      .toColor();
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

class ColorBox extends StatelessWidget {
  final Color color;
  final String label;

  ColorBox({required this.color, required this.label});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(label),
        Container(
          width: 100,
          height: 100,
          color: color,
        ),
      ],
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含了三个滑块用于调整色调(Hue)、饱和度(Saturation)和亮度(Lightness)。我们使用HslColor类(来自hue_craft插件)来处理这些调整,并实时更新显示的颜色。

注意,HslColor.fromColor(originalColor)将RGB颜色转换为HSL颜色,然后我们使用.withHue().withSaturation().withLightness()方法来调整HSL值,并最终使用.toColor()方法将HSL颜色转换回RGB颜色以供显示。

你可以根据实际需求进一步扩展这个示例,比如添加更多的颜色操作功能或者优化用户界面。

回到顶部