Flutter图标管理插件iconify_design的使用

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

Flutter图标管理插件iconify_design的使用

iconify_design 是一个Flutter包，它允许您轻松地使用来自 Iconify.design API的图标。此包提供了一个名为 IconifyIcon 的小部件，该小部件接受一个图标字符串，并可选地允许您指定图标的大小和颜色。

安装

在您的 pubspec.yaml 文件中添加以下内容：

dependencies:
  iconify_design: ^1.0.1

然后运行：

flutter pub get

使用方法

以下是 IconifyIcon 小部件的基本用法示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Iconify Flutter Example'),
        ),
        body: Center(
          child: IconifyIcon(
            icon: 'mdi:home',
            size: 48.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

参数说明

IconifyIcon 小部件具有以下参数：

  1. icon：图标字符串（例如 'mdi:home', 'iconoir:fill-color-solid' 等）。
  2. size (可选)：图标的大小，默认是 24.0。
  3. color (可选)：图标的颜色，默认是黑色。

示例代码

下面是一个更复杂的示例，展示了如何使用 IconifyIcon 小部件展示有效和无效的图标、改变图标的大小和颜色以及与按钮一起使用。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Iconify Design',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const TestScreen(),
    );
  }
}

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  final validIcons = [
    "logos:flutter",
    "skill-icons:flutter-light",
    "skill-icons:flutter-dark",
    "logos:facebook",
    "line-md:facebook",
    "line-md:instagram",
    "skill-icons:instagram",
    "hugeicons:tiktok",
    "logos:reddit-icon",
    "icon-park-solid:one",
    "fluent:home-24-filled",
    "mage:phone-fill",
    "ic:twotone-computer",
    "material-symbols:hotel-class-rounded",
  ];

  final invalidIcons = ["thisisanicon", "crossicon", "whatisicon", "iconify"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Iconify design for flutter demo',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.grey.shade800,
        centerTitle: true,
      ),
      backgroundColor: Colors.grey.shade900,
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              "Valid icons :",
              style: TextStyle(color: Colors.white),
            ),
            const SizedBox(
              height: 16,
            ),
            Center(
              child: GridView.count(
                crossAxisCount: 8,
                shrinkWrap: true,
                mainAxisSpacing: 28.0,
                crossAxisSpacing: 28.0,
                childAspectRatio: 2,
                children: validIcons.map((icon) => IconifyIcon(icon: icon)).toList(),
              ),
            ),
            const SizedBox(
              height: 32,
            ),
            const Text(
              "Invalid icons : (There is no output in that case)",
              style: TextStyle(color: Colors.white),
            ),
            Center(
              child: GridView.count(
                crossAxisCount: 8,
                shrinkWrap: true,
                mainAxisSpacing: 28.0,
                crossAxisSpacing: 28.0,
                childAspectRatio: 2,
                children: invalidIcons.map((icon) => IconifyIcon(icon: icon)).toList(),
              ),
            ),
            const SizedBox(
              height: 32,
            ),
            const Text(
              "Change icon color & width",
              style: TextStyle(color: Colors.white),
            ),
            const SizedBox(
              height: 16,
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Container(
                  decoration: BoxDecoration(
                    color: Colors.grey.shade800,
                    borderRadius: BorderRadius.circular(16.0),
                    border: Border.all(
                      width: 1,
                      color: Colors.white,
                    ),
                  ),
                  padding: const EdgeInsets.all(8.0),
                  child: const Column(
                    children: [
                      IconifyIcon(
                        icon: "radix-icons:size",
                        size: 128,
                      ),
                      Text(
                        "Size scaled to 128.0",
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  width: 8,
                ),
                Container(
                  decoration: BoxDecoration(
                    color: Colors.grey.shade800,
                    borderRadius: BorderRadius.circular(16.0),
                    border: Border.all(
                      width: 1,
                      color: Colors.white,
                    ),
                  ),
                  padding: const EdgeInsets.all(8.0),
                  child: const Column(
                    children: [
                      IconifyIcon(
                        icon: "iconoir:fill-color-solid",
                        color: Colors.yellow,
                      ),
                      Text(
                        "Color changed to yellow",
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(
              height: 32,
            ),
            const Text(
              "Usage with buttons",
              style: TextStyle(color: Colors.white),
            ),
            const SizedBox(
              height: 16,
            ),
            Wrap(
              crossAxisAlignment: WrapCrossAlignment.start,
              children: [
                ElevatedButton.icon(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.grey.shade700,
                    foregroundColor: Colors.white,
                  ),
                  onPressed: () {},
                  icon: const IconifyIcon(
                    icon: "mdi:refresh",
                    color: Colors.white,
                  ),
                  label: const Text("Reload"),
                ),
                const SizedBox(
                  width: 8,
                ),
                IconButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.grey.shade700,
                    foregroundColor: Colors.white,
                    minimumSize: const Size(32, 32),
                    maximumSize: const Size(32, 32),
                  ),
                  onPressed: () {},
                  icon: const IconifyIcon(
                    icon: "mdi:home",
                    color: Colors.red,
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

通过这个完整的示例，您可以更好地理解如何在Flutter项目中使用 iconify_design 插件来管理和显示各种图标。希望这对您有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用iconify_design插件来管理图标的代码案例。iconify_design是一个Flutter插件，它允许你使用Iconify图标库中的图标。

首先，你需要在你的pubspec.yaml文件中添加iconify_design依赖：

dependencies:
  flutter:
    sdk: flutter
  iconify_design: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter项目中使用这些图标。以下是一个完整的示例，展示如何在Flutter应用中使用iconify_design插件：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Iconify Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用Iconify图标
            Iconify(
              icon: 'design:ic_baseline_home_24',  // 替换为你想使用的图标名称
              color: Colors.black,
              size: 48,
            ),
            SizedBox(height: 20),
            // 另一个图标示例
            Iconify(
              icon: 'design:ic_baseline_search_24',
              color: Colors.blue,
              size: 36,
            ),
            SizedBox(height: 20),
            // 使用自定义大小的图标
            Iconify(
              icon: 'design:ic_baseline_settings_24',
              color: Colors.green,
              size: 56,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它展示了如何在应用中使用iconify_design插件来显示不同的图标。

  • Iconify组件用于显示图标。
  • icon属性指定要显示的图标名称，这些名称通常可以在Iconify图标库的文档中找到。
  • color属性设置图标的颜色。
  • size属性设置图标的大小。

你可以根据需要替换icon属性的值来显示不同的图标。此外，你还可以调整color和size属性以匹配你的设计需求。

确保你使用的图标名称是iconify_design插件支持的，并且已经包含在Iconify图标库中。如果你不确定某个图标是否可用，可以参考Iconify图标库的官方文档或在线资源。

回到顶部