Flutter颜色处理插件flutter_color_plugin的使用

Flutter颜色处理插件flutter_color_plugin的使用

简介

flutter_color_plugin 是一个用于Flutter的颜色解析包，它可以在iOS和Android平台上工作。这个插件可以帮助你更方便地处理颜色，支持从字符串格式的颜色值（如十六进制颜色）转换为Flutter的Color对象或整数颜色值。

快速开始

获取颜色

你可以使用ColorUtil.color()方法将十六进制颜色字符串转换为Color对象。无论是带#号还是不带#号的十六进制颜色字符串都可以被正确解析。

// 从十六进制字符串获取Color对象
Color color1 = ColorUtil.color('#f2f2f2'); // 带#号
Color color2 = ColorUtil.color('f2f2f2');  // 不带#号
print(color1 == color2); // 输出: true

// 支持带透明度的十六进制颜色
Color color3 = ColorUtil.color('#a1FF5733'); // 带#号
Color color4 = ColorUtil.color('a1FF5733');  // 不带#号
print(color3 == color4); // 输出: true

获取整数颜色

如果你需要将十六进制颜色字符串转换为整数值，可以使用ColorUtil.intColor()方法。该方法同样支持带#号和不带#号的十六进制颜色字符串。

// 从十六进制字符串获取整数颜色值
int colorInt1 = ColorUtil.intColor('#f2f2f2');   // 带#号
int colorInt2 = ColorUtil.intColor('f2f2f2');    // 不带#号
int colorInt3 = ColorUtil.intColor('#fff2f2f2'); // 带#号，带透明度
int colorInt5 = ColorUtil.intColor('fff2f2f2');  // 不带#号，带透明度

完整示例Demo

下面是一个完整的Flutter应用示例，展示了如何使用flutter_color_plugin来处理颜色：

import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart'; // 导入插件

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color _color1;
  Color _color2;
  int _intColor1;
  int _intColor2;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化颜色
    _color1 = ColorUtil.color('#f2f2f2'); // 从十六进制字符串获取Color对象
    _color2 = ColorUtil.color('a1FF5733'); // 从十六进制字符串获取带透明度的Color对象
    _intColor1 = ColorUtil.intColor('#f2f2f2'); // 从十六进制字符串获取整数颜色值
    _intColor2 = ColorUtil.intColor('a1FF5733'); // 从十六进制字符串获取带透明度的整数颜色值
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Color Plugin Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: _color1, // 使用Color对象设置背景色
              child: Center(
                child: Text(
                  'Color1: #f2f2f2',
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
            SizedBox(height: 20),
            Container(
              width: 100,
              height: 100,
              color: _color2, // 使用带透明度的Color对象设置背景色
              child: Center(
                child: Text(
                  'Color2: #a1FF5733',
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Int Color1: $_intColor1', // 显示整数颜色值
              style: TextStyle(fontSize: 16),
            ),
            Text(
              'Int Color2: $_intColor2', // 显示带透明度的整数颜色值
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}