shadcn-flutter

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn 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:
  1. Add the dependency:
    shell
    flutter pub add shadcn_flutter
  2. Configure your
    main.dart
    :
    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});
    
      
      Widget build(BuildContext context) {
        return const Scaffold(
          child: Center(
            child: Text('Hello World!').h1(),
          ),
        );
      }
    }
使用Shadcn Flutter搭建全新Flutter应用:
  1. 添加依赖:
    shell
    flutter pub add shadcn_flutter
  2. 配置你的
    main.dart
    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});
    
      
      Widget build(BuildContext context) {
        return const Scaffold(
          child: Center(
            child: Text('Hello World!').h1(),
          ),
        );
      }
    }

Guides

指南

Learn the core concepts and design system fundamentals.
NameDescriptionPath
IntroductionOverview of the ecosystem, features, and FAQ.guides/introduction.md
InstallationStep-by-step setup for stable and experimental versions.guides/installation.md
ThemingCustomizing tokens like radius, density, and scaling.guides/theming.md
ColorsUsing the Tailwind-based color palette and ColorShades.guides/colors.md
TypographySemantic text styles and widget extensions.guides/typography.md
LayoutSpacing, gaps, and responsive layout helpers.guides/layout.md
IconsAccessing the 10,000+ bundled icons (Lucide, Radix, etc).guides/icons.md
InteropUsing Material and Cupertino widgets incrementally.guides/interop.md
State ManagementGuide to the built-in Data and Model state system.guides/state_management.md
Web PreloaderCustomizing 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

ComponentPath
Number Tickercomponents/animation/number_ticker.md
组件路径
Number Tickercomponents/animation/number_ticker.md

Control

Control

ComponentPath
Buttoncomponents/control/button.md
组件路径
Buttoncomponents/control/button.md

Disclosure

Disclosure

ComponentPath
Accordioncomponents/disclosure/accordion.md
Collapsiblecomponents/disclosure/collapsible.md
组件路径
Accordioncomponents/disclosure/accordion.md
Collapsiblecomponents/disclosure/collapsible.md

Display

Display

ComponentPath
Avatarcomponents/display/avatar.md
Chat Bubblecomponents/display/chat.md
Code Snippetcomponents/display/code_snippet.md
Tablecomponents/display/table.md
Trackercomponents/display/tracker.md
组件路径
Avatarcomponents/display/avatar.md
Chat Bubblecomponents/display/chat.md
Code Snippetcomponents/display/code_snippet.md
Tablecomponents/display/table.md
Trackercomponents/display/tracker.md

Feedback

Feedback

ComponentPath
Alertcomponents/feedback/alert.md
Alert Dialogcomponents/feedback/alert_dialog.md
Progresscomponents/feedback/progress.md
Skeletoncomponents/feedback/skeleton.md
Toastcomponents/feedback/toast.md
组件路径
Alertcomponents/feedback/alert.md
Alert Dialogcomponents/feedback/alert_dialog.md
Progresscomponents/feedback/progress.md
Skeletoncomponents/feedback/skeleton.md
Toastcomponents/feedback/toast.md

Form

Form

ComponentPath
AutoCompletecomponents/form/autocomplete.md
Checkboxcomponents/form/checkbox.md
Chip Inputcomponents/form/chip_input.md
Color Pickercomponents/form/color_picker.md
Date Pickercomponents/form/date_picker.md
Formcomponents/form/form.md
Formatted Inputcomponents/form/formatted_input.md
Text Inputcomponents/form/input.md
Input OTPcomponents/form/input_otp.md
Item Pickercomponents/form/item_picker.md
Phone Inputcomponents/form/phone_input.md
Radio Groupcomponents/form/radio_group.md
Selectcomponents/form/select.md
Slidercomponents/form/slider.md
Star Ratingcomponents/form/star_rating.md
Switchcomponents/form/switch.md
Text Areacomponents/form/text_area.md
Time Pickercomponents/form/time_picker.md
组件路径
AutoCompletecomponents/form/autocomplete.md
Checkboxcomponents/form/checkbox.md
Chip Inputcomponents/form/chip_input.md
Color Pickercomponents/form/color_picker.md
Date Pickercomponents/form/date_picker.md
Formcomponents/form/form.md
Formatted Inputcomponents/form/formatted_input.md
Text Inputcomponents/form/input.md
Input OTPcomponents/form/input_otp.md
Item Pickercomponents/form/item_picker.md
Phone Inputcomponents/form/phone_input.md
Radio Groupcomponents/form/radio_group.md
Selectcomponents/form/select.md
Slidercomponents/form/slider.md
Star Ratingcomponents/form/star_rating.md
Switchcomponents/form/switch.md
Text Areacomponents/form/text_area.md
Time Pickercomponents/form/time_picker.md

Layout

Layout

ComponentPath
Cardcomponents/layout/card.md
Card Imagecomponents/layout/card_image.md
Carouselcomponents/layout/carousel.md
Dividercomponents/layout/divider.md
Resizablecomponents/layout/resizable.md
Scaffoldcomponents/layout/scaffold.md
Sortablecomponents/layout/sortable.md
Steppercomponents/layout/stepper.md
Stepscomponents/layout/steps.md
Timelinecomponents/layout/timeline.md
组件路径
Cardcomponents/layout/card.md
Card Imagecomponents/layout/card_image.md
Carouselcomponents/layout/carousel.md
Dividercomponents/layout/divider.md
Resizablecomponents/layout/resizable.md
Scaffoldcomponents/layout/scaffold.md
Sortablecomponents/layout/sortable.md
Steppercomponents/layout/stepper.md
Stepscomponents/layout/steps.md
Timelinecomponents/layout/timeline.md

Navigation

Navigation

ComponentPath
Breadcrumbcomponents/navigation/breadcrumb.md
Dot Indicatorcomponents/navigation/dot_indicator.md
Menubarcomponents/navigation/menubar.md
Navigation Menucomponents/navigation/navigation_menu.md
Paginationcomponents/navigation/pagination.md
Switchercomponents/navigation/switcher.md
Tab Listcomponents/navigation/tab_list.md
Tab Panecomponents/navigation/tab_pane.md
Tabscomponents/navigation/tabs.md
Treecomponents/navigation/tree.md
组件路径
Breadcrumbcomponents/navigation/breadcrumb.md
Dot Indicatorcomponents/navigation/dot_indicator.md
Menubarcomponents/navigation/menubar.md
Navigation Menucomponents/navigation/navigation_menu.md
Paginationcomponents/navigation/pagination.md
Switchercomponents/navigation/switcher.md
Tab Listcomponents/navigation/tab_list.md
Tab Panecomponents/navigation/tab_pane.md
Tabscomponents/navigation/tabs.md
Treecomponents/navigation/tree.md

Overlay

Overlay

ComponentPath
Dialogcomponents/overlay/dialog.md
Drawercomponents/overlay/drawer.md
Hover Cardcomponents/overlay/hover_card.md
Popovercomponents/overlay/popover.md
Swipercomponents/overlay/swiper.md
Tooltipcomponents/overlay/tooltip.md
Windowcomponents/overlay/window.md
组件路径
Dialogcomponents/overlay/dialog.md
Drawercomponents/overlay/drawer.md
Hover Cardcomponents/overlay/hover_card.md
Popovercomponents/overlay/popover.md
Swipercomponents/overlay/swiper.md
Tooltipcomponents/overlay/tooltip.md
Windowcomponents/overlay/window.md

Utility

Utility

ComponentPath
Badgecomponents/utility/badge.md
Calendarcomponents/utility/calendar.md
Chipcomponents/utility/chip.md
Commandcomponents/utility/command.md
Context Menucomponents/utility/context_menu.md
Dropdown Menucomponents/utility/dropdown_menu.md
Overflow Marqueecomponents/utility/overflow_marquee.md
Refresh Triggercomponents/utility/refresh_trigger.md
[!TIP] This is a curated list. For the full list of all 100+ components, check the components directory.
组件路径
Badgecomponents/utility/badge.md
Calendarcomponents/utility/calendar.md
Chipcomponents/utility/chip.md
Commandcomponents/utility/command.md
Context Menucomponents/utility/context_menu.md
Dropdown Menucomponents/utility/dropdown_menu.md
Overflow Marqueecomponents/utility/overflow_marquee.md
Refresh Triggercomponents/utility/refresh_trigger.md
[!TIP] 以上为精选列表。如需查看全部100+组件,请访问components目录

Interactive Usage Tips

交互使用技巧

  1. Wait for Interaction: When using
    Popover
    or
    Dialog
    , prefer using the provided controllers for programmatic access.
  2. Lean on Extensions: Use
    .h1()
    ,
    .p()
    ,
    .iconSmall()
    etc., instead of manually configuring
    TextStyle
    or
    size
    .
  3. Density Matters: Use
    DensityContainer
    or
    theme.density
    to ensure spacing is consistent across platform-specific densities.
  1. 等待交互: 使用
    Popover
    Dialog
    时,优先使用提供的控制器进行程序化调用。
  2. 利用扩展: 使用
    .h1()
    .p()
    .iconSmall()
    等扩展方法,替代手动配置
    TextStyle
    size
  3. 注意密度: 使用
    DensityContainer
    theme.density
    确保跨平台密度下的间距一致性。