Flutter图标库插件coolicons的使用

Coolicons 是一个用于Flutter应用的图标库插件，它允许开发者轻松地在项目中使用来自 Coolicons 的图标集。

🎖 安装

要在您的Flutter项目中添加 Coolicons，请在 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  coolicons: ^1.0.0

之后运行 flutter pub get 来安装该包。

🎮 使用

导入 Coolicons 包，并在您的小部件中使用所需的图标。例如：

import 'package:coolicons/coolicons.dart';

class MyAwesomeWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Coolicons.Figma, size: 50.0),
          const SizedBox(height: 30.0),
          Text('Figma icon', textAlign: TextAlign.center),
        ],
      ),
    );
  }
}

示例 Demo

这里提供了一个完整的示例，演示如何使用 Coolicons 展示多个图标。此示例使用了 GridView.builder 来创建一个网格布局，显示不同的图标及其名称。

import 'package:coolicons/coolicons.dart';
import 'package:flutter/material.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(
      title: 'Coolicons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Coolicons Demo'),
    );
  }
}

class IconModel {
  final IconData icon;
  final String name;

  IconModel({required this.icon, required this.name});
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<IconModel> iconsList = [
    IconModel(icon: Coolicons.Figma, name: "Figma icon"),
    IconModel(icon: Coolicons.LinkedIn, name: "LinkedIn icon"),
    IconModel(icon: Coolicons.apple, name: "Apple icon"),
    IconModel(icon: Coolicons.facebook, name: "Facebook icon"),
    IconModel(icon: Coolicons.google, name: "Google icon"),
    IconModel(icon: Coolicons.youtube, name: "YouTube icon")
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8.0,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(iconsList[index].icon, size: 50.0),
                const SizedBox(height: 30.0),
                Text(iconsList[index].name, textAlign: TextAlign.center),
              ],
            ),
          );
        },
        itemCount: iconsList.length,
      ),
    );
  }
}