Flutter图标管理插件iconic的使用

简介

Iconic 是一个为Flutter应用程序提供多种精美图标的插件，旨在提升应用界面的视觉效果和用户体验。这些图标由 FreePik 和 Flaticon 设计，是专门为增强Flutter应用视觉吸引力而提供的。

安装

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

dependencies:
  iconic: ^0.1.0

如果IDE没有自动执行，请运行以下命令来获取包：

flutter pub get

使用方法

首先，在您的Flutter文件中导入 Iconic 包：

import 'package:iconic/iconic.dart';

然后，您可以直接使用 Icon 小部件并传入相应的 Iconic 图标作为参数。例如：

Icon(Iconic.home);

以下是完整的示例代码，展示如何在一个简单的Flutter应用中使用 Iconic 中的不同图标。

示例 Demo

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Iconic',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Iconic Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

final icons = [
  Iconic.hamburger,
  Iconic.home,
  Iconic.headphones,
  Iconic.document,
  Iconic.doctor,
  Iconic.dashboard,
  Iconic.picture,
  Iconic.package,
  Iconic.phone_call,
  Iconic.calendar,
  Iconic.call_incoming,
  Iconic.car,
  Iconic.share,
  Iconic.search,
  Iconic.shopping_cart,
];

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  IconData? icon;

  void _incrementCounter() {
    setState(() {
      if (_counter == icons.length - 1) {
        _counter = 0;
      } else {
        _counter++;
      }
      icon = icons[_counter];
    });
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    icon = icons.first;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(icon, size: 30),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Change Icon',
        child: const Icon(Iconic.apps_add),
      ),
    );
  }
}