Flutter颜色转换插件from_css_color的使用

介绍

From CSS Color 是一个用于创建Flutter Color 实例的包，它可以从符合 CSS Color Module Level 3 规范的CSS颜色字符串中生成。支持Hex、RGB(A)、HSL(A) 和 X11 关键字。

此外，它还提供了从 Color 到CSS颜色字符串的反向转换功能，通过扩展方法 toCssColor() 可以实现这一功能。

使用方法

添加依赖

要使用此插件，请将 from_css_color 作为依赖项添加到项目的 pubspec.yaml 文件中：

dependencies:
  from_css_color: ^最新版本号

导入库

在Dart文件中导入该库：

import 'package:from_css_color/from_css_color.dart';

示例代码

创建颜色实例

从Hex创建

var hex = fromCssColor('#fbafba'); // Color(0xFFFBAFBA)
var hexShort = fromCssColor('#fba'); // Color(0xFFFFBBAA)
var hexAlpha = fromCssColor('#fbafbafa'); // Color(0xFAFBAFBA)
var hexAlphaShort = fromCssColor('#fbaa'); // Color(0xAAFFBBAA)

从RGB创建

var rgb = fromCssColor('rgb(100, 5, 32)'); // Color(0xFF640520)
var rgbWithPercents = fromCssColor('rgb(110%, 0%, 0%)'); // Color(0xFFFF0000)
var rgba = fromCssColor('rgb(110%, 0%, 0%, 0.5)'); // Color(0x7FFF0000)

从HSL创建

var hsl = fromCssColor('hsl(100,50%,10%)'); // Color(0xFF15260C)
var hsla = fromCssColor('hsla(-120,100%,50%, .5)'); // Color(0x7F0000FF)

使用X11关键字创建

var navy = fromCssColor('navy'); // Color(0xFF000080)
var violet = fromCssColor('violet'); // Color(0xFFEE82EE)
var transparent = fromCssColor('transparent'); // Color(0x00000000)

颜色转换为CSS字符串

var hexCss = Color(0xFFFBAFBA).toCssString(); // '#fbafba'
var hexShortCss = Color(0xFFBBAAFF).toCssString(); // '#baf'
var hexWithAlphaCss = Color(0xEFFFBBAA).toCssString(); // '#ffbbaaef'
var rgbCss = Color(0xFFFFFFFF).toCssString(format: CssColorString.rgb); // 'rgb(255,255,255)'
var rgbaCss = Color(0x7FFFFFFF).toCssString(format: CssColorString.rgb); // 'rgba(255,255,255,0.5)'

检查颜色字符串的正确性

var checkCorrectHex = isCssColor('#fbafba'); // true
var checkIncorrectHex = isCssColor('#f'); // false

var checkCorrectRgb = isCssColor('rgb(100, 5, 32)'); // true
var checkIncorrectRgb = isCssColor('rgb(100,100)'); // false

var checkCorrectHsl = isCssColor('hsl(100,50%,10%)'); // true
var checkIncorrectHsl = isCssColor('hsl(100,100)'); // false

var checkNavy = isCssColor('navy'); // true
var checkViolet = isCssColor('violet'); // true
var checkTransparent = isCssColor('transparent'); // true

完整示例Demo

下面是一个完整的Flutter应用示例，展示了如何使用 from_css_color 插件来设置容器的颜色，并将其转换回CSS颜色字符串。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('From CSS Color Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 100,
                height: 100,
                color: fromCssColor('#ff00aa'), // Hex color
              ),
              SizedBox(height: 20),
              Container(
                width: 100,
                height: 100,
                color: fromCssColor('rgb(100, 5, 32)'), // RGB color
              ),
              SizedBox(height: 20),
              Container(
                width: 100,
                height: 100,
                color: fromCssColor('hsl(100,50%,10%)'), // HSL color
              ),
              SizedBox(height: 20),
              Container(
                width: 100,
                height: 100,
                color: fromCssColor('navy'), // X11 keyword
              ),
              SizedBox(height: 20),
              TextButton(
                onPressed: () {
                  final color = const Color(0xFFFBAFBA);
                  print('Color to CSS string: ${color.toCssString()}');
                },
                child: Text('Convert Color to CSS String'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何使用 from_css_color 插件来创建不同类型的颜色实例，并将这些颜色应用于Flutter小部件中。同时，还提供了一个按钮来演示如何将Flutter Color 对象转换为CSS颜色字符串并打印出来。