Flutter图标库插件forma_36_icons的使用

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

Forma 36 Icons

pub package

非官方的 Flutter 包，用于 Contentful 的 Forma 36 UI 工具包图标。Forma 36 UI 工具包由 Contentful 制作，并且根据 CC BY 4.0 许可证授权。

安装

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

dependencies:
  forma_36_icons: ^<最新版本>

使用

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

import 'package:forma_36_icons/forma_36_icons.dart';

/// 方法 1 - 使用 Icon 小部件：
Icon _icon = Icon(Forma36Icons.asset, size: 24.0);

/// 方法 2 - 使用 Forma36Icon 小部件：
Icon _icon = Forma36Icon(Forma36Icons.asset);

问题

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

图标

所有 Forma 36 图标可以在其 Figma 文件 这里 查看。

Forma 36 图标

发现此库有用？❤️

通过加入 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.


### 示例代码

```dart
import 'package:forma_36_icons/forma_36_icons.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'forma_36_icons 示例',
      home: Scaffold(
        body: Column(
          children: [
            Text(
              'Forma 36 Icons 示例',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16.0),
            const Text('Icon(Forma36Icons.asset, size: 24.0)'),
            const Icon(
              Forma36Icons.asset,
              size: 24.0,
            ),
            const SizedBox(height: 16.0),
            const Text('Forma36Icon(Forma36Icons.asset)'),
            const Forma36Icon(
              Forma36Icons.asset,
            ),
            const SizedBox(height: 16.0),
            const Text('Forma36Icon(Forma36Icons.asset, color: Colors.red)'),
            const Forma36Icon(
              Forma36Icons.asset,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用forma_36_icons图标库插件的示例代码。forma_36_icons是一个提供Forma 36图标集的Flutter插件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  forma_36_icons: ^最新版本号  # 请替换为实际的最新版本号

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

2. 导入图标库

在你需要使用图标的Dart文件中，导入forma_36_icons包：

import 'package:forma_36_icons/forma_36_icons.dart';

3. 使用图标

现在你可以在你的Flutter应用中使用forma_36_icons提供的图标了。下面是一个简单的示例，展示如何在按钮和文本中使用这些图标：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Forma 36 Icons Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(Forma36Icons.arrowCircleRight),
              onPressed: () {
                // Handle button press
                print('Arrow Circle Right icon pressed');
              },
            ),
            SizedBox(height: 20),
            Text(
              'Forma 36 Icons',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 10),
            Icon(Forma36Icons.home),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Forma36Icons.star, color: Colors.amber),
                SizedBox(width: 10),
                Icon(Forma36Icons.star, color: Colors.amber),
                SizedBox(width: 10),
                Icon(Forma36Icons.starOutline, color: Colors.grey),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

确保所有文件保存后，运行你的Flutter应用。你应该能够在你的应用中看到forma_36_icons提供的图标。

这个示例展示了如何添加依赖、导入图标库并在Flutter应用中使用这些图标。你可以根据需要调整图标的大小、颜色和其他属性。

回到顶部