Flutter图标管理插件fine_icons的使用

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

Flutter图标管理插件fine_icons的使用

关于 fine_icons

Fine Icons 是一个用于创建 200+ 图标的 widget。 这些 Fine Icons 包含不同的形状，如正方形、圆形、圆角、外部标题和 内部标题。 您可以将 Fine Icons 设为默认图标或 Font Awesome 图标。您还可以在 Fine Icons 中添加图片（本地、网络或 SVG），或者使图片成为 Fine Icons。标题可以在 Fine Icons 的外部或内部显示。

Fine Icons 示例

组件说明

以下是 Fine Icons 的组件：

主要卡片 内部卡片 图标 标题 图像 自定义控件
onTap mainCardAlignmentPosition mainCardCrossAlignmentPosition width height minHeight background elevation elevationShadowColor borderWidth borderColor allSideRadius individualSideRadius width height background elevation elevationShadowColor borderWidth borderColor allSideRadius individualSideRadius paddingHorizontal paddingVertical icon color size paddingHorizontal paddingVertical display name fontSize color fontFamily fontWeight height fontStyle letterSpacing background titleMinHeight paddingHorizontal paddingVertical titleBottomBorderRadius outsideTitleMaxWidth imageType image width height borderRadius individualBorderRadius padding

示例代码

访问我们的 网站 查看所有 Fine Icons 模型。您可以点击喜欢的模型复制代码并粘贴到您的项目中，并导入 fine icons 插件。

Fine Icons 动态示例

import 'package:fine_icons/fine_icons.dart';

以下是如何使用 Fine Icons 的示例代码：

FineIcons(
  allSideRadius: 15,
  cardIcon: CardIcon(
    icon: Icons.add_ic_call,
    color: Colors.black,
    size: 30,
  ),
  cardTitle: CardTitle(
    display: 'outside',
    name: "Add Call",
    fontSize: 14,
  ),
),

下面是一个完整的 demo 示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Fine Icons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Image.asset('images/logo.png'),
        toolbarHeight: 80,
        title: Text("Fine Icons"),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FineIcons(
                  allSideRadius: 15,
                  cardIcon: CardIcon(
                    icon: Icons.add_ic_call,
                    color: Colors.black,
                    size: 30,
                  ),
                  cardTitle: CardTitle(
                    display: 'outside',
                    name: "Add Call",
                    fontSize: 14,
                  ),
                ),
                SizedBox(width: 16),
                FineIcons(
                  allSideRadius: 15,
                  cardIcon: CardIcon(
                    icon: Icons.favorite,
                    color: Colors.white,
                    size: 30,
                  ),
                  cardTitle: CardTitle(
                    display: 'outside',
                    name: "Add Favorite",
                    fontSize: 14,
                    color: Colors.red,
                  ),
                ),
                SizedBox(width: 11),
                FineIcons(
                  allSideRadius: 15,
                  cardIcon: CardIcon(
                    icon: Icons.add_a_photo,
                    color: Colors.black,
                    size: 30,
                  ),
                  cardTitle: CardTitle(
                    display: 'outside',
                    name: "Add A Photo",
                    fontSize: 14,
                  ),
                ),
                SizedBox(width: 11),
                FineIcons(
                  allSideRadius: 15,
                  cardIcon: CardIcon(
                    icon: Icons.add_location_alt_rounded,
                    color: Colors.black,
                    size: 40,
                  ),
                  cardTitle: CardTitle(
                    display: 'outside',
                    name: "Add Location",
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FineIcons(
                  elevation: 0,
                  width: 100,
                  minHeight: 100,
                  allSideRadius: 15,
                  background: Colors.deepPurple,
                  insideCard: InsideCard(
                    elevation: 2,
                    width: 40,
                    height: 40,
                    individualSideRadius: IndividualRadius(
                      topRight: 15,
                      bottomLeft: 15,
                    ),
                  ),
                  cardIcon: CardIcon(
                    icon: Icons.attach_money_rounded,
                    color: Colors.black,
                    size: 30,
                  ),
                  cardTitle: CardTitle(
                    display: 'inside',
                    name: "Money",
                    color: Colors.white,
                    fontSize: 12,
                  ),
                ),
                SizedBox(width: 8),
                FineIcons(
                  elevation: 0,
                  width: 100,
                  minHeight: 100,
                  allSideRadius: 15,
                  background: Colors.deepOrange,
                  insideCard: InsideCard(
                    elevation: 2,
                    width: 40,
                    height: 40,
                    individualSideRadius: IndividualRadius(
                      topRight: 15,
                      bottomLeft: 15,
                    ),
                  ),
                  cardIcon: CardIcon(
                    icon: Icons.attachment_outlined,
                    color: Colors.black,
                    size: 30,
                  ),
                  cardTitle: CardTitle(
                    display: 'inside',
                    name: "Material",
                    color: Colors.white,
                    fontSize: 12,
                  ),
                ),
                SizedBox(width: 8),
                FineIcons(
                  elevation: 0,
                  width: 100,
                  minHeight: 100,
                  allSideRadius: 15,
                  background: Colors.blue,
                  insideCard: InsideCard(
                    elevation: 2,
                    width: 40,
                    height: 40,
                    individualSideRadius: IndividualRadius(
                      topRight: 15,
                      bottomLeft: 15,
                    ),
                  ),
                  cardIcon: CardIcon(
                    icon: Icons.supervisor_account,
                    color: Colors.black,
                    size: 30,
                  ),
                  cardTitle: CardTitle(
                    display: 'inside',
                    name: "Man Hours",
                    color: Colors.white,
                    fontSize: 12,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用fine_icons插件的示例代码案例。fine_icons是一个用于管理和使用图标的Flutter插件，它通常提供了一套高质量的图标集。

首先，确保你的Flutter项目已经配置好，并且你已经在pubspec.yaml文件中添加了fine_icons依赖：

dependencies:
  flutter:
    sdk: flutter
  fine_icons: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

一旦依赖安装完成，你就可以在你的Flutter项目中使用fine_icons提供的图标了。以下是一个简单的示例，展示如何在你的应用程序中使用这些图标：

import 'package:flutter/material.dart';
import 'package:fine_icons/fine_icons.dart';  // 导入fine_icons包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fine Icons Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fine Icons Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用FineIcons中的图标
            Icon(FineIcons.home, size: 48, color: Colors.blue),
            SizedBox(height: 20),
            Icon(FineIcons.settings, size: 48, color: Colors.green),
            SizedBox(height: 20),
            Icon(FineIcons.search, size: 48, color: Colors.red),
            // 可以根据需要添加更多图标
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们导入了fine_icons包，并在MyHomePage中使用了几个图标。FineIcons.home、FineIcons.settings和FineIcons.search是fine_icons包中提供的图标。你可以根据fine_icons的文档查找所有可用的图标，并使用它们。

注意：实际可用的图标名称（如FineIcons.home）和数量取决于fine_icons插件的版本和更新情况。因此，建议查阅最新的fine_icons文档以获取最准确的信息。

这个示例展示了如何在Flutter应用程序中集成和使用fine_icons插件提供的图标。你可以根据自己的需求进一步定制和扩展这个示例。

回到顶部