Flutter颜色处理插件flutter_color的使用

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

Flutter颜色处理插件flutter_color的使用

Flutter中的flutter_color包扩展了Color类,可以用于创建、转换、比较颜色并在UI中使用。它还支持编辑颜色的功能。

Getting Started

在你的Flutter项目中添加依赖:

dependencies:
  flutter_color: any

安装完成后,你就可以开始使用这个强大的颜色处理工具了。

使用示例

HexColor

通过十六进制字符串创建颜色,支持带#和不带#的形式,也支持透明度的设置。

// HexColor
assert(HexColor('000000')    == Color(0xFF000000));
assert(HexColor('#000000')   == Color(0xFF000000));
assert(HexColor('FFFFFFFF')  == Color(0xFFFFFFFF));
assert(HexColor('#B1000000') == Color(0xB1000000));
assert(HexColor('#B1000000').hexColor, '#B1000000');

HslColor

通过HSL(色相、饱和度、亮度)参数创建颜色。

// HslColor
assert(HslColor(164, 100, 88) == Color(0xFFC2FFEF));

XyzColor

通过XYZ色彩空间参数创建颜色。

// HyzColor
assert(XyzColor(0.1669, 0.2293, 0.0434) == Color(0xFF659027));

CielabColor

通过CIELAB色彩空间参数创建颜色。

/// CielabColor
assert(CielabColor(36.80, 55.20, -95.61) == Color(0xFF4832F7));

调整颜色深浅

可以通过.lighter().darker()方法调整颜色的亮度。

// [black -> white] lighter by 100 percents
assert(Color(0xFF000000).lighter(100), Color(0xFFFFFFFF));
// Another lighter example
assert(Color.fromARGB(255, 64, 64, 64).lighter(50),   Color.fromARGB(255, 192, 192, 192));

// [white -> grey] darker by 50 percents
assert(Color(0xFF000000).darker(50), Color(0xFF808080));
// Another darker example
assert(Color.fromARGB(255, 192, 192, 192).darker(25), Color.fromARGB(255, 128, 128, 128));

颜色混合

还可以通过.mix()方法混合两种颜色。

// Mix with other colors
Color(0xFFFF0000).mix(Color(0xFF00FF00), .25) // -> Color(0xFFBF3F00)

示例Demo

下面是一个完整的Flutter应用示例,展示了如何在UI中使用这些颜色创建方法。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Padding(
              padding: EdgeInsets.all(64),
              child: Column(
                children: <Widget>[
                  Text(
                    'HexColor',
                    style: TextStyle(color: HexColor('#ff0000')),
                  ),
                  Text(
                    'HslColor',
                    style: TextStyle(color: HslColor(120, 100, 50)),
                  ),
                  Text(
                    'XyzColor',
                    style: TextStyle(color: XyzColor(14.31, 6.06, 71.42)),
                  ),
                  Text(
                    'CielabColor',
                    style: TextStyle(color: CielabColor(36.80, 55.20, -95.61)),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
}

通过上述代码,你可以看到如何轻松地在Flutter应用程序中使用flutter_color插件来处理各种颜色需求。希望这些信息对你有所帮助!


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

1 回复

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


当然,flutter_color 是一个在 Flutter 中用于处理和转换颜色的插件。以下是一个关于如何使用 flutter_color 插件的示例代码案例。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_color: ^3.0.0  # 请根据最新版本号进行修改

然后,运行 flutter pub get 来获取依赖。

接下来,在你的 Dart 文件中导入 flutter_color 包,并使用它来处理颜色。以下是一个完整的示例:

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

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

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

class ColorDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Color originalColor = Colors.blue;

    // 使用 flutter_color 包中的方法来处理颜色
    Color darkerColor = originalColor.darken(10);  // 变暗10%
    Color lighterColor = originalColor.lighten(20);  // 变亮20%
    Color saturatedColor = originalColor.saturate(30);  // 增加饱和度30%
    Color desaturatedColor = originalColor.desaturate(30);  // 减少饱和度30%
    Color grayscaleColor = originalColor.toGrayscale();  // 转为灰度
    Color invertedColor = originalColor.invertColors();  // 颜色反转
    Color hexColor = Color.fromHex("#FF5733");  // 从十六进制字符串创建颜色

    // 使用 HexColor 类来处理十六进制颜色
    HexColor hexColorClass = HexColor("#33FF57");
    Color hexColorFromClass = hexColorClass.toColor();

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Color Plugin Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ColorBox(color: originalColor, label: 'Original Color'),
            ColorBox(color: darkerColor, label: 'Darker Color'),
            ColorBox(color: lighterColor, label: 'Lighter Color'),
            ColorBox(color: saturatedColor, label: 'Saturated Color'),
            ColorBox(color: desaturatedColor, label: 'Desaturated Color'),
            ColorBox(color: grayscaleColor, label: 'Grayscale Color'),
            ColorBox(color: invertedColor, label: 'Inverted Color'),
            ColorBox(color: hexColor, label: 'Hex Color'),
            ColorBox(color: hexColorFromClass, label: 'Hex Color from Class'),
          ],
        ),
      ),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      child: Column(
        children: <Widget>[
          Container(
            width: 100,
            height: 100,
            color: color,
          ),
          SizedBox(height: 5),
          Text(label),
        ],
      ),
    );
  }
}

// HexColor 类用于从十六进制字符串创建颜色
class HexColor extends Color {
  static int _getColorFromHex(String hex) {
    hex = hex.toUpperCase().replaceAll("#", "");
    if (hex.length == 6) {
      hex = "FF" + hex;
    }
    return int.parse(hex, radix: 16);
  }

  HexColor(String hex) : super(_getColorFromHex(hex));
}

在这个示例中,我们展示了如何使用 flutter_color 包中的方法来调整颜色的亮度、饱和度,以及将颜色转为灰度或反转颜色。同时,我们还展示了如何从十六进制字符串创建颜色,以及如何使用自定义的 HexColor 类来处理十六进制颜色。

请注意,flutter_color 插件本身可能提供了更多的功能,上述示例仅涵盖了其中一些常见用法。你可以查阅插件的官方文档以获取更多详细信息。

回到顶部