267 lines
4.4 KiB
Markdown
267 lines
4.4 KiB
Markdown
# 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 风格的登录页面示例
|
||
|
||
---
|
||
|
||
## 📦 依赖
|
||
|
||
```yaml
|
||
dependencies:
|
||
shadcn_ui: ^0.2.4
|
||
flutter_localizations: sdk: flutter
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 使用方式
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
cd ~/Desktop/projects/monisuo/flutter_monisuo
|
||
flutter pub get
|
||
```
|
||
|
||
### 2. 导入组件
|
||
|
||
```dart
|
||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||
```
|
||
|
||
### 3. 使用组件
|
||
|
||
```dart
|
||
// 按钮
|
||
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')),
|
||
],
|
||
),
|
||
)
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 主题
|
||
|
||
### 深色主题（默认）
|
||
|
||
```dart
|
||
ShadApp(
|
||
themeMode: ThemeMode.dark,
|
||
darkTheme: ShadThemeData(
|
||
brightness: Brightness.dark,
|
||
colorScheme: const ShadSlateColorScheme.dark(),
|
||
),
|
||
)
|
||
```
|
||
|
||
### 可用颜色方案
|
||
|
||
- `blue` - 蓝色
|
||
- `slate` - 石板色（推荐深色模式）
|
||
- `zinc` - 锌色（推荐浅色模式）
|
||
- `green` - 绿色
|
||
- `red` - 红色
|
||
- `violet` - 紫色
|
||
- 等等...
|
||
|
||
### 切换主题
|
||
|
||
```dart
|
||
final colorScheme = ShadColorScheme.fromName('slate', brightness: Brightness.dark);
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 迁移现有代码
|
||
|
||
### Material Button → Shadcn Button
|
||
|
||
```dart
|
||
// Before
|
||
ElevatedButton(
|
||
child: Text('Submit'),
|
||
onPressed: () {},
|
||
)
|
||
|
||
// After
|
||
ShadButton(
|
||
child: Text('Submit'),
|
||
onPressed: () {},
|
||
)
|
||
```
|
||
|
||
### Material TextField → Shadcn Input
|
||
|
||
```dart
|
||
// Before
|
||
TextField(
|
||
decoration: InputDecoration(
|
||
labelText: 'Email',
|
||
),
|
||
)
|
||
|
||
// After
|
||
ShadInputFormField(
|
||
id: 'email',
|
||
label: Text('Email'),
|
||
placeholder: Text('Enter email'),
|
||
)
|
||
```
|
||
|
||
### Material Card → Shadcn Card
|
||
|
||
```dart
|
||
// 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`：
|
||
|
||
```dart
|
||
ShadButton(
|
||
child: Text('Animated'),
|
||
).animate().fadeIn().slideX()
|
||
```
|
||
|
||
---
|
||
|
||
## 📚 图标
|
||
|
||
使用 Lucide Icons：
|
||
|
||
```dart
|
||
Icon(LucideIcons.home)
|
||
Icon(LucideIcons.settings)
|
||
Icon(LucideIcons.user)
|
||
```
|
||
|
||
浏览图标：https://lucide.dev/icons/
|
||
|
||
---
|
||
|
||
## 📖 完整文档
|
||
|
||
查看技能文档获取完整信息：
|
||
```
|
||
~/.agents/skills/shadcn-ui-flutter/SKILL.md
|
||
```
|
||
|
||
---
|
||
|
||
## 🚨 注意事项
|
||
|
||
1. **必须使用 ShadApp**：不要直接使用 MaterialApp
|
||
2. **主题访问**：使用 `ShadTheme.of(context)`
|
||
3. **图标**：使用 `LucideIcons` 而不是 Material Icons
|
||
4. **表单**：推荐使用 ShadForm 配合 FormField 组件
|
||
|
||
---
|
||
|
||
## 🔧 下一步
|
||
|
||
1. 运行 `flutter pub get` 安装依赖
|
||
2. 替换现有 Material 组件为 Shadcn 组件
|
||
3. 测试所有页面功能
|
||
4. 根据需要定制主题
|
||
|
||
---
|
||
|
||
**状态**: ✅ 技能创建完成，项目已集成
|
||
**版本**: shadcn_ui 0.2.4
|