Flutter图标定制插件icon_craft的使用

Flutter图标定制插件icon_craft的使用

IconCraft 是一个 Flutter 插件，旨在扩展标准 Icon 小部件的功能。它允许开发者通过对齐和缩放选项将两个图标组合成一个单一的小部件。

特性

• 边框：添加可自定义的边框到你的图标，配置颜色、宽度和样式。
• 辅助图标：在基础图标上添加一个辅助图标，并控制其对齐方式和相对大小，非常适合构建创意图标设计。
• 灵活对齐：可以精确地定位辅助图标相对于主图标的相对位置，适用于各种UI设计需求。

安装

要开始使用 IconCraft，在你的 Flutter 项目中将其添加到 pubspec.yaml 文件：

dependencies:
  icon_craft: ^0.1.0

运行 flutter pub get 来安装新的依赖项。

使用

以下是如何在你的 Flutter 应用程序中使用 IconCraft 小部件的方法：

基本用法

// 创建一个 IconCraft 小部件
IconCraft(
  // 第一个图标
  Icon(Icons.email),
  // 第二个图标
  Icon(Icons.notifications),
  // 辅助图标相对于主图标的对齐方式
  alignment: Alignment.topRight,
  // 图标装饰
  decoration: IconDecoration(
    // 添加边框
    border: IconBorder(color: Colors.white),
  ),
)

你还可以通过设置边框宽度来自定义边框：

decoration: IconDecoration(
  border: IconBorder(
    color: Colors.white,
    width: 10,
  ),
)

颜色与对齐图标

// 创建一个 IconCraft 小部件
IconCraft(
  // 主图标
  Icon(
    CupertinoIcons.car_detailed,
    color: Colors.grey.shade500,
  ),
  // 辅助图标
  Icon(
    CupertinoIcons.checkmark_square_fill,
    color: Colors.green.shade200,
  ),
  // 辅助图标相对于主图标的对齐方式
  alignment: Alignment.bottomLeft,
  // 图标装饰
  decoration: IconDecoration(
    // 添加边框
    border: IconBorder(
      color: Colors.green.shade900,
      width: 8.0,
    ),
  ),
)

你可以为三个元素（基础图标、辅助图标和边框效果的颜色）设置不同的颜色，并调整边框宽度。

屏幕截图

以下是使用 IconCraft 可以实现的一些示例：

兼容性

• ✅ Icons Plus

致谢

该包受 Roux Guillame 工作的启发。他的原始代码可以在 这里 找到。

许可证

此软件根据 BSD 3-Clause 许可证分发。更多详情见 LICENSE 文件。

示例代码

以下是一个完整的示例代码，展示了如何在应用中使用 IconCraft 小部件：

import 'package:example/IconsHelper.dart';
import 'package:flutter/material.dart';
import 'package:icon_craft/icon_craft.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final List<Color> colors = [
      Colors.black,
      Colors.grey.shade800,
      Colors.blue.shade800,
      Colors.green,
      Colors.purple,
      Colors.orange,
      Colors.pink,
    ];
    final List<Alignment> alignments = [
      Alignment.topLeft,
      Alignment.topCenter,
      Alignment.topRight,
      Alignment.centerLeft,
      Alignment.center,
      Alignment.centerRight,
      Alignment.bottomLeft,
      Alignment.bottomCenter,
      Alignment.bottomRight,
    ];

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                GridView.builder(
                  shrinkWrap: true,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 10,
                    childAspectRatio: 1.6,
                  ),
                  itemCount: 100,
                  itemBuilder: (context, index) {
                    final baseIcon = IconsHelper.getRandomIcon();
                    final secondIcon = IconsHelper.getRandomIcon();
                    var baseColor = (colors.toList()..shuffle()).first;
                    var baseSecondColor = (colors.toList()..shuffle()).first;
                    var alignment = (alignments.toList()..shuffle()).first;

                    return IconCraft(
                      Icon(
                        baseIcon,
                        size: 50,
                        color: baseColor,
                      ),
                      Icon(
                        secondIcon,
                        color: baseSecondColor,
                      ),
                      alignment: alignment,
                      decoration: const IconDecoration(
                        border: IconBorder(),
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}