Flutter颜色调整插件color_adjust的使用

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

Flutter颜色调整插件color_adjust的使用

color_adjust 是一个扩展了 Flutter Color 类的方法集合,用于进行颜色调整。

使用

要使用这些方法,你需要导入 color_adjust 扩展,并在 Color 对象上应用这些方法。

示例:

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    Color baseColor = Colors.blue;
    Color mixColor = Colors.pink;

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("颜色调整示例"),
        ),
        body: ListView(
          children: <Widget>[
            Container(color: baseColor, height: 50),
            Container(color: baseColor.darken(0.2), height: 50),
            Container(color: baseColor.lighten(0.2), height: 50),
            Container(color: baseColor.invert(), height: 50),
            Container(color: baseColor.compliment(), height: 50),
            Container(color: baseColor.desaturate(0.2), height: 50),
            Container(color: baseColor.saturate(0.2), height: 50),
            Container(color: baseColor.mix(mixColor, 0.5), height: 50),
            Container(color: baseColor.whiten(0.5), height: 50),
            Container(color: baseColor.tone(0.5), height: 50),
            Container(color: baseColor.blacken(0.5), height: 50),
          ],
        ),
      ),
    );
  }
}

方法

该扩展添加了以下方法:

  • darken([double amount = .5]):通过提供的量(0-1)加深颜色,默认为50%。
  • lighten([double amount = .5]):通过提供的量(0-1)提亮颜色,默认为50%。
  • invert():反转颜色,产生其“负片”。它不保留亮度。如果你想保留亮度,可以使用 compliment 方法。
  • compliment():获取颜色的补色(在色轮上的相反颜色)。这类似于反转,但保持相同的亮度值。
  • desaturate([double amount = .5]):通过提供的量(0-1)去饱和颜色,默认为50%。
  • saturate([double amount = .5]):通过提供的量(0-1)饱和颜色,默认为50%。
  • mix(Color another, [double amount = 0.5]):按提供的量(0-1)混合两个颜色,默认为50%。
  • whiten([double amount = 0.5]):通过提供的量(0-1)使颜色变白,默认为50%。
  • tone([double amount = 0.5]):通过提供的量(0-1)将颜色调暗,默认为50%。
  • blacken([double amount = 0.5]):通过提供的量(0-1)使颜色变黑,默认为50%。
  • isDark:使用亮度检查颜色是否被认为是深色。
  • isBright:检查颜色是否被认为是亮色。

示例代码

以下是完整的示例代码,展示了如何使用 color_adjust 插件进行颜色调整。

import 'package:color_adjust/color_adjust.dart';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}

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

  [@override](/user/override)
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  Color baseColor = Colors.blue;
  Color mixColor = Colors.pink;
  late Color tempColor;
  TextStyle textLight = const TextStyle(color: Colors.white);
  TextStyle textDark = const TextStyle(color: Colors.black);

  void changeColor(Color color) {
    setState(() {
      tempColor = color;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("颜色调整示例"),
      ),
      body: Column(
        children: [
          Wrap(
            runSpacing: 10,
            spacing: 10,
            runAlignment: WrapAlignment.center,
            children: <Widget>[
              ElevatedButton(
                style: ElevatedButton.styleFrom(backgroundColor: baseColor),
                child: Text(
                  '选择基础颜色',
                  style: baseColor.isBright ? textDark : textLight,
                ),
                onPressed: () {
                  tempColor = baseColor;
                  showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: const Text('选择颜色'),
                        content: SingleChildScrollView(
                          child: ColorPicker(
                            pickerColor: tempColor,
                            onColorChanged: changeColor,
                            colorPickerWidth: 300.0,
                            pickerAreaHeightPercent: 0.7,
                            enableAlpha: true,
                            displayThumbColor: true,
                            paletteType: PaletteType.hsv,
                            pickerAreaBorderRadius: const BorderRadius.only(
                              topLeft: Radius.circular(2.0),
                              topRight: Radius.circular(2.0),
                            ),
                          ),
                        ),
                        actions: <Widget>[
                          TextButton(
                            child: const Text('确定'),
                            onPressed: () {
                              setState(() {
                                baseColor = tempColor;
                              });
                              Navigator.of(context).pop();
                            },
                          ),
                        ],
                      );
                    },
                  );
                },
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(backgroundColor: mixColor),
                child: Text(
                  '选择混合颜色',
                  style: mixColor.isBright ? textDark : textLight,
                ),
                onPressed: () {
                  tempColor = mixColor;
                  showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: const Text('选择颜色'),
                        content: SingleChildScrollView(
                          child: ColorPicker(
                            pickerColor: tempColor,
                            onColorChanged: changeColor,
                            colorPickerWidth: 300.0,
                            pickerAreaHeightPercent: 0.7,
                            enableAlpha: true,
                            displayThumbColor: true,
                            paletteType: PaletteType.hsv,
                            pickerAreaBorderRadius: const BorderRadius.only(
                              topLeft: Radius.circular(2.0),
                              topRight: Radius.circular(2.0),
                            ),
                          ),
                        ),
                        actions: <Widget>[
                          TextButton(
                            child: const Text('确定'),
                            onPressed: () {
                              setState(() {
                                mixColor = tempColor;
                              });
                              Navigator.of(context).pop();
                            },
                          ),
                        ],
                      );
                    },
                  );
                },
              ),
            ],
          ),
          Expanded(
            child: getList(),
          ),
        ],
      ),
    );
  }

  Widget getList() {
    return ListView(
      children: <Widget>[
        Builder(builder: (context) {
          return Row(
            children: [
              Expanded(
                child: Container(
                    color: baseColor.mix(mixColor, 0.5),
                    alignment: Alignment.center,
                    height: 50,
                    child: Text(
                      "混合默认",
                      style: baseColor.mix(mixColor, 0.5).isDark
                          ? textLight
                          : textDark,
                    )),
              ),
              Expanded(
                child: Container(
                    color: baseColor.mix(mixColor, 0.25),
                    alignment: Alignment.center,
                    height: 50,
                    child: Text(
                      "混合25%",
                      style: baseColor.mix(mixColor, 0.25).isDark
                          ? textLight
                          : textDark,
                    )),
              ),
              Expanded(
                child: Container(
                    color: baseColor.mix(mixColor, 0.75),
                    alignment: Alignment.center,
                    height: 50,
                    child: Text(
                      "混合75%",
                      style: baseColor.mix(mixColor, 0.75).isDark
                          ? textLight
                          : textDark,
                    )),
              ),
            ],
          );
        }),
        Builder(builder: (context) {
          return Row(
            children: [
              Expanded(
                child: Container(
                    color: baseColor.blend(mixColor),
                    alignment: Alignment.center,
                    height: 50,
                    child: Text(
                      "融合默认",
                      style: baseColor.blend(mixColor).isDark
                          ? textLight
                          : textDark,
                    )),
              ),
              Expanded(
                child: Container(
                    color: baseColor.blend(mixColor, .25),
                    alignment: Alignment.center,
                    height: 50,
                    child: Text(
                      "融合25%",
                      style: baseColor.blend(mixColor, .25).isDark
                          ? textLight
                          : textDark,
                    )),
              ),
              Expanded(
                child: Container(
                    color: baseColor.blend(mixColor, .75),
                    alignment: Alignment.center,
                    height: 50,
                    child: Text(
                      "融合75%",
                      style: baseColor.blend(mixColor, .75).isDark
                          ? textLight
                          : textDark,
                    )),
              ),
            ],
          );
        }),
        Builder(builder: (context) {
          final Color darkened = baseColor.darken(0.2);
          return Container(
              color: darkened,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "加深",
                style: darkened.isDark ? textLight : textDark,
              ));
        }),
        Builder(builder: (context) {
          final Color lightened = baseColor.lighten(0.2);
          return Container(
              color: lightened,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "提亮",
                style: lightened.isDark ? textLight : textDark,
              ));
        }),
        Builder(builder: (context) {
          final Color inverted = baseColor.invert();
          return Container(
              color: inverted,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "反转",
                style: inverted.isDark ? textLight : textDark,
              ));
        }),
        Builder(builder: (context) {
          final Color desaturated = baseColor.desaturate(.5);
          return Container(
              color: desaturated,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "去饱和",
                style: desaturated.isDark ? textLight : textDark,
              ));
        }),
        Builder(builder: (context) {
          final Color saturated = baseColor.saturate(.5);
          return Container(
              color: saturated,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "饱和",
                style: saturated.isDark ? textLight : textDark,
              ));
        }),
        Builder(builder: (context) {
          final Color complimented = baseColor.compliment();
          return Container(
              color: complimented,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "补色",
                style: complimented.isDark ? textLight : textDark,
              ));
        }),
        Builder(builder: (context) {
          final Color whitened = baseColor.whiten(0.5);
          return Container(
              color: whitened,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "变白",
                style: whitened.isDark ? textLight : textDark,
              ));
        }),
        Builder(builder: (context) {
          final Color toned = baseColor.tone(0.5);
          return Container(
              color: toned,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "调暗",
                style: toned.isDark ? textLight : textDark,
              ));
        }),
        Builder(builder: (context) {
          final Color blackened = baseColor.blacken(0.5);
          return Container(
              color: blackened,
              alignment: Alignment.center,
              height: 50,
              child: Text(
                "变黑",
                style: blackened.isDark ? textLight : textDark,
              ));
        }),
      ],
    );
  }
}

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

1 回复

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


当然,关于Flutter中color_adjust插件的使用,这里是一个简单的示例代码案例,展示了如何使用该插件来调整颜色。color_adjust插件提供了一系列方法来调整颜色的亮度、对比度、饱和度等属性。

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

dependencies:
  flutter:
    sdk: flutter
  color_adjust: ^x.y.z  # 请替换为最新版本号

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

接下来,在你的Dart文件中使用color_adjust插件。以下是一个完整的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Color Adjust Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 原始颜色
              ColorBox(color: Colors.blue),

              // 调整亮度
              ColorBox(
                color: adjustColorBrightness(Colors.blue, 0.2),
                title: 'Brightness +20%',
              ),

              // 调整对比度
              ColorBox(
                color: adjustColorContrast(Colors.blue, 0.5),
                title: 'Contrast +50%',
              ),

              // 调整饱和度
              ColorBox(
                color: adjustColorSaturation(Colors.blue, 0.8),
                title: 'Saturation +80%',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 显示颜色的自定义Widget
class ColorBox extends StatelessWidget {
  final Color color;
  final String? title;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        if (title != null) Text(title!, style: TextStyle(fontSize: 16)),
        Container(
          width: 100,
          height: 100,
          color: color,
        ),
      ],
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中展示了原始颜色以及经过亮度、对比度和饱和度调整后的颜色。注意,adjustColorBrightnessadjustColorContrastadjustColorSaturation函数是假设的,因为color_adjust插件的具体API可能会有所不同。你需要根据实际的插件文档来调整这些函数调用。

然而,color_adjust插件可能提供的是类似ColorAdjust.brightnessColorAdjust.contrastColorAdjust.saturation这样的方法。以下是一个更贴近实际的假设示例:

import 'package:flutter/material.dart';
import 'package:color_adjust/color_adjust.dart' as colorAdjust;

// ... (其他代码保持不变)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Color Adjust Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 原始颜色
              ColorBox(color: Colors.blue),

              // 调整亮度
              ColorBox(
                color: colorAdjust.adjustBrightness(Colors.blue, 0.2),
                title: 'Brightness +20%',
              ),

              // 调整对比度
              ColorBox(
                color: colorAdjust.adjustContrast(Colors.blue, 0.5),
                title: 'Contrast +50%',
              ),

              // 调整饱和度
              ColorBox(
                color: colorAdjust.adjustSaturation(Colors.blue, 0.8),
                title: 'Saturation +80%',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

请注意,上述代码中的colorAdjust.adjustBrightnesscolorAdjust.adjustContrastcolorAdjust.adjustSaturation函数是假设的,你需要查阅color_adjust插件的实际文档来获取正确的API调用方式。通常,插件的README文件或官方文档会提供详细的用法说明和示例代码。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!