shadcn-ui-flutter

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI for Flutter

适用于Flutter的Shadcn UI

This skill provides documentation and examples for using the
shadcn_ui
package in Flutter.
本技能提供了在Flutter中使用
shadcn_ui
包的文档和示例。

Theming and Customization

主题与定制

Shadcn UI for Flutter provides a powerful theming system. You can use built-in color schemes (blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, zinc) or create your own.
适用于Flutter的Shadcn UI提供了强大的主题系统。你可以使用内置配色方案(蓝色、灰色、绿色、中性色、橙色、红色、玫瑰色、石板色、石色、紫色、黄色、锌色),也可以创建自定义配色。

Applying a Theme

应用主题

Use
ShadThemeData
within
ShadApp
to define your light and dark themes.
ShadApp
中使用
ShadThemeData
来定义你的亮色和暗色主题。

Detailed Guides

详细指南

  • Theming
  • Typography
  • Material & Cupertino Interop
  • Responsive
  • Decorator
  • 主题配置
  • 排版
  • Material与Cupertino互操作
  • 响应式设计
  • 装饰器

Components

组件

NameDescriptionReference
AccordionA vertically stacked set of interactive headings that each reveal a section of content.accordion.md
AlertDisplays a callout for user attention.alert.md
AvatarAn image element with a placeholder for representing the user.avatar.md
BadgeDisplays a badge or a component that looks like a badge.badge.md
BreadcrumbDisplays the path to the current resource using a hierarchy of links.breadcrumb.md
ButtonDisplays a button or a component that looks like a button.button.md
CalendarA date field component that allows users to enter and edit date.calendar.md
CardDisplays a card with header, content, and footer.card.md
CheckboxA control that allows the user to toggle between checked and not checked.checkbox.md
Context MenuDisplays a menu to the user — such as a set of actions or functions — triggered by a mouse right-click.context-menu.md
Date PickerA date picker component with range and presets.date-picker.md
DialogA modal dialog that interrupts the user.dialog.md
FormBuilds a form with validation and easy access to form fields values.form.md
IconButtonDisplays an icon button or a component that looks like a button with an icon.icon-button.md
InputDisplays a form input field or a component that looks like an input field.input.md
InputOTPAccessible one-time password component with copy paste functionality.input-otp.md
MenubarA visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.menubar.md
PopoverDisplays rich content in a portal, triggered by a button.popover.md
ProgressDisplays an indicator showing the completion progress of a task, typically displayed as a progress bar.progress.md
RadioGroupA set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.radio-group.md
ResizableResizable panel groups and layouts.resizable.md
SelectDisplays a list of options for the user to pick from—triggered by a button.select.md
SeparatorVisually or semantically separates content.separator.md
SheetExtends the Dialog component to display content that complements the main content of the screen.sheet.md
SliderAn input where the user selects a value from within a given range.slider.md
SonnerAn opinionated toast component.sonner.md
SwitchA control that allows the user to toggle between checked and not checked.switch.md
TableA responsive table component.table.md
TabsA set of layered sections of content—known as tab panels—that are displayed one at a time.tabs.md
TextareaDisplays a form textarea or a component that looks like a textarea.textarea.md
Time PickerA time picker component.time-picker.md
ToastA succinct message that is displayed temporarily.toast.md
TooltipA popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.tooltip.md
名称描述参考
Accordion一组垂直堆叠的交互式标题,每个标题可展开对应的内容区域。accordion.md
Alert显示用于吸引用户注意的提示框。alert.md
Avatar带占位符的图片元素,用于代表用户。avatar.md
Badge显示徽章或类似徽章的组件。badge.md
Breadcrumb使用层级链接显示当前资源的路径。breadcrumb.md
Button显示按钮或类似按钮的组件。button.md
Calendar允许用户输入和编辑日期的日期字段组件。calendar.md
Card显示带有页眉、内容和页脚的卡片组件。card.md
Checkbox允许用户在选中和未选中状态间切换的控件。checkbox.md
Context Menu显示触发式菜单(如操作或功能集合),通常通过鼠标右键触发。context-menu.md
Date Picker支持范围选择和预设选项的日期选择器组件。date-picker.md
Dialog中断用户操作的模态对话框。dialog.md
Form构建带验证功能的表单,可便捷获取表单字段值。form.md
IconButton显示图标按钮或带图标的类按钮组件。icon-button.md
Input显示表单输入字段或类似输入框的组件。input.md
InputOTP支持复制粘贴功能的无障碍一次性密码组件。input-otp.md
Menubar桌面应用中常见的持久化菜单,提供快速访问常用命令的入口。menubar.md
Popover点击按钮后在悬浮层显示丰富内容的组件。popover.md
Progress显示任务完成进度的指示器,通常为进度条形式。progress.md
RadioGroup一组单选按钮,同一时间最多只能有一个按钮被选中。radio-group.md
Resizable可调整大小的面板组和布局组件。resizable.md
Select点击按钮后显示选项列表供用户选择的组件。select.md
Separator在视觉或语义上分隔内容的组件。separator.md
Sheet扩展Dialog组件,用于显示补充主内容的辅助内容。sheet.md
Slider允许用户在指定范围内选择数值的输入控件。slider.md
Sonner一款风格固定的提示框组件。sonner.md
Switch允许用户在选中和未选中状态间切换的控件。switch.md
Table响应式表格组件。table.md
Tabs一组分层内容区域(标签面板),同一时间仅显示一个区域。tabs.md
Textarea显示表单文本域或类似文本域的组件。textarea.md
Time Picker时间选择器组件。time-picker.md
Toast临时显示的简洁提示消息。toast.md
Tooltip当元素获得键盘焦点或鼠标悬停时,显示相关信息的弹出框。tooltip.md

Usage Examples

使用示例

Examples are available at the bottom of each component page.
每个组件页面底部都有示例。

Basic Setup

基础配置

Here is a complete example of a Counter App using
shadcn_ui
, including light and dark theme support.
dart
import 'package:shadcn_ui/shadcn_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return ShadApp(
      debugShowCheckedModeBanner: false,
      theme: ShadThemeData(
        brightness: Brightness.light,
        colorScheme: const ShadZincColorScheme.light(),
      ),
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadZincColorScheme.dark(),
      ),
      themeMode: ThemeMode.system,
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return Scaffold(
      appBar: AppBar(title: const Text('Shadcn Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
              style: theme.textTheme.muted,
            ),
            Text(
              '$_counter',
              style: theme.textTheme.h1,
            ),
          ],
        ),
      ),
      floatingActionButton: ShadButton(
        onPressed: _incrementCounter,
        child: const Icon(LucideIcons.plus),
      ),
    );
  }
}
以下是一个使用
shadcn_ui
构建的计数器应用完整示例,支持亮色和暗色主题。
dart
import 'package:shadcn_ui/shadcn_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return ShadApp(
      debugShowCheckedModeBanner: false,
      theme: ShadThemeData(
        brightness: Brightness.light,
        colorScheme: const ShadZincColorScheme.light(),
      ),
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadZincColorScheme.dark(),
      ),
      themeMode: ThemeMode.system,
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return Scaffold(
      appBar: AppBar(title: const Text('Shadcn Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
              style: theme.textTheme.muted,
            ),
            Text(
              '$_counter',
              style: theme.textTheme.h1,
            ),
          ],
        ),
      ),
      floatingActionButton: ShadButton(
        onPressed: _incrementCounter,
        child: const Icon(LucideIcons.plus),
      ),
    );
  }
}

Packages included in the library

库中包含的包

Flutter Shadcn UI consists of fantastic open-source libraries that are exported and you can use them without importing them into your project.
Flutter Shadcn UI包含多个优秀的开源库,这些库已被导出,你无需单独导入即可使用。
The flutter animate library is a very cool animations library extensively used in Shadcn UI Components.
With flutter_animate animations can be easily customized from the user, because components will take a
List<Effect>
.
flutter_animate是一个非常出色的动画库,在Shadcn UI组件中被广泛使用。
通过flutter_animate,用户可以轻松自定义动画,因为组件会接收一个
List<Effect>
参数。
A nice icon library that is used in Shadcn UI Components. You can use Lucide icons with the
LucideIcons
class, for example
LucideIcons.activity
.
You can browse all the icons here.
一款优质的图标库,用于Shadcn UI组件中。 你可以通过
LucideIcons
类使用Lucide图标,例如
LucideIcons.activity
你可以在此浏览所有图标:https://lucide.dev/icons/
A nice raw table (very performant) implementation used by the ShadTable component.
一款高性能的原生表格实现,被ShadTable组件使用。
The intl package provides internationalization and localization facilities, including message translation.
intl包提供国际化和本地化功能,包括消息翻译。
Support multiple image formats. Used by the ShadAvatar component.
支持多种图片格式。被ShadAvatar组件使用。