Flutter颜色合并插件color_merge的使用

Flutter颜色合并插件color_merge的使用

color_merge

一个轻量级的Flutter包，提供了颜色合并工具，可以无缝地混合颜色。它允许开发者模拟将颜色堆叠在彼此之上的效果，忽略透明度，并根据应用程序的主题动态适应颜色。

✨ 特性

• 🎨 合并颜色：混合两种颜色以模拟堆叠效果，产生完全不透明的结果。
• ⚪ 白色合并：简化的方法来将颜色与白色合并。
• ⚫ 黑色合并：简化的方法来将颜色与黑色合并。

🚀 安装

在pubspec.yaml文件中添加color_merge依赖：

dependencies:
  color_merge: ^1.0.0

然后运行：

flutter pub get

🛠️ 使用

🔄 合并两种颜色

将两种颜色混合以模拟一种颜色堆叠在另一种之上的效果。

传统方式

需要包裹在一个容器中才能达到预期效果：

Container(
  width: 50,
  height: 50,
  color: Colors.white,
  child: Container(
    color: Colors.purple.withOpacity(0.5),
  ),
);

color_merge方式

用更简单、更清晰的方式实现相同的效果：

Container(
  width: 50,
  height: 50,
  color: Colors.purple.withOpacity(0.5).merge(Colors.lightBlue),
);

⚪ 白色合并 & ⚫ 黑色合并

轻松将颜色与Colors.white或Colors.black合并：

final color = Colors.green.withOpacity(0.3);

// 与白色合并
final whiteMerged = color.whiteMerge();

// 与黑色合并
final blackMerged = color.blackMerge();

📖 方法

🔹 Color.merge(Color otherColor)

将当前颜色与另一个颜色混合，生成一个新的完全不透明的颜色。

示例：

final baseColor = Colors.white;
final overlayColor = Colors.red.withOpacity(0.5);

final result = overlayColor.merge(baseColor);

结果：

如果overlayColor是Colors.red.withOpacity(0.5)且baseColor是Colors.white，那么结果颜色将是两种颜色的完全不透明混合。

注意：当当前颜色的透明度小于1.0时，合并才有效。

📜 许可证

该包采用MIT许可证。你可以自由地在个人项目或商业项目中使用它。

🤝 贡献

欢迎贡献！如果你遇到任何问题或有改进建议，请随时提交问题或拉取请求。

👤 作者

由Hisham开发。
欢迎联系以获取支持、反馈或合作！

🔗 链接

• GitHub仓库
• Pub.dev包

示例代码

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

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: const MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 50,
          height: 50,
          color: Colors.purple.withOpacity(0.5).merge(Colors.lightBlue),
        ),
        const SizedBox(
          width: 5,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.purple.withOpacity(0.5).whiteMerge(),
        ),
        const SizedBox(
          width: 5,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.purple.withOpacity(0.5).blackMerge(),
        ),
      ],
    )));
  }
}