shadcn-ui-flutter

Flutter 版 Shadcn UI

此技能提供在 Flutter 中使用 shadcn_ui 包的文档和示例。

主题与自定义

Flutter 版 Shadcn UI 提供强大的主题系统。你可以使用内置配色方案（blue、gray、green、neutral、orange、red、rose、slate、stone、violet、yellow、zinc），也可以创建自己的配色方案。

应用主题

在 ShadApp 中使用 ShadThemeData 定义浅色和深色主题。

详细指南

• 主题
• 排版
• Material 与 Cupertino 互操作
• 响应式
• 装饰器

组件

名称	描述	参考
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	一种主观设计风格的 Toast 组件。	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

使用示例

每个组件页面底部都提供了示例。

基本设置

以下是一个使用 shadcn_ui 的完整计数器应用示例，包含对浅色和深色主题的支持。

import 'package:shadcn_ui/shadcn_ui.dart';

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

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

  @override
  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});

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

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

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

  @override
  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),
      ),
    );
  }
}

库中包含的包

Flutter Shadcn UI 由一些很棒的开源库组成，这些库会导出供你使用，无需将它们导入项目。

flutter_animate

flutter animate 库是一款非常出色的动画库，在 Shadcn UI 组件中得到了广泛使用。

使用 flutter_animate 可以轻松自定义动画效果，因为组件会接收一个 List<Effect>。

lucide_icons_flutter

一款用于 Shadcn UI 组件的优秀图标库。 你可以通过 LucideIcons 类使用 Lucide 图标，例如 LucideIcons.activity。

你可以在此处浏览所有图标。

two_dimensional_scrollables

一款优秀的原生表格（性能非常出色）实现，由 ShadTable 组件使用。

intl

intl 包提供国际化和本地化功能，包括消息翻译。

universal_image

支持多种图像格式，由 ShadAvatar 组件使用。