Flutter Shadcn UI

https://flutter-shadcn-ui.mariuti.com/
Admin
Flutter Shadcn UI is a Flutter UI library that provides Shadcn-style components and allows...
Tokens:45,581
Snippets:267
Trust Score:5.2
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Shadcn UI for Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Installs the shadcn_ui package for your Flutter project. This can be done via the terminal using 'flutter pub add' or by manually updating the pubspec.yaml file.

```bash
flutter pub add shadcn_ui
```

```diff
dependencies:
+    shadcn_ui: ^0.2.4 # replace with the latest version
```

--------------------------------

### Basic ShadAlert Example

Source: https://flutter-shadcn-ui.mariuti.com/llms

Shows a standard ShadAlert component used for displaying informational messages. It includes an icon, a title, and a description. The `LucideIcons.terminal` is used as the example icon.

```dart
ShadAlert(
  icon: Icon(LucideIcons.terminal),
  title: Text('Heads up!'),
  description:
      Text('You can add components to your app using the cli.'),
)
```

--------------------------------

### Install Shadcn UI for Flutter

Source: https://flutter-shadcn-ui.mariuti.com/index

Adds the shadcn_ui package to your Flutter project. This can be done via the command line or by manually updating the `pubspec.yaml` file.

```bash
flutter pub add shadcn_ui
```

```yaml
dependencies:
    shadcn_ui: ^0.2.4 # replace with the latest version
```

--------------------------------

### Basic Slider Input in Dart

Source: https://flutter-shadcn-ui.mariuti.com/llms

Shows a simple implementation of the Shadcn UI Slider component. This example sets an initial value and a maximum value for the slider.

```dart
ShadSlider(
  initialValue: 33,
  max: 100,
),

```

--------------------------------

### Primary ShadBadge Example

Source: https://flutter-shadcn-ui.mariuti.com/llms

Shows the primary style of the ShadBadge component. This is a simple badge with text content, suitable for indicating status or categories.

```dart
ShadBadge(
  child: const Text('Primary'),
)
```

--------------------------------

### Outline ShadBadge Example

Source: https://flutter-shadcn-ui.mariuti.com/llms

Displays the outline style of the ShadBadge. This variant has a border and transparent background, providing a lighter visual emphasis.

```dart
ShadBadge.outline(
  child: const Text('Outline'),
)
```

--------------------------------

### Secondary ShadBadge Example

Source: https://flutter-shadcn-ui.mariuti.com/llms

Presents the secondary style of the ShadBadge component. Similar to the primary badge, but with a different default color scheme.

```dart
ShadBadge.secondary(
  child: const Text('Secondary'),
)
```

--------------------------------

### Multiple ShadAccordion Example

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates how to create a ShadAccordion that allows multiple items to be open simultaneously. This is achieved by using the `.multiple` constructor for the ShadAccordion. The structure and data are similar to the basic accordion.

```dart
final details = [
  (
    title: 'Is it acceptable?',
    content: 'Yes. It adheres to the WAI-ARIA design pattern.',
  ),
  (
    title: 'Is it styled?',
    content:
        "Yes. It comes with default styles that matches the other components' aesthetic.",
  ),
  (
    title: 'Is it animated?',
    content:
        "Yes. It's animated by default, but you can disable it if you prefer.",
  ),
];

@override
Widget build(BuildContext context) {
  return ShadAccordion<({String content, String title})>.multiple(
    children: details.map(
      (detail) => ShadAccordionItem(
        value: detail,
        title: Text(detail.title),
        child: Text(detail.content),
      ),
    ),
  );
}
```

--------------------------------

### Basic ShadAccordion Example

Source: https://flutter-shadcn-ui.mariuti.com/llms

Implements a basic ShadAccordion component in Flutter. It displays a list of items, each with a title and collapsible content. The `details` list defines the content for each accordion item.

```dart
final details = [
  (
    title: 'Is it acceptable?',
    content: 'Yes. It adheres to the WAI-ARIA design pattern.',
  ),
  (
    title: 'Is it styled?',
    content:
        "Yes. It comes with default styles that matches the other components' aesthetic.",
  ),
  (
    title: 'Is it animated?',
    content:
        "Yes. It's animated by default, but you can disable it if you prefer.",
  ),
];

@override
Widget build(BuildContext context) {
  return ShadAccordion<({String content, String title})>(
    children: details.map(
      (detail) => ShadAccordionItem(
        value: detail,
        title: Text(detail.title),
        child: Text(detail.content),
      ),
    ),
  );
}
```

--------------------------------

### ShadAvatar Example

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates the ShadAvatar component, which displays a user's avatar. It accepts a URL for the image and an optional placeholder widget to show while the image loads or if it fails. Here, 'CN' is used as the placeholder text.

```dart
ShadAvatar(
  'https://app.requestly.io/delay/2000/avatars.githubusercontent.com/u/124599?v=4',
  placeholder: Text('CN'),
)
```

--------------------------------

### Basic Select Implementation in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

This example shows a basic implementation of the ShadSelect component in Flutter, allowing users to select a fruit from a predefined list. It requires the shadcn_ui and flutter_bloc packages. The input is a map of fruit keys and values, and the output is the selected fruit key.

```dart
final fruits = {
  'apple': 'Apple',
  'banana': 'Banana',
  'blueberry': 'Blueberry',
  'grapes': 'Grapes',
  'pineapple': 'Pineapple',
};

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<String>(
        placeholder: const Text('Select a fruit'),
        options: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
            child: Text(
              'Fruits',
              style: theme.textTheme.muted.copyWith(
                fontWeight: FontWeight.w600,
                color: theme.colorScheme.popoverForeground,
              ),
              textAlign: TextAlign.start,
            ),
          ),
          ...fruits.entries
              .map((e) => ShadOption(value: e.key, child: Text(e.value))),
        ],
        selectedOptionBuilder: (context, value) => Text(fruits[value]!),
        onChanged: print,
      ),
    );
  }
}
```

--------------------------------

### Initialize Shadcn UI (Pure)

Source: https://flutter-shadcn-ui.mariuti.com/index

Sets up the application to use only Shadcn UI components without Material or Cupertino dependencies. This involves wrapping the root widget with `ShadApp`.

```dart
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();
  }

}
```

--------------------------------

### Initialize Shadcn UI with Material Design in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Configures a Flutter application to use Shadcn UI components alongside Material Design components. This setup involves using `ShadApp.custom` and integrating with `MaterialApp` and `ShadAppBuilder`.

```diff
import 'package:shadcn_ui/shadcn_ui.dart';
+ import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
-    return ShadApp();
+    return ShadApp.custom(
+      themeMode: ThemeMode.dark,
+      darkTheme: ShadThemeData(
+        brightness: Brightness.dark,
+        colorScheme: const ShadSlateColorScheme.dark(),
+      ),
+      appBuilder: (context) {
+        return MaterialApp(
+          theme: Theme.of(context),
+          builder: (context, child) {
+            return ShadAppBuilder(child: child!);
+          },
+        );
+      },
+    );
  }
}
```

--------------------------------

### Applying Typography Styles in Flutter (Dart)

Source: https://flutter-shadcn-ui.mariuti.com/llms

Illustrates how to apply various predefined typography styles from Shadcn UI to Text widgets in Flutter. Each example shows how to access a specific text style (e.g., h1Large, p, blockquote) from the ShadThemeData's textTheme.

```dart
Text(
  'Taxing Laughter: The Joke Tax Chronicles',
  style: ShadTheme.of(context).textTheme.h1Large,
)

Text(
  'The People of the Kingdom',
  style: ShadTheme.of(context).textTheme.h2,
)

Text(
  '"After all," he said, "everyone enjoys a good joke, so it\'s only fair that they should pay for the privilege."',
  style: ShadTheme.of(context).textTheme.blockquote,
)

Text(
  'Email address',
  style: ShadTheme.of(context).textTheme.small,
)

Text(
  'A modal dialog that interrupts the user with important content and expects a response.',
  style: ShadTheme.of(context).textTheme.lead,
)
```

--------------------------------

### Implement a basic Switch control in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates how to use the ShadSwitch widget to create a toggleable control. It manages its state using StatefulWidget and updates the UI when the switch value changes. Dependencies include the shadcn_ui package.

```dart
class SwitchExample extends StatefulWidget {
  const SwitchExample({super.key});

  @override
  State<SwitchExample> createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool value = false;

  @override
  Widget build(BuildContext context) {
    return ShadSwitch(
      value: value,
      onChanged: (v) => setState(() => value = v),
      label: const Text('Airplane Mode'),
    );
  }
}
```

--------------------------------

### Popover Implementation in Dart

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates how to use the ShadPopover widget to display rich content in a portal, triggered by a button. It includes a controller for managing the popover's state and customizes the popover content with input fields.

```dart
import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart';
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

class PopoverPage extends StatefulWidget {
  const PopoverPage({super.key});

  @override
  State<PopoverPage> createState() => _PopoverPageState();
}

class _PopoverPageState extends State<PopoverPage> {
  final popoverController = ShadPopoverController();

  final List<({String name, String initialValue})> layer = [
    (name: 'Width', initialValue: '100%'),
    (name: 'Max. width', initialValue: '300px'),
    (name: 'Height', initialValue: '25px'),
    (name: 'Max. height', initialValue: 'none'),
  ];

  @override
  void dispose() {
    popoverController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final textTheme = ShadTheme.of(context).textTheme;
    return Scaffold(
      body: Center(
        child: ShadPopover(
          controller: popoverController,
          popover: (context) => SizedBox(
            width: 288,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Dimensions',
                  style: textTheme.h4,
                ),
                Text(
                  'Set the dimensions for the layer.',
                  style: textTheme.p,
                ),
                const SizedBox(height: 4),
                ...layer
                    .map(
                      (e) => Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Expanded(
                              child: Text(
                            e.name,
                            textAlign: TextAlign.start,
                          )),
                          Expanded(
                            flex: 2,
                            child: ShadInput(
                              initialValue: e.initialValue,
                            ),
                          )
                        ],
                      ),
                    )
                    .separatedBy(const SizedBox(height: 8)),
              ],
            ),
          ),
          child: ShadButton.outline(
            onPressed: popoverController.toggle,
            child: const Text('Open popover'),
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Initialize Shadcn UI with Material Design

Source: https://flutter-shadcn-ui.mariuti.com/index

Integrates Shadcn UI components alongside Material Design components. This setup allows simultaneous use and customizes the theme for dark mode with a Slate color scheme.

```dart
import 'package:shadcn_ui/shadcn_ui.dart';
 import 'package:flutter/material.dart';


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


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


  @override
  Widget build(BuildContext context) {
    return ShadApp();
    return ShadApp.custom(
      themeMode: ThemeMode.dark,
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadSlateColorScheme.dark(),
      ),
      appBuilder: (context) {
        return MaterialApp(
          theme: Theme.of(context),
          builder: (context, child) {
            return ShadAppBuilder(child: child!);
          },
        );
      },
    );
  }

}
```

--------------------------------

### Toast Component in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Displays a succinct message that is shown temporarily. It supports various configurations including titles, descriptions, actions, and destructive styles.

```dart
ShadButton.outline(
  child: const Text('Add to calendar'),
  onPressed: () {
    ShadToaster.of(context).show(
      ShadToast(
        title: const Text('Scheduled: Catch up'),
        description:
            const Text('Friday, February 10, 2023 at 5:57 PM'),
        action: ShadButton.outline(
          child: const Text('Undo'),
          onPressed: () => ShadToaster.of(context).hide(),
        ),
      ),
    );
  },
),

```

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      const ShadToast(
        description: Text('Your message has been sent.'),
      ),
    );
  },
),

```

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      const ShadToast(
        title: Text('Uh oh! Something went wrong'),
        description:
            Text('There was a problem with your request'),
      ),
    );
  },
),

```

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      ShadToast(
        title: const Text('Uh oh! Something went wrong'),
        description:
            const Text('There was a problem with your request'),
        action: ShadButton.outline(
          child: const Text('Try again'),
          onPressed: () => ShadToaster.of(context).hide(),
        ),
      ),
    );
  },
),

```

```dart
final theme = ShadTheme.of(context);

ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      ShadToast.destructive(
        title: const Text('Uh oh! Something went wrong'),
        description:
            const Text('There was a problem with your request'),
        action: ShadButton.destructive(
          child: const Text('Try again'),
          decoration: ShadDecoration(
            border: ShadBorder.all(
              color: theme.colorScheme.destructiveForeground,
              width: 1,
            ),
          ),
          onPressed: () => ShadToaster.of(context).hide(),
        ),
      ),
    );
  },
),

```

--------------------------------

### Create Flutter Icon Buttons with ShadIconButton

Source: https://flutter-shadcn-ui.mariuti.com/llms

Shows various styles of icon buttons using ShadIconButton in Flutter. Examples include primary, secondary, destructive, outline, ghost, loading states, and buttons with gradient and shadow effects. Requires LucideIcons for icon rendering.

```dart
ShadIconButton(
  onPressed: () => print('Primary'),
  icon: const Icon(LucideIcons.rocket),
)
```

```dart
ShadIconButton.secondary(
  icon: const Icon(LucideIcons.rocket),
  onPressed: () => print('Secondary'),
)
```

```dart
ShadIconButton.destructive(
  icon: const Icon(LucideIcons.rocket),
  onPressed: () => print('Destructive'),
)
```

```dart
ShadIconButton.outline(
  icon: const Icon(LucideIcons.rocket),
  onPressed: () => print('Outline'),
)
```

```dart
ShadIconButton.ghost(
  icon: const Icon(LucideIcons.rocket),
  onPressed: () => print('Ghost'),
)
```

```dart
ShadIconButton(
  icon: SizedBox.square(
    dimension: 16,
    child: CircularProgressIndicator(
      strokeWidth: 2,
      color: ShadTheme.of(context).colorScheme.primaryForeground,
    ),
  ),
)
```

```dart
ShadIconButton(
  gradient: const LinearGradient(colors: [
    Colors.cyan,
    Colors.indigo,
  ]),
  shadows: [
    BoxShadow(
      color: Colors.blue.withValues(alpha: .4),
      spreadRadius: 4,
      blurRadius: 10,
      offset: const Offset(0, 2),
    ),
  ],
  icon: const Icon(LucideIcons.rocket),
)
```

--------------------------------

### Initialize Pure Shadcn UI App in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Sets up a Flutter application to use only Shadcn UI components, excluding Material or Cupertino defaults. The `ShadApp` widget is used as the root of the application.

```diff
+ 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();
  }
}
```

--------------------------------

### Destructive ShadBadge Example

Source: https://flutter-shadcn-ui.mariuti.com/llms

Illustrates the destructive style of the ShadBadge, often used for highlighting negative states or warnings. It typically uses a red color scheme.

```dart
ShadBadge.destructive(
  child: const Text('Destructive'),
)
```

--------------------------------

### Context Menu Component in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Illustrates how to create a context menu using ShadContextMenuRegion. This component triggers a menu upon right-click, offering various options and sub-menus. It includes examples of dividers, enabled/disabled items, and nested menus.

```dart
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

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

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: ShadContextMenuRegion(
          constraints: const BoxConstraints(minWidth: 300),
          items: [
            const ShadContextMenuItem.inset(
              child: Text('Back'),
            ),
            const ShadContextMenuItem.inset(
              enabled: false,
              child: Text('Forward'),
            ),
            const ShadContextMenuItem.inset(
              child: Text('Reload'),
            ),
            const ShadContextMenuItem.inset(
              trailing: Icon(LucideIcons.chevronRight),
              items: [
                ShadContextMenuItem(
                  child: Text('Save Page As...'),
                ),
                ShadContextMenuItem(
                  child: Text('Create Shortcut...'),
                ),
                ShadContextMenuItem(
                  child: Text('Name Window...'),
                ),
                Divider(height: 8),
                ShadContextMenuItem(
                  child: Text('Developer Tools'),
                ),
              ],
              child: Text('More Tools'),
            ),
            const Divider(height: 8),
            const ShadContextMenuItem(
              leading: Icon(LucideIcons.check),
              child: Text('Show Bookmarks Bar'),
            ),
            const ShadContextMenuItem.inset(child: Text('Show Full URLs')),
            const Divider(height: 8),
            Padding(
              padding: const EdgeInsets.fromLTRB(36, 8, 8, 8),
              child: Text('People', style: theme.textTheme.small),
            ),
            const Divider(height: 8),
            ShadContextMenuItem(
              leading: SizedBox.square(
                dimension: 16,
                child: Center(
                  child: Container(
                    width: 8,
                    height: 8,
                    decoration: BoxDecoration(
                      color: theme.colorScheme.foreground,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ),
              child: const Text('Pedro Duarte'),
            ),
            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'),
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### Dynamic Theme Selection UI with Shadcn

Source: https://flutter-shadcn-ui.mariuti.com/llms

Implement a UI element, like a `ShadSelect` dropdown, to allow users to change the application's color scheme dynamically. This example shows how to use `ShadSelect` with a list of available theme names and trigger a re-build of the app upon selection.

```dart
import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

// Somewhere in your app
ShadSelect<String>(
  initialValue: 'slate',
  maxHeight: 200,
  options: shadThemeColors.map(
    (option) => ShadOption(
      value: option,
      child: Text(
        option.capitalizeFirst(),
      ),
    ),
  ),
  selectedOptionBuilder: (context, value) {
    return Text(value.capitalizeFirst());
  },
  onChanged: (value) {
    // rebuild the app using your state management solution
  },
),

// For example I'm using solidart as state management, here it is the example code used to rebuild the app widget when the user changes the theme mode. Check the "Toggle Theme" example at <https://solidart.mariuti.com/examples>

The same can be done for the color scheme, using a `Signal<String>()`
```

--------------------------------

### Integrate Switch into a Flutter Form Field

Source: https://flutter-shadcn-ui.mariuti.com/llms

Shows how to use ShadSwitchFormField for incorporating a switch into a form. It supports initial values, labels, sublabels, and validation logic. The example includes a validator to ensure the terms and conditions are accepted. Requires the shadcn_ui package.

```dart
ShadSwitchFormField(
  id: 'terms',
  initialValue: false,
  inputLabel:
      const Text('I accept the terms and conditions'),
  onChanged: (v) {},
  inputSublabel:
      const Text('You agree to our Terms and Conditions'),
  validator: (v) {
    if (!v) {
      return 'You must accept the terms and conditions';
    }
    return null;
  },
)
```

--------------------------------

### Display Toast Notification with Action in Dart

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates how to use the Shadcn UI Sonner component to display a toast notification. The example includes a title, description with a timestamp, and an 'Undo' action to hide the toast.

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    final sonner = ShadSonner.of(context);
    final id = Random().nextInt(1000);
    final now = DateTime.now();
    sonner.show(
      ShadToast(
        id: id,
        title: const Text('Event has been created'),
        description: Text(DateFormat.yMd().add_jms().format(now)),
        action: ShadButton(
          child: const Text('Undo'),
          onPressed: () => sonner.hide(id),
        ),
      ),
    );
  },
),

```

--------------------------------

### Show Alert Dialog in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates how to display an alert dialog using the ShadDialog.alert component. This dialog includes a title, description, and action buttons for confirmation or cancellation. It utilizes Flutter's showShadDialog function for presentation.

```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),
              ),
            ],
          ),
        );
      },
    );
  }
}
```

--------------------------------

### Project Creation Card Component in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

A ShadCard widget designed for creating a new project. It includes fields for project name and framework selection, along with action buttons for cancel and deploy. This component utilizes ShadInput and ShadSelect for form elements and relies on the shad-cn UI library.

```dart
const frameworks = {
  'next': 'Next.js',
  'react': 'React',
  'astro': 'Astro',
  'nuxt': 'Nuxt.js',
};

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

  @override
  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.'),
      footer: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          ShadButton.outline(
            child: const Text('Cancel'),
            onPressed: () {},
          ),
          ShadButton(
            child: const Text('Deploy'),
            onPressed: () {},
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text('Name'),
            const SizedBox(height: 6),
            const ShadInput(placeholder: Text('Name of your project')),
            const SizedBox(height: 16),
            const Text('Framework'),
            const SizedBox(height: 6),
            ShadSelect<String>(
              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) {},
            ),
          ],
        ),
      ),
    );
  }
}
```

--------------------------------

### Flutter Select with Search Functionality using shadcn-ui

Source: https://flutter-shadcn-ui.mariuti.com/llms

Implements a searchable dropdown or select component using Flutter and shadcn-ui. It filters a list of frameworks based on user input in a search bar. Dependencies include Flutter's StatefulWidget and shadcn-ui widgets.

```dart
const frameworks = {
'nextjs': 'Next.js',
'svelte': 'SvelteKit',
'nuxtjs': 'Nuxt.js',
'remix': 'Remix',
'astro': 'Astro',
};

class SelectWithSearch extends StatefulWidget {
  const SelectWithSearch({super.key});

  @override
  State<SelectWithSearch> createState() => _SelectWithSearchState();
}

class _SelectWithSearchState extends State<SelectWithSearch> {
  var searchValue = '';

  Map<String, String> get filteredFrameworks => {
  for (final framework in frameworks.entries)
  if (framework.value.toLowerCase().contains(searchValue.toLowerCase()))
  framework.key: framework.value
  };

  @override
  Widget build(BuildContext context) {
    return ShadSelect<String>.withSearch(
      minWidth: 180,
      maxWidth: 300,
      placeholder: const Text('Select framework...'),
      onSearchChanged: (value) => setState(() => searchValue = value),
      searchPlaceholder: const Text('Search framework'),
      options: [
        if (filteredFrameworks.isEmpty)
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 24),
            child: Text('No framework found'),
          ),
        ...frameworks.entries.map(
          (framework) {
            // this offstage is used to avoid the focus loss when the search results appear again
            // because it keeps the widget in the tree.
            return Offstage(
              offstage: !filteredFrameworks.containsKey(framework.key),
              child: ShadOption(
                value: framework.key,
                child: Text(framework.value),
              ),
            );
          },
        )
      ],
      selectedOptionBuilder: (context, value) => Text(frameworks[value]!),
    );
  }
}
```

--------------------------------

### Using Shadcn with CupertinoApp

Source: https://flutter-shadcn-ui.mariuti.com/llms

Integrate shadcn components with Cupertino widgets by using `CupertinoApp` instead of `MaterialApp`. This allows for a native iOS look and feel while leveraging shadcn's UI elements. Ensure to include necessary localization delegates.

```dart
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ShadApp.custom(
      themeMode: ThemeMode.dark,
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadSlateColorScheme.dark(),
      ),
      appBuilder: (context) {
        return CupertinoApp(
          theme: CupertinoTheme.of(context),
          localizationsDelegates: const [
            DefaultMaterialLocalizations.delegate,
            DefaultCupertinoLocalizations.delegate,
            DefaultWidgetsLocalizations.delegate,
          ],
          builder: (context, child) {
            return ShadAppBuilder(child: child! automated);
          },
        );
      },
    );
  }
}
```

--------------------------------

### Applying Dark Theme with Shadcn

Source: https://flutter-shadcn-ui.mariuti.com/llms

Configure a dark theme for your application using `ShadApp`. This involves defining `darkTheme` with a specific `brightness` and `colorScheme`, such as `ShadSlateColorScheme.dark()`.

```dart
import 'package:shadcn_ui/shadcn_ui.dart';

@override
Widget build(BuildContext context) {
  return ShadApp(
    darkTheme: ShadThemeData(
      brightness: Brightness.dark,
      colorScheme: const ShadSlateColorScheme.dark(),
    ),
    child: ...
  );
}
```

--------------------------------

### Basic Resizable Panel Group in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates a basic resizable panel group with nested panels in Flutter. It utilizes ShadResizablePanelGroup and ShadResizablePanel widgets. The panels have defined default, minimum, and maximum sizes, and content is centered within each panel.

```dart
class BasicResizable extends StatelessWidget {
  const BasicResizable({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return ConstrainedBox(
      constraints: const BoxConstraints(maxHeight: 200),
      child: DecoratedBox(
        decoration: BoxDecoration(
          borderRadius: theme.radius,
          border: Border.all(
            color: theme.colorScheme.border,
          ),
        ),
        child: ClipRRect(
          borderRadius: theme.radius,
          child: ShadResizablePanelGroup(
            children: [
              ShadResizablePanel(
                id: 0,
                defaultSize: .5,
                minSize: .2,
                maxSize: .8,
                child: Center(
                  child: Text('One', style: theme.textTheme.large),
                ),
              ),
              ShadResizablePanel(
                id: 1,
                defaultSize: .5,
                child: ShadResizablePanelGroup(
                  axis: Axis.vertical,
                  children: [
                    ShadResizablePanel(
                      id: 0,
                      defaultSize: .3,
                      child: Center(
                          child: Text('Two', style: theme.textTheme.large)),
                    ),
                    ShadResizablePanel(
                      id: 1,
                      defaultSize: .7,
                      child: Align(
                          child: Text('Three', style: theme.textTheme.large)),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### Creating Color Scheme from Name with Shadcn

Source: https://flutter-shadcn-ui.mariuti.com/llms

Dynamically create color schemes using `ShadColorScheme.fromName`. This is useful for allowing users to switch themes. It supports various predefined color scheme names and allows specifying the brightness.

```dart
// available color scheme names
final shadThemeColors = [
  'blue',
  'gray',
  'green',
  'neutral',
  'orange',
  'red',
  'rose',
  'slate',
  'stone',
  'violet',
  'yellow',
  'zinc',
];

final lightColorScheme = ShadColorScheme.fromName('blue');
final darkColorScheme = ShadColorScheme.fromName('slate', brightness: Brightness.dark);
```

--------------------------------

### Custom Font Family Configuration (YAML)

Source: https://flutter-shadcn-ui.mariuti.com/llms

Shows how to configure a custom font family in a Flutter project's pubspec.yaml file. This involves defining the font family name and specifying the asset files for different font weights and styles.

```yaml
flutter:
  fonts:
    - family: UbuntuMono
      fonts:
        - asset: fonts/UbuntuMono-Regular.ttf
        - asset: fonts/UbuntuMono-Italic.ttf
          style: italic
        - asset: fonts/UbuntuMono-Bold.ttf
          weight: 700
        - asset: fonts/UbuntuMono-BoldItalic.ttf
          weight: 700
          style: italic
```

--------------------------------

### Build Large Tables On-Demand with Flutter ShadTable Builder

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates creating a large table using the ShadTable widget's builder pattern in Flutter. This approach is efficient for large datasets as widgets are built on demand. It includes defining data, headers, and custom cell rendering with specific column span configurations.

```dart
const invoices = [
  [
    "INV001",
    "Paid",
    "Credit Card",
    r"$250.00",
  ],
  [
    "INV002",
    "Pending",
    "PayPal",
    r"$150.00",
  ],
  [
    "INV003",
    "Unpaid",
    "Bank Transfer",
    r"$350.00",
  ],
  [
    "INV004",
    "Paid",
    "Credit Card",
    r"$450.00",
  ],
  [
    "INV005",
    "Paid",
    "PayPal",
    r"$550.00",
  ],
  [
    "INV006",
    "Pending",
    "Bank Transfer",
    r"$200.00",
  ],
  [
    "INV007",
    "Unpaid",
    "Credit Card",
    r"$300.00",
  ],
];

final headings = [
  'Invoice',
  'Status',
  'Method',
  'Amount',
];

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]),
        );
      },
      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),
            ),
          );
        }
        if (column == 3) {
          return const ShadTableCell.footer(
            alignment: Alignment.centerRight,
            child: Text(
              r'$2500.00',
            ),
          );
        }
        return const ShadTableCell(child: SizedBox());
      },
    );
  }
}
```

--------------------------------

### Build Flutter Form with Validation using ShadForm

Source: https://flutter-shadcn-ui.mariuti.com/llms

Illustrates creating a form with validation and value retrieval using ShadForm and ShadInputFormField. The form includes a username field with a minimum length validator and a submit button that triggers validation and prints the form values upon success.

```dart
class FormPage extends StatefulWidget {
  const FormPage({
    super.key,
  });

  @override
  State<FormPage> createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  final formKey = GlobalKey<ShadFormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ShadForm(
          key: formKey,
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 350),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                ShadInputFormField(
                  id: 'username',
                  label: const Text('Username'),
                  placeholder: const Text('Enter your username'),
                  description: const Text('This is your public display name.'),
                  validator: (v) {
                    if (v.length < 2) {
                      return 'Username must be at least 2 characters.';
                    }
                    return null;
                  },
                ),
                const SizedBox(height: 16),
                ShadButton(
                  child: const Text('Submit'),
                  onPressed: () {
                    if (formKey.currentState!.saveAndValidate()) {
                      print(
                          'validation succeeded with ${formKey.currentState!.value}');
                    } else {
                      print('validation failed');
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### Flutter Multiple Select with shadcn-ui

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates how to implement a multi-select component in Flutter using shadcn-ui. Users can select multiple fruits, with options to deselect and keep the popover open after selection. It utilizes `allowDeselection` and `closeOnSelect` properties.

```dart
final fruits = {
  'apple': 'Apple',
  'banana': 'Banana',
  'blueberry': 'Blueberry',
  'grapes': 'Grapes',
  'pineapple': 'Pineapple',
};

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

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return ShadSelect<String>.multiple(
      minWidth: 340,
      onChanged: print,
      allowDeselection: true,
      closeOnSelect: false,
      placeholder: const Text('Select multiple fruits'),
      options: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
          child: Text(
            'Fruits',
            style: theme.textTheme.large,
            textAlign: TextAlign.start,
          ),
        ),
        ...fruits.entries.map(
          (e) => ShadOption(
            value: e.key,
            child: Text(e.value),
          ),
        ),
      ],
      selectedOptionsBuilder: (context, values) =>
          Text(values.map((v) => v.capitalize()).join(', ')),
    );
  }
}
```

--------------------------------

### Default CupertinoThemeData provided by Shadcn

Source: https://flutter-shadcn-ui.mariuti.com/llms

Inspect the default `CupertinoThemeData` that `ShadApp` generates. This theme is derived from the shadcn_ui's color scheme and brightness, providing sensible defaults for Cupertino widgets.

```dart
CupertinoThemeData(
  primaryColor: themeData.colorScheme.primary,
  primaryContrastingColor: themeData.colorScheme.primaryForeground,
  scaffoldBackgroundColor: themeData.colorScheme.background,
  barBackgroundColor: themeData.colorScheme.primary,
  brightness: themeData.brightness,
),
```

--------------------------------

### Use CupertinoApp with Shadcn UI

Source: https://flutter-shadcn-ui.mariuti.com/index

Demonstrates how to configure a Flutter application to use shad-cn components alongside Cupertino widgets. It involves replacing `MaterialApp` with `CupertinoApp` and setting up `ShadApp.custom` for dark theme configuration. The `appBuilder` is crucial for nesting `CupertinoApp` within `ShadAppBuilder`.

```dart
import 'package:shadcn_ui/shadcn_ui.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';


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


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


  @override
  Widget build(BuildContext context) {
    return ShadApp.custom(
      themeMode: ThemeMode.dark,
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadSlateColorScheme.dark(),
      ),
      appBuilder: (context) {
        return CupertinoApp(
          theme: CupertinoTheme.of(context),
          localizationsDelegates: const [
            DefaultMaterialLocalizations.delegate,
            DefaultCupertinoLocalizations.delegate,
            DefaultWidgetsLocalizations.delegate,
          ],
          builder: (context, child) {
            return ShadAppBuilder(child: child!);
          },
        );
      },
    );
  }


```

--------------------------------

### Create a responsive Table using ShadTable.list in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates creating a responsive table using ShadTable.list with a two-dimensional array of children. This method is suitable for small tables as it generates all children upfront. It supports custom column spans and alignment. Requires shadcn_ui and flutter/material packages.

```dart
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

const invoices = [
  (
    invoice: "INV001",
    paymentStatus: "Paid",
    totalAmount: r"$250.00",
    paymentMethod: "Credit Card",
  ),
  (
    invoice: "INV002",
    paymentStatus: "Pending",
    totalAmount: r"$150.00",
    paymentMethod: "PayPal",
  ),
  (
    invoice: "INV003",
    paymentStatus: "Unpaid",
    totalAmount: r"$350.00",
    paymentMethod: "Bank Transfer",
  ),
  (
    invoice: "INV004",
    paymentStatus: "Paid",
    totalAmount: r"$450.00",
    paymentMethod: "Credit Card",
  ),
  (
    invoice: "INV005",
    paymentStatus: "Paid",
    totalAmount: r"$550.00",
    paymentMethod: "PayPal",
  ),
  (
    invoice: "INV006",
    paymentStatus: "Pending",
    totalAmount: r"$200.00",
    paymentMethod: "Bank Transfer",
  ),
  (
    invoice: "INV007",
    paymentStatus: "Unpaid",
    totalAmount: r"$300.00",
    paymentMethod: "Credit Card",
  ),
];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(
            maxWidth: 600,
            // added just to center the table vertically
            maxHeight: 450,
          ),
          child: ShadTable.list(
            header: const [
              ShadTableCell.header(child: Text('Invoice')),
              ShadTableCell.header(child: Text('Status')),
              ShadTableCell.header(child: Text('Method')),
              ShadTableCell.header(
                alignment: Alignment.centerRight,
                child: Text('Amount'),
              ),
            ],
            footer: const [
              ShadTableCell.footer(child: Text('Total')),
              ShadTableCell.footer(child: Text('')),
              ShadTableCell.footer(child: Text('')),
              ShadTableCell.footer(
                alignment: Alignment.centerRight,
                child: Text(r'$2500.00'),
              ),
            ],
            columnSpanExtent: (index) {
              if (index == 2) return const FixedTableSpanExtent(130);
              if (index == 3) {
                return const MaxTableSpanExtent(
                  FixedTableSpanExtent(120),
                  RemainingTableSpanExtent(),
                );
              }
              // uses the default value
              return null;
            },
            children: invoices
                .map(
                  (invoice) => [
                    ShadTableCell(
                      child: Text(
                        invoice.invoice,
                        style: const TextStyle(
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                    ShadTableCell(child: Text(invoice.paymentStatus)),
                    ShadTableCell(child: Text(invoice.paymentMethod)),
                    ShadTableCell(
                      alignment: Alignment.centerRight,
                      child: Text(
                        invoice.totalAmount,
                      ),
                    ),
                  ],
                ),
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### Modal Dialog for Profile Editing in Flutter

Source: https://flutter-shadcn-ui.mariuti.com/llms

Demonstrates how to display a modal dialog using `showShadDialog` and `ShadDialog` for editing user profile information. The dialog contains input fields for name and username, along with a save button. It utilizes `ShadButton` and `ShadInput` widgets.

```dart
import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart';

final profile = [
  (title: 'Name', value: 'Alexandru'),
  (title: 'Username', value: 'nank1ro'),
];

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,
                spacing: 16,
                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(),
              ),
            ),
          ),
        );
      },
    );
  }
}
```
Tokens:
Raw