搜尋套件、儲存庫與 APP 分類

套件詳情v2.1.0

fui_kit

我們的圖庫提供超過498個向量SVG圖標,共6種不同風格或主題。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
301
喜歡數
21
Pub 分數
160

安裝套件

flutter pub add fui_kit

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

fui_kit 是一個全面的 Flutter 套件,提供超過 498 個向量 SVG 圖示,涵蓋六種不同風格或主題。專為尋求多功能且可擴展圖示的開發者設計,支援 Android、iOS、Web、macOS、Windows 與 Linux 等多個平台。圖示經過效能與清晰度優化,確保在任何尺寸下都能清晰呈現。透過 Flutter pub 命令輕鬆整合,fui_kit 提升應用程式 UI 設計的效率與視覺一致性。其龐大的圖示庫減少對外部資源的依賴,並簡化圖示管理。

適用情境

  • App UI 增強
  • 跨平台圖示一致性
  • 設計系統整合
  • 快速原型設計
  • 品牌一致的視覺效果
  • 最小的資源開銷

主要特色

  • 498+ 個 SVG 圖標
  • 6 種圖示樣式/主題
  • 基於向量的可擴展性
  • 多平台支援
  • 輕鬆整合 pub
  • 輕量且快速

適合對象

  • UI/UX 設計師
  • Flutter 開發者
  • 產品團隊
  • Startups
  • 企業應用
  • 開源貢獻者

使用建議

  • 僅限圖示集
  • 不包含自訂工具
  • 需要手動選擇主題
  • 不適合複雜的插圖
  • 依賴外部GitHub來源
  • 沒有內建的圖示搜尋功能

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

fui_kit — Flat UI icons for Flutter

fui_kit banner

pub package pub points likes license: MIT codecov CI

fui_kit is a flat icon pack for Flutter with 2,988 SVG icons — 498 unique glyphs in 6 styles (regular, bold and solid weights, each with rounded or straight corners), based on the open source Flaticon UIcons set.

  • 🎨 Themeable — icons follow your app's IconTheme (light/dark mode works out of the box).
  • ♿ Accessible — first-class semanticLabel support for screen readers.
  • 🔍 Searchable — browse every icon in the interactive gallery.
  • 🧩 Drop-in — works anywhere a widget fits: IconButton, AppBar, ListTile, BottomNavigationBar…

All 6 icon styles

Installation

flutter pub add fui_kit

Or add it to your pubspec.yaml manually:

dependencies:
  fui_kit: ^2.1.0

Quick start

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

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

  @override
  Widget build(BuildContext context) {
    return const FUI(RegularRounded.heart);
  }
}

Use it like any other icon widget:

IconButton(
  onPressed: () {},
  icon: const FUI(BoldRounded.settings),
)
ListTile(
  leading: const FUI(SolidRounded.user, semanticLabel: 'Profile'),
  title: const Text('Profile'),
)

The 6 styles

Every glyph exists in all six styles. Pick the class that matches the look you want:

Style Class Example
Regular Rounded RegularRounded FUI(RegularRounded.bookmark)
Regular Straight RegularStraight FUI(RegularStraight.bookmark)
Bold Rounded BoldRounded FUI(BoldRounded.bookmark)
Bold Straight BoldStraight FUI(BoldStraight.bookmark)
Solid Rounded SolidRounded FUI(SolidRounded.bookmark)
Solid Straight SolidStraight FUI(SolidStraight.bookmark)

Icon names are lowerCamelCase versions of the original kebab-case Flaticon names: address-book → RegularRounded.addressBook.

Customization

FUI(
  SolidRounded.heart,
  color: Colors.red,          // defaults to IconTheme color
  width: 40,                  // defaults to IconTheme size (24)
  height: 40,
  semanticLabel: 'Favorite',  // announced by screen readers
)
Parameter Type Default Description
file (positional) String required Icon constant, e.g. RegularRounded.add
color Color? IconTheme color Tint applied to the icon
width / height double? IconTheme size (24) Rendered size
semanticLabel String? null Accessibility label
fit BoxFit BoxFit.contain How the icon fills its bounds
matchTextDirection bool false Mirror the icon in RTL locales
Theming and dark mode

FUI resolves its color and size from the ambient IconTheme, exactly like Flutter's built-in Icon widget. That means icons automatically switch color with your ThemeData in light/dark mode, and you can restyle entire subtrees at once:

IconTheme(
  data: const IconThemeData(color: Colors.teal, size: 32),
  child: Row(
    children: const [
      FUI(RegularRounded.home),
      FUI(RegularRounded.search),
      FUI(RegularRounded.bell),
    ],
  ),
)

Browse all icons

  • 🔎 Interactive gallery — search all 2,988 icons and copy the code snippet with one tap.
  • 📚 API reference — every constant is documented.
  • 🧰 Programmatically — each style class exposes an all map (kebab-case name → asset path), and FuiIcons.styles aggregates the six styles. Handy for building your own icon picker:
// All Regular Rounded icons:
for (final entry in RegularRounded.all.entries) {
  print('${entry.key} -> ${entry.value}');
}

// Every style:
FuiIcons.styles.forEach((styleName, icons) {
  print('$styleName has ${icons.length} icons');
});

Migrating from 2.0.x

Nothing breaks — your existing code keeps compiling. Two things were modernized in 2.1.0:

  1. Icon constants are now lowerCamelCase. The old SCREAMING_CASE constants still work but are deprecated and will be removed in 4.0.0:

    FUI(RegularRounded.ADDRESS_BOOK) // deprecated
    FUI(RegularRounded.addressBook)  // ✅ use this
    
  2. Icons now follow your theme. When you don't pass a color, the icon uses the ambient IconTheme color (previously it was tinted grey), and the default size honours IconTheme.size (24 in Material apps, previously a fixed 30). Pass color/width/height explicitly if you need the old values.

FAQ

Why don't I see the icon I expect? Check the gallery — names follow the original Flaticon UIcons naming. The same glyph exists in all 6 styles.

Can I use these icons commercially? Yes. The package code is MIT licensed and the icons come from Flaticon's open source UIcons collection. See the attribution note below.

How big is the package? The package bundles all 2,988 SVGs (~12 MB uncompressed) as Flutter assets. A future 3.0.0 release will ship the icons as icon fonts with full tree-shaking, so only the icons you use end up in your app binary. Follow the roadmap for progress.

License and attribution

  • Source code: MIT License © Baldomero Cho.
  • Icons: UIcons by Flaticon, used under their open source/free license. If you redistribute the icons outside this package, review Flaticon's license terms.

Contributing

Found a bug or want a new feature? Open an issue or a pull request on GitHub. If this package saves you time, a ⭐ on GitHub and a 👍 on pub.dev help others discover it.

所屬分類

依賴

依賴清單 1 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。