diff --git a/docs/src/content/docs/Components/card.mdx b/docs/src/content/docs/Components/card.mdx
index 600f50c5..02487af5 100644
--- a/docs/src/content/docs/Components/card.mdx
+++ b/docs/src/content/docs/Components/card.mdx
@@ -3,12 +3,14 @@ title: Card
sidebar:
order: 4
---
-import Preview from '../../../components/Preview.astro';
+
+import Preview from "../../../components/Preview.astro";
Displays a card with header, content, and footer.
- ```dart
+
+```dart
const frameworks = {
'next': 'Next.js',
'react': 'React',
@@ -23,56 +25,60 @@ class CardProject extends StatelessWidget {
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return ShadCard(
- width: 350,
- title: Text('Create project', style: theme.textTheme.h4),
- description: const Text('Deploy your new project in one-click.'),
- child: Padding(
- padding: const EdgeInsets.symmetric(vertical: 16),
- child: Column(
- mainAxisSize: MainAxisSize.min,
- crossAxisAlignment: CrossAxisAlignment.stretch,
- children: [
- const Text('Name'),
- const ShadInput(placeholder: 'Name of your project'),
- const SizedBox(height: 6),
- const Text('Framework'),
- ShadSelect(
- placeholder: const Text('Select'),
- options: frameworks.entries
- .map(
- (e) => ShadOption(value: e.key, child: Text(e.value)))
- .toList(),
- selectedOptionBuilder: (context, value) {
- return Text(frameworks[value]!);
- },
- onChanged: (value) {},
- ),
- ],
+ width: 350,
+ title: Text('Create project', style: theme.textTheme.h4),
+ description: const Text('Deploy your new project in one-click.'),
+ footer: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ ShadButton.outline(
+ child: const Text('Cancel'),
+ onPressed: () {},
),
- ),
- footer: Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ ShadButton(
+ child: const Text('Deploy'),
+ onPressed: () {},
+ ),
+ ],
+ ),
+ child: Padding(
+ padding: const EdgeInsets.symmetric(vertical: 16),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
- ShadButton.outline(
- child: const Text('Cancel'),
- onPressed: () {},
- ),
- ShadButton(
- child: const Text('Deploy'),
- onPressed: () {},
+ const Text('Name'),
+ const ShadInput(placeholder: Text('Name of your project')),
+ const SizedBox(height: 6),
+ const Text('Framework'),
+ ShadSelect(
+ placeholder: const Text('Select'),
+ options: frameworks.entries
+ .map((e) => ShadOption(value: e.key, child: Text(e.value)))
+ .toList(),
+ selectedOptionBuilder: (context, value) {
+ return Text(frameworks[value]!);
+ },
+ onChanged: (value) {},
),
],
),
- );
+ ),
+ );
}
}
```
+
## Notifications Example
+
```dart
+import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
const notifications = [
(
title: "Your call has been confirmed.",
@@ -108,103 +114,104 @@ class _CardNotificationsState extends State {
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return ShadCard(
- width: 380,
- title: const Text('Notifications'),
- description: const Text('You have 3 unread messages.'),
- child: Column(
- children: [
- const SizedBox(height: 16),
- Container(
- padding: const EdgeInsets.all(16),
- decoration: BoxDecoration(
- borderRadius: theme.radius,
- border: Border.all(color: theme.colorScheme.border),
- ),
- child: Row(
- children: [
- ShadImage.square(
- LucideIcons.bellRing,
- size: 24,
- color: theme.colorScheme.foreground,
- ),
- Expanded(
- child: Padding(
- padding: const EdgeInsets.only(left: 16),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text(
- 'Push Notifications',
- style: theme.textTheme.small,
- ),
- const SizedBox(height: 4),
- Text(
- 'Send notifications to device.',
- style: theme.textTheme.muted,
- )
- ],
- ),
+ width: 380,
+ title: const Text('Notifications'),
+ description: const Text('You have 3 unread messages.'),
+ footer: ShadButton(
+ width: double.infinity,
+ icon: const Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: ShadImage.square(LucideIcons.check, size: 16),
+ ),
+ onPressed: () {},
+ child: const Text('Mark all as read'),
+ ),
+ child: Column(
+ children: [
+ const SizedBox(height: 16),
+ Container(
+ padding: const EdgeInsets.all(16),
+ decoration: BoxDecoration(
+ borderRadius: theme.radius,
+ border: Border.all(color: theme.colorScheme.border),
+ ),
+ child: Row(
+ children: [
+ ShadImage.square(
+ LucideIcons.bellRing,
+ size: 24,
+ color: theme.colorScheme.foreground,
+ ),
+ Expanded(
+ child: Padding(
+ padding: const EdgeInsets.only(left: 16),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(
+ 'Push Notifications',
+ style: theme.textTheme.small,
+ ),
+ const SizedBox(height: 4),
+ Text(
+ 'Send notifications to device.',
+ style: theme.textTheme.muted,
+ )
+ ],
),
),
- ValueListenableBuilder(
- valueListenable: pushNotifications,
- builder: (context, value, child) {
- return ShadSwitch(
- value: value,
- onChanged: (v) => pushNotifications.value = v,
- );
- },
- ),
- ],
- ),
+ ),
+ ValueListenableBuilder(
+ valueListenable: pushNotifications,
+ builder: (context, value, child) {
+ return ShadSwitch(
+ value: value,
+ onChanged: (v) => pushNotifications.value = v,
+ );
+ },
+ ),
+ ],
),
- const SizedBox(height: 16),
- ...notifications
- .map(
- (n) => Row(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Container(
- width: 8,
- height: 8,
- margin: const EdgeInsets.only(top: 4),
- decoration: const BoxDecoration(
- color: Color(0xFF0CA5E9),
- shape: BoxShape.circle,
- ),
+ ),
+ const SizedBox(height: 16),
+ ...notifications
+ .map(
+ (n) => Row(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Container(
+ width: 8,
+ height: 8,
+ margin: const EdgeInsets.only(top: 4),
+ decoration: const BoxDecoration(
+ color: Color(0xFF0CA5E9),
+ shape: BoxShape.circle,
),
- Expanded(
- child: Padding(
- padding: const EdgeInsets.only(left: 16),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text('Your call has been confirmed.',
- style: theme.textTheme.small),
- const SizedBox(height: 4),
- Text(n.description, style: theme.textTheme.muted),
- ],
- ),
+ ),
+ Expanded(
+ child: Padding(
+ padding: const EdgeInsets.only(left: 16),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text('Your call has been confirmed.',
+ style: theme.textTheme.small),
+ const SizedBox(height: 4),
+ Text(n.description, style: theme.textTheme.muted),
+ ],
),
- )
- ],
- ),
- )
- .separatedBy(const SizedBox(height: 16)),
- const SizedBox(height: 16),
- ],
- ),
- footer: ShadButton(
- width: double.infinity,
- text: const Text('Mark all as read'),
- icon: const Padding(
- padding: EdgeInsets.only(right: 8),
- child: ShadImage.square(LucideIcons.check, size: 16),
- ),
- onPressed: () {},
- ),
- );
+ ),
+ )
+ ],
+ ),
+ )
+ .separatedBy(const SizedBox(height: 16)),
+ const SizedBox(height: 16),
+ ],
+ ),
+ );
}
}
```
+
diff --git a/docs/src/content/docs/Components/checkbox.mdx b/docs/src/content/docs/Components/checkbox.mdx
index f2053768..beb0764e 100644
--- a/docs/src/content/docs/Components/checkbox.mdx
+++ b/docs/src/content/docs/Components/checkbox.mdx
@@ -3,32 +3,45 @@ title: Checkbox
sidebar:
order: 4
---
-import Preview from '../../../components/Preview.astro';
+
+import Preview from "../../../components/Preview.astro";
A control that allows the user to toggle between checked and not checked.
- ```dart
-bool value = false;
-
-@override
-Widget build(BuildContext context) {
- return ShadCheckbox(
- value: value,
- onChanged: (v) => setState(() => value = v),
- label: const Text('Accept terms and conditions'),
- sublabel: const Text(
- 'You agree to our Terms of Service and Privacy Policy.',
- ),
- );
+
+```dart
+class CheckboxSample extends StatefulWidget {
+ const CheckboxSample({super.key});
+
+ @override
+ State createState() => _CheckboxSampleState();
+}
+
+class _CheckboxSampleState extends State {
+ bool value = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return ShadCheckbox(
+ value: value,
+ onChanged: (v) => setState(() => value = v),
+ label: const Text('Accept terms and conditions'),
+ sublabel: const Text(
+ 'You agree to our Terms of Service and Privacy Policy.',
+ ),
+ );
+ }
}
```
+
## Form
- ```dart
+
+```dart
ShadCheckboxFormField(
id: 'terms',
initialValue: false,
@@ -45,4 +58,5 @@ ShadCheckboxFormField(
},
)
```
+
diff --git a/docs/src/content/docs/Components/context-menu.mdx b/docs/src/content/docs/Components/context-menu.mdx
index cd50986e..b7d03ab6 100644
--- a/docs/src/content/docs/Components/context-menu.mdx
+++ b/docs/src/content/docs/Components/context-menu.mdx
@@ -25,16 +25,6 @@ class ContextMenuPage extends StatelessWidget {
padding: const EdgeInsets.all(16),
child: ShadContextMenuRegion(
constraints: const BoxConstraints(minWidth: 300),
- child: Container(
- width: 300,
- height: 200,
- alignment: Alignment.center,
- decoration: BoxDecoration(
- border: Border.all(color: theme.colorScheme.border),
- borderRadius: BorderRadius.circular(8),
- ),
- child: const Text('Right click here'),
- ),
items: [
const ShadContextMenuItem.inset(
child: Text('Back'),
@@ -47,7 +37,6 @@ class ContextMenuPage extends StatelessWidget {
child: Text('Reload'),
),
const ShadContextMenuItem.inset(
- child: Text('More Tools'),
trailing: ShadImage.square(
LucideIcons.chevronRight,
size: 16,
@@ -67,6 +56,7 @@ class ContextMenuPage extends StatelessWidget {
child: Text('Developer Tools'),
),
],
+ child: Text('More Tools'),
),
const Divider(height: 8),
const ShadContextMenuItem(
@@ -98,6 +88,16 @@ class ContextMenuPage extends StatelessWidget {
),
const ShadContextMenuItem.inset(child: Text('Colm Tuite')),
],
+ child: Container(
+ width: 300,
+ height: 200,
+ alignment: Alignment.center,
+ decoration: BoxDecoration(
+ border: Border.all(color: theme.colorScheme.border),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: const Text('Right click here'),
+ ),
),
),
);
diff --git a/docs/src/content/docs/Components/dialog.mdx b/docs/src/content/docs/Components/dialog.mdx
index 5c4d6de4..cad3061a 100644
--- a/docs/src/content/docs/Components/dialog.mdx
+++ b/docs/src/content/docs/Components/dialog.mdx
@@ -3,92 +3,112 @@ title: Dialog
sidebar:
order: 4
---
-import Preview from '../../../components/Preview.astro';
+
+import Preview from "../../../components/Preview.astro";
A modal dialog that interrupts the user.
- ```dart
+
+```dart
final profile = [
(title: 'Name', value: 'Alexandru'),
(title: 'Username', value: 'nank1ro'),
];
-ShadButton.outline(
- child: const Text('Edit Profile'),
- onPressed: () {
- showShadDialog(
- context: context,
- builder: (context) => ShadDialog(
- title: const Text('Edit Profile'),
- description: const Text(
- "Make changes to your profile here. Click save when you're done"),
- child: Container(
- width: 375,
- padding: const EdgeInsets.symmetric(vertical: 20),
- child: Column(
- mainAxisSize: MainAxisSize.min,
- crossAxisAlignment: CrossAxisAlignment.end,
- children: profile
- .map(
- (p) => Row(
- children: [
- Expanded(
- child: Text(
- p.title,
- textAlign: TextAlign.end,
- style: theme.textTheme.small,
- ),
- ),
- const SizedBox(width: 16),
- Expanded(
- flex: 3,
- child: ShadInput(initialValue: p.value),
+class DialogExample extends StatelessWidget {
+ const DialogExample({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ final theme = ShadTheme.of(context);
+ return ShadButton.outline(
+ child: const Text('Edit Profile'),
+ onPressed: () {
+ showShadDialog(
+ context: context,
+ builder: (context) => ShadDialog(
+ title: const Text('Edit Profile'),
+ description: const Text(
+ "Make changes to your profile here. Click save when you're done"),
+ actions: const [ShadButton(child: Text('Save changes'))],
+ child: Container(
+ width: 375,
+ padding: const EdgeInsets.symmetric(vertical: 20),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ crossAxisAlignment: CrossAxisAlignment.end,
+ children: profile
+ .map(
+ (p) => Row(
+ children: [
+ Expanded(
+ child: Text(
+ p.title,
+ textAlign: TextAlign.end,
+ style: theme.textTheme.small,
+ ),
+ ),
+ const SizedBox(width: 16),
+ Expanded(
+ flex: 3,
+ child: ShadInput(initialValue: p.value),
+ ),
+ ],
),
- ],
- ),
- )
- .toList(),
+ )
+ .toList(),
+ ),
+ ),
),
- ),
- actions: const [ShadButton(child: Text('Save changes'))],
- ),
+ );
+ },
);
- },
-),
+ }
+}
```
+
## Alert
- ```dart
-ShadButton.outline(
- child: const Text('Show Dialog'),
- onPressed: () {
- showShadDialog(
- context: context,
- builder: (context) => ShadDialog.alert(
- title: const Text('Are you absolutely sure?'),
- description: const Padding(
- padding: EdgeInsets.only(bottom: 8),
- child: Text(
- 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
- ),
- ),
- actions: [
- ShadButton.outline(
- child: const Text('Cancel'),
- onPressed: () => Navigator.of(context).pop(false),
- ),
- ShadButton(
- child: const Text('Continue'),
- onPressed: () => Navigator.of(context).pop(true),
+
+```dart
+class DialogExample extends StatelessWidget {
+ const DialogExample({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return ShadButton.outline(
+ child: const Text('Show Dialog'),
+ onPressed: () {
+ showShadDialog(
+ context: context,
+ builder: (context) => ShadDialog.alert(
+ title: const Text('Are you absolutely sure?'),
+ description: const Padding(
+ padding: EdgeInsets.only(bottom: 8),
+ child: Text(
+ 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
+ ),
+ ),
+ actions: [
+ ShadButton.outline(
+ child: const Text('Cancel'),
+ onPressed: () => Navigator.of(context).pop(false),
+ ),
+ ShadButton(
+ child: const Text('Continue'),
+ onPressed: () => Navigator.of(context).pop(true),
+ ),
+ ],
),
- ],
- ),
+ );
+ },
);
- },
-),
+ }
+}
```
+
diff --git a/docs/src/content/docs/Components/input.mdx b/docs/src/content/docs/Components/input.mdx
index 0f601061..d244e26c 100644
--- a/docs/src/content/docs/Components/input.mdx
+++ b/docs/src/content/docs/Components/input.mdx
@@ -4,26 +4,29 @@ sidebar:
order: 4
---
-import Preview from '../../../components/Preview.astro';
+import Preview from "../../../components/Preview.astro";
Displays a form input field or a component that looks like an input field.
- ```dart
+
+```dart
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 320),
child: const ShadInput(
- placeholder: 'Email',
+ placeholder: Text('Email'),
keyboardType: TextInputType.emailAddress,
),
),
```
+
## With prefix and suffix
- ```dart
+
+```dart
class PasswordInput extends StatefulWidget {
const PasswordInput({super.key});
@@ -63,12 +66,14 @@ class _PasswordInputState extends State {
}
}
```
+
## Form
- ```dart
+
+```dart
ShadInputFormField(
id: 'username',
label: const Text('Username'),
@@ -83,4 +88,5 @@ ShadInputFormField(
},
),
```
+
diff --git a/docs/src/content/docs/Components/popover.mdx b/docs/src/content/docs/Components/popover.mdx
index 93a04fb2..e9c2196f 100644
--- a/docs/src/content/docs/Components/popover.mdx
+++ b/docs/src/content/docs/Components/popover.mdx
@@ -4,12 +4,13 @@ sidebar:
order: 4
---
-import Preview from '../../../components/Preview.astro';
+import Preview from "../../../components/Preview.astro";
Displays rich content in a portal, triggered by a button.
- ```dart
+
+```dart
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
@@ -80,14 +81,14 @@ class _PopoverPageState extends State {
),
),
child: ShadButton.outline(
- child: const Text('Open popover'),
onPressed: popoverController.toggle,
+ child: const Text('Open popover'),
),
),
),
);
}
}
-
```
+
diff --git a/docs/src/content/docs/Components/select.mdx b/docs/src/content/docs/Components/select.mdx
index d5a0de2c..61fd8af3 100644
--- a/docs/src/content/docs/Components/select.mdx
+++ b/docs/src/content/docs/Components/select.mdx
@@ -19,32 +19,36 @@ final fruits = {
'pineapple': 'Pineapple',
};
-@override
-Widget build(BuildContext context) {
-return ConstrainedBox(
- constraints: const BoxConstraints(minWidth: 180),
- child: ShadSelect(
- placeholder: const Text('Select a fruit'),
- options: [
- Padding(
- padding: const EdgeInsets.fromLTRB(32, 6, 6, 6),
- child: Text(
- 'Fruits',
- style: theme.textTheme.muted.copyWith(
- fontWeight: FontWeight.w600,
- color: theme.colorScheme.popoverForeground,
+class SelectExample extends StatelessWidget {
+ const SelectExample({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ final theme = ShadTheme.of(context);
+ return ConstrainedBox(
+ constraints: const BoxConstraints(minWidth: 180),
+ child: ShadSelect(
+ placeholder: const Text('Select a fruit'),
+ options: [
+ Padding(
+ padding: const EdgeInsets.fromLTRB(32, 6, 6, 6),
+ child: Text(
+ 'Fruits',
+ style: theme.textTheme.muted.copyWith(
+ fontWeight: FontWeight.w600,
+ color: theme.colorScheme.popoverForeground,
+ ),
+ textAlign: TextAlign.start,
+ ),
),
- textAlign: TextAlign.start,
- ),
+ ...fruits.entries
+ .map((e) => ShadOption(value: e.key, child: Text(e.value))),
+ ],
+ selectedOptionBuilder: (context, value) => Text(fruits[value]!),
+ onChanged: print,
),
- ...fruits.entries.map(
- (e) => ShadOption(value: e.key, child: Text(e.value))),
- ],
- selectedOptionBuilder: (context, value) =>
- Text(fruits[value]!),
- onChanged: print,
- ),
-);
+ );
+ }
}
```
@@ -117,22 +121,26 @@ List getTimezonesWidgets(ShadThemeData theme) {
return widgets;
}
-@override
-Widget build(BuildContext context) {
- return ConstrainedBox(
- constraints: const BoxConstraints(minWidth: 280),
- child: ShadSelect(
- placeholder: const Text('Select a timezone'),
- options: getTimezonesWidgets(theme),
- selectedOptionBuilder: (context, value) {
- final timezone = timezones.entries
- .firstWhere(
- (element) => element.value.containsKey(value))
- .value[value];
- return Text(timezone!);
- },
- ),
- );
+class SelectExample extends StatelessWidget {
+ const SelectExample({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ final theme = ShadTheme.of(context);
+ return ConstrainedBox(
+ constraints: const BoxConstraints(minWidth: 280),
+ child: ShadSelect(
+ placeholder: const Text('Select a timezone'),
+ options: getTimezonesWidgets(theme),
+ selectedOptionBuilder: (context, value) {
+ final timezone = timezones.entries
+ .firstWhere((element) => element.value.containsKey(value))
+ .value[value];
+ return Text(timezone!);
+ },
+ ),
+ );
+ }
}
```
@@ -149,25 +157,31 @@ final verifiedEmails = [
'm@support.com',
];
-ShadSelectFormField(
- id: 'email',
- minWidth: 350,
- initialValue: null,
- options: verifiedEmails
- .map((email) =>
- ShadOption(value: email, child: Text(email)))
- .toList(),
- selectedOptionBuilder: (context, value) => value == 'none'
- ? const Text('Select a verified email to display')
- : Text(value),
- placeholder: const Text('Select a verified email to display'),
- validator: (v) {
- if (v == null) {
- return 'Please select an email to display';
- }
- return null;
- },
-),
+class SelectFormField extends StatelessWidget {
+ const SelectFormField({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return ShadSelectFormField(
+ id: 'email',
+ minWidth: 350,
+ initialValue: null,
+ options: verifiedEmails
+ .map((email) => ShadOption(value: email, child: Text(email)))
+ .toList(),
+ selectedOptionBuilder: (context, value) => value == 'none'
+ ? const Text('Select a verified email to display')
+ : Text(value),
+ placeholder: const Text('Select a verified email to display'),
+ validator: (v) {
+ if (v == null) {
+ return 'Please select an email to display';
+ }
+ return null;
+ },
+ );
+ }
+}
```
@@ -204,8 +218,6 @@ class _SelectWithSearchState extends State {
@override
Widget build(BuildContext context) {
return ShadSelect.withSearch(
- enabled: enabled,
- focusNode: focusNodes[2],
minWidth: 180,
maxWidth: 300,
placeholder: const Text('Select framework...'),
@@ -253,6 +265,14 @@ If you tap outside the popover, it will close.
```dart
+final fruits = {
+ 'apple': 'Apple',
+ 'banana': 'Banana',
+ 'blueberry': 'Blueberry',
+ 'grapes': 'Grapes',
+ 'pineapple': 'Pineapple',
+};
+
class SelectMultiple extends StatelessWidget {
const SelectMultiple({super.key});
diff --git a/docs/src/content/docs/Components/switch.mdx b/docs/src/content/docs/Components/switch.mdx
index 273c69c6..76c1e166 100644
--- a/docs/src/content/docs/Components/switch.mdx
+++ b/docs/src/content/docs/Components/switch.mdx
@@ -3,23 +3,35 @@ title: Switch
sidebar:
order: 4
---
-import Preview from '../../../components/Preview.astro';
+
+import Preview from "../../../components/Preview.astro";
A control that allows the user to toggle between checked and not checked.
- ```dart
-bool value = false;
-
-@override
-Widget build(BuildContext context) {
- return ShadSwitch(
- value: value,
- onChanged: (v) => setState(() => value = v),
- label: const Text('Airplane Mode'),
- );
+
+```dart
+class SwitchExample extends StatefulWidget {
+ const SwitchExample({super.key});
+
+ @override
+ State createState() => _SwitchExampleState();
+}
+
+class _SwitchExampleState extends State {
+ bool value = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return ShadSwitch(
+ value: value,
+ onChanged: (v) => setState(() => value = v),
+ label: const Text('Airplane Mode'),
+ );
+ }
}
```
+
## Form
diff --git a/docs/src/content/docs/Components/table.mdx b/docs/src/content/docs/Components/table.mdx
index c80bde76..edc7477f 100644
--- a/docs/src/content/docs/Components/table.mdx
+++ b/docs/src/content/docs/Components/table.mdx
@@ -3,7 +3,8 @@ title: Table
sidebar:
order: 4
---
-import Preview from '../../../components/Preview.astro';
+
+import Preview from "../../../components/Preview.astro";
A responsive table component.
@@ -13,6 +14,7 @@ Use the `ShadTable.list` widget to create a table from a two dimensional array o
Use it just for **small** tables, because every child will be created.
+
```dart
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
@@ -135,6 +137,7 @@ class TablePage extends StatelessWidget {
}
}
```
+
## Builder
@@ -142,6 +145,7 @@ class TablePage extends StatelessWidget {
You can also use a builder to create the table.
This method is preferred for **large** tables because widgets are created on demand.
Here it is the same table as above, but using a builder.
+
```dart
const invoices = [
[
@@ -195,61 +199,65 @@ final headings = [
'Amount',
];
-@override
-Widget build(BuildContext context) {
- return ShadTable(
- columnCount: invoices[0].length,
- rowCount: invoices.length,
- header: (context, column) {
- final isLast = column == headings.length - 1;
- return ShadTableCell.header(
- alignment: isLast ? Alignment.centerRight : null,
- child: Text(headings[column]),
- );
- },
- columnSpanExtent: (index) {
- if (index == 2) return const FixedTableSpanExtent(150);
- if (index == 3) {
- return const MaxTableSpanExtent(
- FixedTableSpanExtent(120),
- RemainingTableSpanExtent(),
- );
- }
- return null;
- },
- builder: (context, index) {
- final invoice = invoices[index.row];
- return ShadTableCell(
- alignment: index.column == invoice.length - 1
- ? Alignment.centerRight
- : Alignment.centerLeft,
- child: Text(
- invoice[index.column],
- style: index.column == 0
- ? const TextStyle(fontWeight: FontWeight.w500)
- : null,
- ),
- );
- },
- footer: (context, column) {
- if (column == 0) {
- return const ShadTableCell.footer(
- child: Text(
- 'Total',
- style: TextStyle(fontWeight: FontWeight.w500),
- ),
+class TableExample extends StatelessWidget {
+ const TableExample({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return ShadTable(
+ columnCount: invoices[0].length,
+ rowCount: invoices.length,
+ header: (context, column) {
+ final isLast = column == headings.length - 1;
+ return ShadTableCell.header(
+ alignment: isLast ? Alignment.centerRight : null,
+ child: Text(headings[column]),
);
- }
- if (column == 3) {
- return const ShadTableCell.footer(
- alignment: Alignment.centerRight,
+ },
+ columnSpanExtent: (index) {
+ if (index == 2) return const FixedTableSpanExtent(150);
+ if (index == 3) {
+ return const MaxTableSpanExtent(
+ FixedTableSpanExtent(120),
+ RemainingTableSpanExtent(),
+ );
+ }
+ return null;
+ },
+ builder: (context, index) {
+ final invoice = invoices[index.row];
+ return ShadTableCell(
+ alignment: index.column == invoice.length - 1
+ ? Alignment.centerRight
+ : Alignment.centerLeft,
child: Text(
- r'$2500.00',
+ invoice[index.column],
+ style: index.column == 0
+ ? const TextStyle(fontWeight: FontWeight.w500)
+ : null,
),
);
- }
- return const ShadTableCell(child: SizedBox());
- },
- );
+ },
+ footer: (context, column) {
+ if (column == 0) {
+ return const ShadTableCell.footer(
+ child: Text(
+ 'Total',
+ style: TextStyle(fontWeight: FontWeight.w500),
+ ),
+ );
+ }
+ if (column == 3) {
+ return const ShadTableCell.footer(
+ alignment: Alignment.centerRight,
+ child: Text(
+ r'$2500.00',
+ ),
+ );
+ }
+ return const ShadTableCell(child: SizedBox());
+ },
+ );
+ }
}
```
diff --git a/docs/src/content/docs/Components/tabs.mdx b/docs/src/content/docs/Components/tabs.mdx
index a7f1f5d4..31cd8612 100644
--- a/docs/src/content/docs/Components/tabs.mdx
+++ b/docs/src/content/docs/Components/tabs.mdx
@@ -3,69 +3,79 @@ title: Tabs
sidebar:
order: 4
---
-import Preview from '../../../components/Preview.astro';
+
+import Preview from "../../../components/Preview.astro";
A set of layered sections of content—known as tab panels—that are displayed one at a time.
+
```dart
-ShadTabs(
- value: 'account',
- tabBarConstraints: const BoxConstraints(maxWidth: 400),
- contentConstraints: const BoxConstraints(maxWidth: 400),
- tabs: [
- ShadTab(
+class TabsExample extends StatelessWidget {
+ const TabsExample({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return ShadTabs(
value: 'account',
- child: const Text('Account'),
- content: ShadCard(
- title: const Text('Account'),
- description: const Text(
- "Make changes to your account here. Click save when you're done."),
- content: Column(
- mainAxisSize: MainAxisSize.min,
- children: [
- const SizedBox(height: 16),
- ShadInputFormField(
- label: const Text('Name'),
- initialValue: 'Ale',
+ tabBarConstraints: const BoxConstraints(maxWidth: 400),
+ contentConstraints: const BoxConstraints(maxWidth: 400),
+ tabs: [
+ ShadTab(
+ value: 'account',
+ content: ShadCard(
+ title: const Text('Account'),
+ description: const Text(
+ "Make changes to your account here. Click save when you're done."),
+ footer: const ShadButton(child: Text('Save changes')),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ const SizedBox(height: 16),
+ ShadInputFormField(
+ label: const Text('Name'),
+ initialValue: 'Ale',
+ ),
+ const SizedBox(height: 8),
+ ShadInputFormField(
+ label: const Text('Username'),
+ initialValue: 'nank1ro',
+ ),
+ const SizedBox(height: 16),
+ ],
),
- const SizedBox(height: 8),
- ShadInputFormField(
- label: const Text('Username'),
- initialValue: 'nank1ro',
- ),
- const SizedBox(height: 16),
- ],
+ ),
+ child: const Text('Account'),
),
- footer: const ShadButton(child: Text('Save changes')),
- ),
- ),
- ShadTab(
- value: 'password',
- child: const Text('Password'),
- content: ShadCard(
- title: const Text('Password'),
- description: const Text(
- "Change your password here. After saving, you'll be logged out."),
- content: Column(
- children: [
- const SizedBox(height: 16),
- ShadInputFormField(
- label: const Text('Current password'),
- obscureText: true,
- ),
- const SizedBox(height: 8),
- ShadInputFormField(
- label: const Text('New password'),
- obscureText: true,
+ ShadTab(
+ value: 'password',
+ content: ShadCard(
+ title: const Text('Password'),
+ description: const Text(
+ "Change your password here. After saving, you'll be logged out."),
+ footer: const ShadButton(child: Text('Save password')),
+ child: Column(
+ children: [
+ const SizedBox(height: 16),
+ ShadInputFormField(
+ label: const Text('Current password'),
+ obscureText: true,
+ ),
+ const SizedBox(height: 8),
+ ShadInputFormField(
+ label: const Text('New password'),
+ obscureText: true,
+ ),
+ const SizedBox(height: 16),
+ ],
),
- const SizedBox(height: 16),
- ],
+ ),
+ child: const Text('Password'),
),
- footer: const ShadButton(child: Text('Save password')),
- ),
- ),
- ],
-),
+ ],
+ );
+ }
+}
```
+
diff --git a/docs/src/content/docs/Components/toast.mdx b/docs/src/content/docs/Components/toast.mdx
index bdfb9c91..7fc22a5d 100644
--- a/docs/src/content/docs/Components/toast.mdx
+++ b/docs/src/content/docs/Components/toast.mdx
@@ -9,7 +9,8 @@ import Preview from "../../../components/Preview.astro";
A succinct message that is displayed temporarily.
- ```dart
+
+```dart
ShadButton.outline(
child: const Text('Add to calendar'),
onPressed: () {
@@ -27,12 +28,14 @@ ShadButton.outline(
},
),
```
+
## Simple
- ```dart
+
+```dart
ShadButton.outline(
child: const Text('Show Toast'),
onPressed: () {
@@ -44,12 +47,14 @@ ShadButton.outline(
},
),
```
+
## With Title
- ```dart
+
+```dart
ShadButton.outline(
child: const Text('Show Toast'),
onPressed: () {
@@ -63,12 +68,14 @@ ShadButton.outline(
},
),
```
+
## With Action
- ```dart
+
+```dart
ShadButton.outline(
child: const Text('Show Toast'),
onPressed: () {
@@ -86,12 +93,16 @@ ShadButton.outline(
},
),
```
+
## Destructive
+
```dart
+final theme = ShadTheme.of(context);
+
ShadButton.outline(
child: const Text('Show Toast'),
onPressed: () {
@@ -114,4 +125,5 @@ ShadButton.outline(
},
),
```
+