Flutter图标展示插件simple_icons的使用

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

Flutter图标展示插件simple_icons的使用

Simple Icons

Simple Icons: Flutter

A Flutter package for Simple Icons, which provides over 1500 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub.

命名规则

为了更好的可读性和与其他Flutter图标包的一致性，命名规则已经改变。此外：

  • 特殊字符 ➔ 写成单词形式
  • 以数字开头的名字 ➔ 在前面加上字母’n’
  • Dart保留字 ➔ 在后面加上’icon’

从catalog转换时，请遵循以下方法：

.NET ➔ dotNet
Apple Pay ➔ applepay
1Password ➔ n1password
abstract ➔ abstracticon

SimpleIconColors

自版本10.1.2起，SimpleIconColors被引入，它包含品牌的十六进制颜色。一些品牌没有收到颜色支持，这是构建脚本中的已知错误。如果您发现任何您想要添加颜色支持的图标，请随时提出问题。

安装

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

dependencies:
  simple_icons: <latest_version>

使用方法

以下是使用simple_icons包的一个简单例子，通过IconButton组件展示一个带有颜色的GitHub图标，并且设置点击事件打印一句话。

import "package:simple_icons/simple_icons.dart";

class MyAwesomeWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(SimpleIcons.github, color: SimpleIconColors.github),
      onPressed: () {
          print("awesome platform to share code and ideas");
      }
    );
  }
}

示例Demo

下面是一个完整的示例应用程序，展示了如何在Flutter应用中使用simple_icons来显示多个不同品牌的图标，包括指定图标的大小和颜色（如果适用）。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    const double iconSize = 50;
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              Text('Here you should see some icons'),
              Icon(
                Icons.calendar_month,
                color: SimpleIconColors.apple,
                size: iconSize,
              ),
              Icon(
                SimpleIcons.trakt,
                color: SimpleIconColors.trakt,
                size: iconSize,
              ),
              Icon(
                SimpleIcons.themoviedatabase,
                color: Colors.blue,
                size: iconSize,
              ),
              Icon(
                SimpleIcons.imdb,
                color: SimpleIconColors.imdb,
                size: iconSize,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上内容涵盖了simple_icons的基本使用方法、安装步骤以及一些具体的使用案例，希望能够帮助到你！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用simple_icons插件来展示图标的示例代码。simple_icons是一个流行的Flutter插件，它提供了数千个流行品牌和服务的图标。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  simple_icons: ^5.0.0  # 请检查最新版本号

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

步骤 2: 导入包

在你的Dart文件中，导入simple_icons包。

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

步骤 3: 使用图标

现在你可以在你的Flutter应用中使用simple_icons提供的图标了。以下是一个简单的例子，展示如何在按钮和列表项中使用图标。

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Icons Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 使用图标按钮
            IconButton(
              icon: Icon(
                Icons.rounded.github, // 注意：这不是simple_icons的图标，仅作为对比
                size: 48,
                color: Colors.grey,
              ),
              onPressed: () {},
            ),

            SizedBox(height: 24),

            // 使用simple_icons的图标
            IconButton(
              icon: Icon(
                SimpleIcons.github,
                size: 48,
                color: Colors.black,
              ),
              onPressed: () {},
            ),

            SizedBox(height: 24),

            // 在列表项中使用图标
            ListTile(
              leading: Icon(
                SimpleIcons.twitter,
                size: 24,
                color: Colors.blue,
              ),
              title: Text('Twitter'),
              onTap: () {},
            ),

            ListTile(
              leading: Icon(
                SimpleIcons.linkedin,
                size: 24,
                color: Colors.blueGrey,
              ),
              title: Text('LinkedIn'),
              onTap: () {},
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 添加依赖：在pubspec.yaml文件中添加simple_icons依赖。
  2. 导入包：在Dart文件中导入simple_icons包。
  3. 使用图标：
    • 使用IconButton展示GitHub图标，先展示一个默认的Flutter图标（Icons.rounded.github），然后展示simple_icons提供的GitHub图标（SimpleIcons.github）。
    • 使用ListTile展示Twitter和LinkedIn的图标，每个图标前面都有一个Icon小部件。

注意事项

  • 确保你使用的是最新版本的simple_icons包，因为图标集合和API可能会随着时间而变化。
  • 你可以在simple_icons的GitHub仓库或文档中查找所有可用的图标及其名称。

希望这个示例对你有帮助！

回到顶部