repository·main·Indexed 25 days ago
https://github.com/nank1ro/flutter-shadcn-uiA library of highly customizable UI components for Flutter inspired by the Shadcn UI design system. It provides a collection of high-quality widgets—including ShadButton, ShadAccordion, ShadCalendar, and ShadAvatar—designed for simplicity and deep customization. The library includes a CLI for installing specific components directly into project source code to allow full ownership of the implementation.
The ShadAccordion is a vertically stacked set of interactive headings that reveal content sections. It follows the WAI-ARIA design pattern and includes default animations and styling.
By default, ShadAccordion allows only one item to be expanded at a time. To allow multiple items to be expanded simultaneously, use the .multiple() constructor.
The ShadBreadcrumb component displays the path to the current resource using a hierarchy of links. It accepts a list of children which can include ShadBreadcrumbLink for clickable navigation, ShadBreadcrumbDropdown for collapsed menus, or standard widgets like Text for the current page label.
class PrimaryBreadcrumb extends StatelessWidget {
const PrimaryBreadcrumb({super.key});
@override
Widget build(BuildContext context) {
return ShadBreadcrumb(
children: [
ShadBreadcrumbLink(
onPressed: () => print('Navigating to Home'),
child: const Text('Home'),
),
ShadBreadcrumbDropdown(
items: [
ShadBreadcrumbDropMenuItem(
onPressed: () => print('Navigating to Documentation'),
child: const Text('Documentation'),
),
ShadBreadcrumbDropMenuItem(
onPressed: () => print('Navigating to Themes'),
child: const Text('Themes'),
),
ShadBreadcrumbDropMenuItem(
onPressed: () => print('Navigating to Github'),
child: const Text('Github'),
),
],
showDropdownArrow: false,
child: ShadBreadcrumbEllipsis(),
),
Text('Components'),
Text('Breadcrumb'),
],
);
}
}The ShadTooltip component displays a popup containing information related to an element when the element receives keyboard focus or mouse hover.
To implement a tooltip, wrap your target widget with ShadTooltip and provide a builder function that returns the content to be displayed. The child parameter should be the widget that triggers the tooltip.
Important Requirement: For hover functionality to work, the child widget must implement ShadGestureDetector. Standard widgets like ShadButton already implement this, but if you are using a plain widget (like an Image), you must wrap it in a ShadGestureDetector to enable hover triggers.
ShadTooltip(
builder: (context) => const Text('Add to library'),
child: ShadButton.outline(
child: const Text('Hover/Focus'),
onPressed: () {},
),
),To use Google Fonts, install the google_fonts package and use the ShadTextTheme.fromGoogleFont constructor in your ShadApp configuration.
return ShadApp(
theme: ShadThemeData(
brightness: Brightness.light,
colorScheme: const ShadZincColorScheme.light(),
textTheme: ShadTextTheme.fromGoogleFont(GoogleFonts.poppins),
),
);Use ShadApp to define the application's theme. You can specify theme and darkTheme using ShadThemeData. Each ShadThemeData requires a brightness and a colorScheme.
Supported color scheme names include: blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, and zinc.
@override
Widget build(BuildContext context) {
return ShadApp(
darkTheme: ShadThemeData(
brightness: Brightness.dark,
colorScheme: const ShadSlateColorScheme.dark(),
),
child: ...
);
}The ShadIconButton component displays a button containing an icon. It supports several visual styles through different constructors or properties, including primary, secondary, destructive, outline, and ghost styles.
ShadIconButton(
onPressed: () => print('Primary'),
icon: const Icon(LucideIcons.rocket),
)The ShadBadge component displays a badge or a component that looks like a badge. It provides several constructors to achieve different visual styles: Primary (default), Secondary, Destructive, and Outline.
// Primary (Default)
ShadBadge(
child: const Text('Primary'),
)
// Secondary
ShadBadge.secondary(
child: const Text('Secondary'),
)
// Destructive
ShadBadge.destructive(
child: const Text('Destructive'),
)
// Outline
ShadBadge.outline(
child: const Text('Outline'),
)To use Shadcn components alongside Cupertino components, use ShadApp.custom with an appBuilder that returns a CupertinoApp. Include the necessary localization delegates. If using a Router, use CupertinoApp.router.
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 [
GlobalShadLocalizations.delegate,
DefaultMaterialLocalizations.delegate,
DefaultCupertinoLocalizations.delegate,
DefaultWidgetsLocalizations.delegate,
],
builder: (context, child) {
return ShadAppBuilder(child: child!);
},
);
},
);
}
}Use ShadForm to manage form state, validation, and field values centrally. This eliminates the need to manage individual controllers for every field. To interact with the form, use a GlobalKey<ShadFormState>.
Key benefits:
Map<String, dynamic>.saveAndValidate().final formKey = GlobalKey<ShadFormState>();
// In your build method
ShadForm(
key: formKey,
child: Column(
children: [
ShadInputFormField(
id: 'username',
label: const Text('Username'),
validator: (v) {
if (v.length < 2) return 'Username must be at least 2 characters.';
return null;
},
),
ShadButton(
child: const Text('Submit'),
onPressed: () {
if (formKey.currentState!.saveAndValidate()) {
print('Success: ${formKey.currentState!.value}');
}
},
),
],
),
)To define the theme and color scheme for your application, use the ShadThemeData class within the theme or darkTheme properties of ShadApp. You can specify the brightness and a specific colorScheme (e.g., ShadSlateColorScheme).
You can override specific properties of a theme, such as individual color scheme properties (like background) or component themes (like primaryButtonTheme).
import 'package:shadcn_ui/shadcn_ui.dart';
@override
Widget build(BuildContext context) {
return ShadApp(
darkTheme: ShadThemeData(
brightness: Brightness.dark,
colorScheme: const ShadSlateColorScheme.dark(
background: Colors.blue,
),
primaryButtonTheme: const ShadButtonTheme(
backgroundColor: Colors.cyan,
),
),
child: ...
);
}flutter_animate library. Many components accept a List<Effect> parameter, allowing you to easily customize or add animations to the UI elements.