shadcn-flutter

Shadcn Flutter

为 Flutter 打造的完整 UI 生态系统，涵盖组件、主题和工具，可随时告别 Material 和 Cupertino。采用现代设计令牌和高品质控件，适用于移动端、Web 和桌面端。

入门

使用 Shadcn Flutter 创建新的 Flutter 应用：

1. 添加依赖项：

   flutter pub add shadcn_flutter
   

2. 配置 main.dart：

   import 'package:shadcn_flutter/shadcn_flutter.dart';
   
   void main() {
     runApp(
       ShadcnApp(
         title: 'My App',
         theme: ThemeData(
           colorScheme: ColorSchemes.darkSlate,
           radius: 0.5,
         ),
         home: const MyHomePage(),
       ),
     );
   }
   
   class MyHomePage extends StatelessWidget {
     const MyHomePage({super.key});
   
     @override
     Widget build(BuildContext context) {
       return const Scaffold(
         child: Center(
           child: Text('Hello World!').h1(),
         ),
       );
     }
   }
   

指南

了解核心概念和设计系统基础知识。

名称	描述	路径
简介	生态系统、功能和常见问题概览。	guides/introduction.md
安装	稳定版和实验版的逐步设置指南。	guides/installation.md
主题	自定义圆角、密度和缩放等设计令牌。	guides/theming.md
颜色	使用基于 Tailwind 的调色板和 ColorShades。	guides/colors.md
排版	语义化文本样式和控件扩展。	guides/typography.md
布局	间距、间隔和响应式布局辅助工具。	guides/layout.md
图标	使用 10,000 多个内置图标（Lucide、Radix 等）。	guides/icons.md
互操作性	逐步使用 Material 和 Cupertino 控件。	guides/interop.md
状态管理	内置 Data 和 Model 状态系统指南。	guides/state_management.md
Web 预加载器	自定义 Web 应用的加载体验。	guides/web_preloader.md

组件

Shadcn Flutter 提供 100 多个高品质组件。以下是核心类别。

动画

组件	路径
数字计数器	components/animation/number_ticker.md

控件

组件	路径
按钮	components/control/button.md

披露

组件	路径
手风琴	components/disclosure/accordion.md
可折叠面板	components/disclosure/collapsible.md

展示

组件	路径
头像	components/display/avatar.md
聊天气泡	components/display/chat.md
代码片段	components/display/code_snippet.md
表格	components/display/table.md
追踪器	components/display/tracker.md

反馈

组件	路径
警告	components/feedback/alert.md
警告对话框	components/feedback/alert_dialog.md
进度	components/feedback/progress.md
Toast	components/feedback/toast.md

Form

Component	Path
AutoComplete	components/form/autocomplete.md
Checkbox	components/form/checkbox.md
Chip Input	components/form/chip_input.md
Color Picker	components/form/color_picker.md
Date Picker	components/form/date_picker.md
Form	components/form/form.md
Formatted Input	components/form/formatted_input.md
Text Input	components/form/input.md
Input OTP	components/form/input_otp.md
Item Picker	components/form/item_picker.md
Phone Input	components/form/phone_input.md
Radio Group	components/form/radio_group.md
Select	components/form/select.md
Slider	components/form/slider.md
Star Rating	components/form/star_rating.md
Switch	components/form/switch.md
Text Area	components/form/text_area.md
Time Picker	components/form/time_picker.md

Layout

Component	Path
Card	components/layout/card.md
Card Image	components/layout/card_image.md
Carousel	components/layout/carousel.md
Divider	components/layout/divider.md
Resizable	components/layout/resizable.md
Scaffold	components/layout/scaffold.md
Sortable	components/layout/sortable.md
Stepper	components/layout/stepper.md
Steps	components/layout/steps.md
Timeline	components/layout/timeline.md

Navigation

Component	Path
Breadcrumb	components/navigation/breadcrumb.md
Dot Indicator	components/navigation/dot_indicator.md
Menubar	components/navigation/menubar.md
Navigation Menu	components/navigation/navigation_menu.md
Pagination	components/navigation/pagination.md
Switcher	components/navigation/switcher.md
Tab List	components/navigation/tab_list.md
Tab Pane	components/navigation/tab_pane.md
Tabs	components/navigation/tabs.md
Tree	components/navigation/tree.md

覆层

组件	路径
对话框	components/overlay/dialog.md
抽屉	components/overlay/drawer.md
悬停卡片	components/overlay/hover_card.md
固定面板	components/overlay/pinned_sheet.md
弹出框	components/overlay/popover.md
轮播	components/overlay/swiper.md
工具提示	components/overlay/tooltip.md
窗口	components/overlay/window.md

实用工具

组件	路径
徽章	components/utility/badge.md
日历	components/utility/calendar.md
标签	components/utility/chip.md
命令	components/utility/command.md
上下文菜单	components/utility/context_menu.md
下拉菜单	components/utility/dropdown_menu.md
溢出跑马灯	components/utility/overflow_marquee.md
刷新触发器	components/utility/refresh_trigger.md

提示

这是一个精选列表。要查看全部 100 多个组件，请参阅 组件目录。

交互使用技巧

1. 等待交互：使用 Popover 或 Dialog 时，优先使用提供的控制器进行程序化访问。
2. 善用扩展方法：使用 .h1()、.p()、.iconSmall() 等方法，而不是手动配置 TextStyle 或 size。
3. 密度很重要：使用 DensityContainer 或 theme.density，确保不同平台密度下的间距保持一致。