Flutter图标样式插件bold_icons的使用

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

Flutter图标样式插件bold_icons的使用

pub package

非官方的Flutter插件，用于支持[Bold UI Kit图标]。Bold UI Kit由[Bridge Lab]制作，并根据[CC BY 4.0]许可。

安装

在你的Flutter项目中添加bold_icons依赖：

dependencies:
  bold_icons: ^<最新版本>

使用

在你的Flutter文件中导入包，并使用以下两种方式之一来显示图标：

import 'package:bold_icons/bold_icons.dart';

/// 方式1 - 使用Icon小部件：
Icon _icon = Icon(BoldIcons.mosquito, size: 24.0);

/// 方式2 - 使用BoldIcon小部件：
Icon _icon = BoldIcon(BoldIcons.mosquito);

示例代码

以下是使用bold_icons插件的完整示例代码：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'bold_icons 示例',
      home: Scaffold(
        body: Column(
          children: [
            Text(
              'Bold Icons 示例',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16.0),
            const Text('Icon(BoldIcons.mosquito, size: 24.0)'),
            const Icon(
              BoldIcons.mosquito,
              size: 24.0,
            ),
            const SizedBox(height: 16.0),
            const Text('BoldIcon(BoldIcons.mosquito)'),
            const BoldIcon(
              BoldIcons.mosquito,
            ),
            const SizedBox(height: 16.0),
            const Text('BoldIcon(BoldIcons.mosquito, color: Colors.red)'),
            const BoldIcon(
              BoldIcons.mosquito,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

图标

所有Bold图标可以在其Figma文件中查看[此处]。

遇到问题？

如果遇到任何问题，请直接在[仓库]中提交issue。

支持

如果你觉得这个库有用，请加入[star]以支持它！⭐️
同时，也请[关注我的GitHub]以便获取我的下一个项目！🐱

许可证

Copyright 2023 hanmajid (Muhammad Farhan Majid)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用bold_icons插件的示例代码。bold_icons是一个流行的图标库，提供了多种美观的图标供开发者使用。

步骤 1: 添加依赖

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

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

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

步骤 2: 导入包

在你的Dart文件中导入bold_icons包。

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

步骤 3: 使用图标

你可以使用BoldIcons类中的静态属性来访问图标。以下是一个简单的示例，展示了如何在按钮和文本中使用bold_icons图标。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bold Icons Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用图标按钮
              IconButton(
                icon: Icon(BoldIcons.heart),
                onPressed: () {
                  print('Heart icon pressed');
                },
              ),
              SizedBox(height: 20),
              // 使用图标和文本
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(BoldIcons.star, color: Colors.amber),
                  Text(' Favorite', style: TextStyle(fontSize: 18)),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

  1. 添加依赖：在pubspec.yaml文件中添加bold_icons依赖。
  2. 导入包：在Dart文件中导入bold_icons包。
  3. 使用图标：
    • 使用IconButton和Icon组件来显示图标。
    • BoldIcons.heart和BoldIcons.star是从bold_icons包中获取的图标。

这个示例展示了如何在Flutter应用中集成并使用bold_icons图标库。你可以根据需要替换图标，并调整样式以满足你的应用需求。

回到顶部