sion/monisuo

Fork 0

Files

sion 0e95890d68 youhua

2026-03-22 02:14:55 +08:00

4.4 KiB

Raw Blame History

Shadcn UI for Flutter - 集成完成

✅ 已完成

1. 技能文档创建

已创建完整的 shadcn_ui Flutter 技能文档，位于：

~/.agents/skills/shadcn-ui-flutter/SKILL.md

以后 LLM 可以通过这个技能文档了解如何使用 shadcn_ui。

2. 项目集成

已将 shadcn_ui 集成到 monisuo 项目：

更新 pubspec.yaml 添加 shadcn_ui 依赖
更新 main.dart 使用 ShadApp
创建 shadcn 风格的登录页面示例

📦 依赖

dependencies:
  shadcn_ui: ^0.2.4
  flutter_localizations: sdk: flutter

🚀 使用方式

1. 安装依赖

cd ~/Desktop/projects/monisuo/flutter_monisuo
flutter pub get

2. 导入组件

import 'package:shadcn_ui/shadcn_ui.dart';

3. 使用组件

// 按钮
ShadButton(child: Text('Primary'), onPressed: () {})
ShadButton.secondary(child: Text('Secondary'))
ShadButton.destructive(child: Text('Delete'))

// 输入框
ShadInputFormField(
  id: 'email',
  label: Text('Email'),
  placeholder: Text('Enter email'),
)

// 卡片
ShadCard(
  title: Text('Card Title'),
  description: Text('Card description'),
  child: Text('Content'),
)

// 对话框
showShadDialog(
  context: context,
  builder: (context) => ShadDialog(
    title: Text('Dialog'),
    actions: [
      ShadButton(child: Text('OK')),
    ],
  ),
)

🎨 主题

深色主题（默认）

ShadApp(
  themeMode: ThemeMode.dark,
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(),
  ),
)

可用颜色方案

blue - 蓝色
slate - 石板色（推荐深色模式）
zinc - 锌色（推荐浅色模式）
green - 绿色
red - 红色
violet - 紫色
等等...

切换主题

final colorScheme = ShadColorScheme.fromName('slate', brightness: Brightness.dark);

📝 迁移现有代码

Material Button → Shadcn Button

// Before
ElevatedButton(
  child: Text('Submit'),
  onPressed: () {},
)

// After
ShadButton(
  child: Text('Submit'),
  onPressed: () {},
)

Material TextField → Shadcn Input

// Before
TextField(
  decoration: InputDecoration(
    labelText: 'Email',
  ),
)

// After
ShadInputFormField(
  id: 'email',
  label: Text('Email'),
  placeholder: Text('Enter email'),
)

Material Card → Shadcn Card

// Before
Card(
  child: Text('Content'),
)

// After
ShadCard(
  title: Text('Title'),
  description: Text('Description'),
  child: Text('Content'),
)

🎯 核心组件

Button（按钮）

ShadButton - 主要按钮
ShadButton.secondary - 次要按钮
ShadButton.destructive - 危险按钮
ShadButton.outline - 边框按钮
ShadButton.ghost - 幽灵按钮
ShadButton.link - 链接按钮

Input（输入框）

ShadInput - 基础输入框
ShadInputFormField - 表单输入框

Card（卡片）

ShadCard - 卡片组件

Dialog（对话框）

ShadDialog - 对话框
ShadDialog.alert - 警告对话框

Form（表单）

ShadForm - 表单容器
ShadCheckboxFormField - 复选框
ShadSwitchFormField - 开关
ShadSelectFormField - 选择器
ShadDatePickerFormField - 日期选择器

其他组件

ShadAlert - 警告
ShadBadge - 徽章
ShadAvatar - 头像
ShadCalendar - 日历
ShadAccordion - 手风琴
ShadBreadcrumb - 面包屑
ShadSelect - 选择器
ShadCheckbox - 复选框
ShadSwitch - 开关
ShadIconButton - 图标按钮

🎬 动画

所有组件都支持 flutter_animate：

ShadButton(
  child: Text('Animated'),
).animate().fadeIn().slideX()

📚 图标

使用 Lucide Icons：

Icon(LucideIcons.home)
Icon(LucideIcons.settings)
Icon(LucideIcons.user)

浏览图标：https://lucide.dev/icons/

📖 完整文档

查看技能文档获取完整信息：

~/.agents/skills/shadcn-ui-flutter/SKILL.md

🚨 注意事项

必须使用 ShadApp：不要直接使用 MaterialApp
主题访问：使用 ShadTheme.of(context)
图标：使用 LucideIcons 而不是 Material Icons
表单：推荐使用 ShadForm 配合 FormField 组件

🔧 下一步

运行 flutter pub get 安装依赖
替换现有 Material 组件为 Shadcn 组件
测试所有页面功能
根据需要定制主题

状态: ✅ 技能创建完成，项目已集成版本: shadcn_ui 0.2.4

4.4 KiB Raw Blame History Unescape Escape