shadcn-ui-flutter
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseShadcn UI for Flutter
适用于Flutter的Shadcn UI
This skill provides documentation and examples for using the package in Flutter.
shadcn_ui本技能提供了在Flutter中使用包的文档和示例。
shadcn_uiTheming 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 within to define your light and dark themes.
ShadThemeDataShadApp在中使用来定义你的亮色和暗色主题。
ShadAppShadThemeDataDetailed Guides
详细指南
- Theming
- Typography
- Material & Cupertino Interop
- Responsive
- Decorator
- 主题配置
- 排版
- Material与Cupertino互操作
- 响应式设计
- 装饰器
Components
组件
| Name | Description | Reference |
|---|---|---|
| Accordion | A vertically stacked set of interactive headings that each reveal a section of content. | accordion.md |
| Alert | Displays a callout for user attention. | alert.md |
| Avatar | An image element with a placeholder for representing the user. | avatar.md |
| Badge | Displays a badge or a component that looks like a badge. | badge.md |
| Breadcrumb | Displays the path to the current resource using a hierarchy of links. | breadcrumb.md |
| Button | Displays a button or a component that looks like a button. | button.md |
| Calendar | A date field component that allows users to enter and edit date. | calendar.md |
| Card | Displays a card with header, content, and footer. | card.md |
| Checkbox | A control that allows the user to toggle between checked and not checked. | checkbox.md |
| Context Menu | Displays a menu to the user — such as a set of actions or functions — triggered by a mouse right-click. | context-menu.md |
| Date Picker | A date picker component with range and presets. | date-picker.md |
| Dialog | A modal dialog that interrupts the user. | dialog.md |
| Form | Builds a form with validation and easy access to form fields values. | form.md |
| IconButton | Displays an icon button or a component that looks like a button with an icon. | icon-button.md |
| Input | Displays a form input field or a component that looks like an input field. | input.md |
| InputOTP | Accessible one-time password component with copy paste functionality. | input-otp.md |
| Menubar | A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. | menubar.md |
| Popover | Displays rich content in a portal, triggered by a button. | popover.md |
| Progress | Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. | progress.md |
| RadioGroup | A 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 |
| Resizable | Resizable panel groups and layouts. | resizable.md |
| Select | Displays a list of options for the user to pick from—triggered by a button. | select.md |
| Separator | Visually or semantically separates content. | separator.md |
| Sheet | Extends the Dialog component to display content that complements the main content of the screen. | sheet.md |
| Slider | An input where the user selects a value from within a given range. | slider.md |
| Sonner | An opinionated toast component. | sonner.md |
| Switch | A control that allows the user to toggle between checked and not checked. | switch.md |
| Table | A responsive table component. | table.md |
| Tabs | A set of layered sections of content—known as tab panels—that are displayed one at a time. | tabs.md |
| Textarea | Displays a form textarea or a component that looks like a textarea. | textarea.md |
| Time Picker | A time picker component. | time-picker.md |
| Toast | A succinct message that is displayed temporarily. | toast.md |
| Tooltip | A 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 , including light and dark theme support.
shadcn_uidart
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_uidart
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 class, for example .
LucideIconsLucideIcons.activityYou can browse all the icons here.
一款优质的图标库,用于Shadcn UI组件中。
你可以通过类使用Lucide图标,例如。
LucideIconsLucideIcons.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组件使用。