插件详情v4.0.1

flutter_widget_catalogue

使用 Flutter 提供的视觉、结构、平台、UI 和交互式组件库，快速创建出色的 App。

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),
),