套件詳情v4.0.1

flutter_widget_catalogue

使用 Flutter 提供的視覺、結構、平台、UI 和互動式組件庫，快速建立優秀的應用程式。

AndroidiOSmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 151
喜歡數: 34
Pub 分數: 160

安裝套件

flutter pub add flutter_widget_catalogue

套件介紹

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

Flutter Widget Catalogue 是一個全面的預建、視覺上吸引人的元件集合，旨在加速應用開發。它提供廣泛的 UI 元件，涵蓋視覺設計、結構佈局、平台特定行為和互動元素。專為 Flutter 構建，讓開發者能快速建立精緻、響應式的應用程式，無需從零開始。該庫支援多種平台，包括 Android、iOS、macOS、Windows 和 Linux，確保跨平台體驗的一致性。非常適合快速原型設計和生產就緒的介面。

適用情境

快速UI原型設計
更快地構建生產應用
跨平台應用程式開發
建立一致的UI模式
提升開發人員的生產力

主要特色

預設計的可視化小部件
平台無關的組件
互動式 UI 元素
結構化佈局工具
透過 pub.dev 輕鬆整合

適合對象

初學者Flutter開發者
尋求速度的資深開發者
專注於UI一致性的團隊
需要快速上市時間的初創企業
設計師與開發人員協作

使用建議

可能需要為獨特設計進行客製化
取決於出版商的維護
某些領域的文件有限
不適合高度專業化的使用者介面需求
如果過度使用，可能導致相依性膨脹

原始 README

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

🚀 Flutter Widget Catalogue

A collection of visual, structural, platform-adaptive, and interactive widgets to help you build beautiful and functional Flutter apps faster.
🎯 100% Dart | 💙 Flutter-ready | ✅ Easy to use | 🧩 Modular components

✨ Available Components

🔘 Buttons

Social Auth Buttons (Google, Facebook, Apple, etc.)
Rounded Buttons
Icon Buttons
Line Buttons
Gradient Buttons
Many more…

🔄 Custom Switch

Highly customizable Flutter switch widget:

Adjustable height, width, toggle size
Borders, colors, radius, icons, labels

💠 Neumorphic UI Kit

Ready-to-use Neumorphic-styled widgets with glass mode:

Buttons, Switches, Containers, Sliders, Texts, Icons
Checkboxes, Toggles, Indicators, Range Sliders, AnimatedList and more

🔤 Text Fields

Fully customizable and themeable text input fields:

Outline, filled, underlined, or borderless styles
Support for icons, hint text, labels
Password visibility toggle, character counter, input formatter support
Focus, validation, and keyboard behavior control

🆕 New Features (Latest Update 🚀)

📊 Customizable & Animated Layouts

Animated ListView
Animated GridView
Masonry Layout support
Quilted Layout support
Smooth UI transitions & effects

💎 Glass Effect in Neumorphic UI

Added Glassmorphism (blur + transparency) support view
Works with existing Neumorphic components

🔽 Advanced Custom Dropdowns

Multi-select dropdown with chips
Scrollable chip-based selection
Hierarchical dropdown (tree structure)
Autocomplete dropdown (e.g., locations)
Custom item UI (user profile, icons, etc.)
Custom header & builder support

📦 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  flutter_widget_catalogue: <latest-version>

Then import it:

import 'package:flutter_widget_catalogue/flutter_widget_catalogue.dart';

🖼️ Screenshots

Neumorphic Widgets

Buttons

DropDown

Components


Switch	TextField	List & Grid

🧪 Usage

Buttons Example

SuccessButton(title: "Success Button", onPressed: () {});
ButtonWithIcon(
  icon: Icons.local_cafe,
  title: "Icon Button",
  color: Colors.white,
  buttonColor: Colors.cyan,
  onPressed: () {},
);
GradientButton(
  onPressed: () {},
  splashColor: Colors.orange,
  colors: [Colors.red, Colors.orange],
  title: "Gradient Button",
);

Switch Example

FlutterSwitch(
  width: 90.0,
  height: 45.0,
  toggleSize: 38.0,
  value: status,
  borderRadius: 24.0,
  padding: 2.0,
  toggleColor: Colors.white,
  switchBorder: Border.all(color: Colors.blueAccent, width: 3.0),
  activeColor: Colors.cyan,
  inactiveColor: Colors.grey.shade400,
  onToggle: (val) {
    setState(() {
      status = val;
    });
  },
);

TextField Example

FlutterTextField(
  borderRadius: 50,
  hintText: "Fill Color",
  hintStyling: TextStyle(color: Colors.black),
  readOnly: false,
  fillColor: Colors.pink,
  borderColor: Colors.transparent,
  cursorColor: Colors.black,
);
FlutterTextField(
  iconBackgroundColor: Colors.black,
  borderRadius: 20,
  customTextFieldIcon: Icon(
  Icons.lock,
  color: Colors.black,),
  hintText: "Enter your password",
  isPasswordField: true,
  isIconShow: true,
  readOnly: false,
  fillColor: Colors.white,
  borderColor: Colors.black,
  cursorColor: Colors.black,
  leadingIconColor: Colors.black,
  labelName: "Password",
);
FlutterTextField(
  isIconShow: false,
  iconBackgroundColor: Colors.white10,
  borderRadius: 30,
  isNumber: true,
  hintText: "Enter your number",
  readOnly: false,
  borderColor: Colors.yellow,
  labelName: "Phone number",
  labelNameTextStyle: const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.w600),
);

Dropdown Example

HierarchySearchableDropdown(
  items: _kSampleData,
  hint: 'Select Multiple Items',
  isMultiline: true,
  isMultiSelect: true,
  onChanged: (label) => setState(() => selectedLabel = label),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please select at least one item';
    }
    return null;
  },
  itemSpacing: 2,
  listPadding: const EdgeInsets.symmetric(vertical: 16),
  itemTextStyle: const TextStyle(
    color: Colors.black,
    fontSize: 15,
  ),
);
HierarchySearchableDropdown(
  items: _kFilterData,
  hint: 'Select Filters',
  isMultiSelect: true,
  showChips: true,
  isMultiline: false,
  onChanged: (label) => setState(() => selectedFilters = label),
),