Flutter图标库插件cocoicons的使用

cocoicons

COCO图标包包含超过600个可编辑的图标，适用于您的Flutter项目。

Made from COCO icon pack.

🎽 安装

在您的 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  cocoicons:

🎮 使用

在您的Dart文件中导入 cocoicons 包，并使用 CocoIconLine 或 CocoIconBold 来显示图标。以下是一个简单的示例：

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

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

示例

您可以查看 example 目录中的Flutter应用程序示例。

示例代码

以下是一个完整的示例代码，展示了如何在GridView中使用多个图标：

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

// 定义一个图标模型类
class IconModel {
  final IconData icon;
  final String name;

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cocoicons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Cocoicons Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<IconModel> sampleIcons = [
    IconModel(icon: CocoIconLine.Add, name: "Line Add icon"),
    IconModel(icon: CocoIconBold.Add, name: "Bold Add icon"),
    IconModel(icon: CocoIconLine.Notification, name: "Line Notification icon"),
    IconModel(icon: CocoIconBold.Notification, name: "Bold Notification icon"),
    IconModel(icon: CocoIconLine.Notification_2, name: "Line Notification icon"),
    IconModel(icon: CocoIconBold.Notification_2, name: "Bold Notification icon"),
  ];

  @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(sampleIcons[index].icon, size: 50.0),
                const SizedBox(height: 30.0),
                Text(sampleIcons[index].name, textAlign: TextAlign.center),
              ],
            ),
          );
        },
        itemCount: sampleIcons.length,
      ),
    );
  }
}

截图

🐛 Bugs/Requests

如果您遇到任何问题，请随时打开一个issue。如果您觉得该库缺少某个功能，请在GitHub上提交一个ticket，我会尽快处理。欢迎提交Pull Request。

🤓 开发者

Abada Samuel Oghenero

• Twitter
• LinkedIn
• Medium
• Facebook