shadcn-flutter
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseShadcn Flutter
Shadcn Flutter
A cohesive UI ecosystem for Flutter—components, theming, and tooling—ready to ditch Material and Cupertino. Built with modern design tokens and high-quality widgets across mobile, web, and desktop.
一套面向Flutter的一体化UI生态系统——包含组件、主题配置与工具集,可替代Material和Cupertino。基于现代设计令牌构建,提供适配移动端、网页端与桌面端的高质量组件。
Getting Started
快速开始
To set up a fresh Flutter application with Shadcn Flutter:
-
Add the dependency:shell
flutter pub add shadcn_flutter -
Configure your:
main.dartdartimport '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}); Widget build(BuildContext context) { return const Scaffold( child: Center( child: Text('Hello World!').h1(), ), ); } }
使用Shadcn Flutter搭建全新Flutter应用:
-
添加依赖:shell
flutter pub add shadcn_flutter -
配置你的:
main.dartdartimport '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}); Widget build(BuildContext context) { return const Scaffold( child: Center( child: Text('Hello World!').h1(), ), ); } }
Guides
指南
Learn the core concepts and design system fundamentals.
| Name | Description | Path |
|---|---|---|
| Introduction | Overview of the ecosystem, features, and FAQ. | guides/introduction.md |
| Installation | Step-by-step setup for stable and experimental versions. | guides/installation.md |
| Theming | Customizing tokens like radius, density, and scaling. | guides/theming.md |
| Colors | Using the Tailwind-based color palette and ColorShades. | guides/colors.md |
| Typography | Semantic text styles and widget extensions. | guides/typography.md |
| Layout | Spacing, gaps, and responsive layout helpers. | guides/layout.md |
| Icons | Accessing the 10,000+ bundled icons (Lucide, Radix, etc). | guides/icons.md |
| Interop | Using Material and Cupertino widgets incrementally. | guides/interop.md |
| State Management | Guide to the built-in Data and Model state system. | guides/state_management.md |
| Web Preloader | Customizing the loading experience for web apps. | guides/web_preloader.md |
学习核心概念与设计系统基础。
| 名称 | 描述 | 路径 |
|---|---|---|
| Introduction | 生态系统概述、功能介绍及常见问题解答。 | guides/introduction.md |
| Installation | 稳定版与实验版的分步安装指南。 | guides/installation.md |
| Theming | 自定义半径、密度、缩放等设计令牌。 | guides/theming.md |
| Colors | 使用基于Tailwind的调色板与ColorShades。 | guides/colors.md |
| Typography | 语义化文本样式与组件扩展。 | guides/typography.md |
| Layout | 间距、间隙与响应式布局辅助工具。 | guides/layout.md |
| Icons | 使用内置的10000+图标(Lucide、Radix等)。 | guides/icons.md |
| Interop | 逐步集成Material与Cupertino组件。 | guides/interop.md |
| State Management | 内置Data与Model状态系统使用指南。 | guides/state_management.md |
| Web Preloader | 自定义网页应用的加载体验。 | guides/web_preloader.md |
Components
组件
Shadcn Flutter features over 100+ high-quality components. Below are the core categories.
Shadcn Flutter拥有100+高质量组件。以下是核心分类。
Animation
Animation
| Component | Path |
|---|---|
| Number Ticker | components/animation/number_ticker.md |
| 组件 | 路径 |
|---|---|
| Number Ticker | components/animation/number_ticker.md |
Control
Control
| Component | Path |
|---|---|
| Button | components/control/button.md |
| 组件 | 路径 |
|---|---|
| Button | components/control/button.md |
Disclosure
Disclosure
| Component | Path |
|---|---|
| Accordion | components/disclosure/accordion.md |
| Collapsible | components/disclosure/collapsible.md |
| 组件 | 路径 |
|---|---|
| Accordion | components/disclosure/accordion.md |
| Collapsible | components/disclosure/collapsible.md |
Display
Display
| Component | Path |
|---|---|
| Avatar | components/display/avatar.md |
| Chat Bubble | components/display/chat.md |
| Code Snippet | components/display/code_snippet.md |
| Table | components/display/table.md |
| Tracker | components/display/tracker.md |
| 组件 | 路径 |
|---|---|
| Avatar | components/display/avatar.md |
| Chat Bubble | components/display/chat.md |
| Code Snippet | components/display/code_snippet.md |
| Table | components/display/table.md |
| Tracker | components/display/tracker.md |
Feedback
Feedback
| Component | Path |
|---|---|
| Alert | components/feedback/alert.md |
| Alert Dialog | components/feedback/alert_dialog.md |
| Progress | components/feedback/progress.md |
| Skeleton | components/feedback/skeleton.md |
| Toast | components/feedback/toast.md |
| 组件 | 路径 |
|---|---|
| Alert | components/feedback/alert.md |
| Alert Dialog | components/feedback/alert_dialog.md |
| Progress | components/feedback/progress.md |
| Skeleton | components/feedback/skeleton.md |
| Toast | components/feedback/toast.md |
Form
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 |
| 组件 | 路径 |
|---|---|
| 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
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 |
| 组件 | 路径 |
|---|---|
| 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
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 |
| 组件 | 路径 |
|---|---|
| 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 |
Overlay
Overlay
| Component | Path |
|---|---|
| Dialog | components/overlay/dialog.md |
| Drawer | components/overlay/drawer.md |
| Hover Card | components/overlay/hover_card.md |
| Popover | components/overlay/popover.md |
| Swiper | components/overlay/swiper.md |
| Tooltip | components/overlay/tooltip.md |
| Window | components/overlay/window.md |
| 组件 | 路径 |
|---|---|
| Dialog | components/overlay/dialog.md |
| Drawer | components/overlay/drawer.md |
| Hover Card | components/overlay/hover_card.md |
| Popover | components/overlay/popover.md |
| Swiper | components/overlay/swiper.md |
| Tooltip | components/overlay/tooltip.md |
| Window | components/overlay/window.md |
Utility
Utility
| Component | Path |
|---|---|
| Badge | components/utility/badge.md |
| Calendar | components/utility/calendar.md |
| Chip | components/utility/chip.md |
| Command | components/utility/command.md |
| Context Menu | components/utility/context_menu.md |
| Dropdown Menu | components/utility/dropdown_menu.md |
| Overflow Marquee | components/utility/overflow_marquee.md |
| Refresh Trigger | components/utility/refresh_trigger.md |
[!TIP] This is a curated list. For the full list of all 100+ components, check the components directory.
| 组件 | 路径 |
|---|---|
| Badge | components/utility/badge.md |
| Calendar | components/utility/calendar.md |
| Chip | components/utility/chip.md |
| Command | components/utility/command.md |
| Context Menu | components/utility/context_menu.md |
| Dropdown Menu | components/utility/dropdown_menu.md |
| Overflow Marquee | components/utility/overflow_marquee.md |
| Refresh Trigger | components/utility/refresh_trigger.md |
[!TIP] 以上为精选列表。如需查看全部100+组件,请访问components目录。
Interactive Usage Tips
交互使用技巧
- Wait for Interaction: When using or
Popover, prefer using the provided controllers for programmatic access.Dialog - Lean on Extensions: Use ,
.h1(),.p()etc., instead of manually configuring.iconSmall()orTextStyle.size - Density Matters: Use or
DensityContainerto ensure spacing is consistent across platform-specific densities.theme.density
- 等待交互: 使用或
Popover时,优先使用提供的控制器进行程序化调用。Dialog - 利用扩展: 使用、
.h1()、.p()等扩展方法,替代手动配置.iconSmall()或TextStyle。size - 注意密度: 使用或
DensityContainer确保跨平台密度下的间距一致性。theme.density