shadcn_flutter 0.0.8 shadcn_flutter: ^0.0.8 copied to clipboard
Beautifully designed components from Shadcn/UI is now available for Flutter
shadcn_flutter #
A set of widgets and utilities for building applications in flutter. Optimized for web applications. This is a port of the shadcn UI package to flutter.
Installation #
1. Create a new Flutter project #
flutter create my_app
cd my_app
2. Add the dependency #
flutter pub add shadcn_flutter
3. Import the package #
import 'package:shadcn_flutter/shadcn_flutter.dart';
4. Use the widgets #
void main() {
runApp(
ShadcnApp(
title: 'My App',
home: MyHomePage(),
theme: ThemeData(
brightness: Brightness.dark,
colorScheme: ColorSchemes.darkZync(),
radius: 0.5,
),
),
);
}
5. Add the fonts #
Add the following fonts to your pubspec.yaml
file.
fonts:
- family: "GeistSans"
fonts:
- asset: "packages/shadcn_flutter/fonts/Geist-Black.otf"
weight: 800
- asset: "packages/shadcn_flutter/fonts/Geist-Bold.otf"
weight: 700
- asset: "packages/shadcn_flutter/fonts/Geist-Light.otf"
weight: 300
- asset: "packages/shadcn_flutter/fonts/Geist-Medium.otf"
weight: 500
- asset: "packages/shadcn_flutter/fonts/Geist-SemiBold.otf"
weight: 600
- asset: "packages/shadcn_flutter/fonts/Geist-Thin.otf"
weight: 100
- asset: "packages/shadcn_flutter/fonts/Geist-UltraBlack.otf"
weight: 900
- asset: "packages/shadcn_flutter/fonts/Geist-UltraLight.otf"
weight: 200
- asset: "packages/shadcn_flutter/fonts/Geist-Regular.otf"
weight: 400
- family: "GeistMono"
fonts:
- asset: "packages/shadcn_flutter/fonts/GeistMono-Black.otf"
weight: 800
- asset: "packages/shadcn_flutter/fonts/GeistMono-Bold.otf"
weight: 700
- asset: "packages/shadcn_flutter/fonts/GeistMono-Light.otf"
weight: 300
- asset: "packages/shadcn_flutter/fonts/GeistMono-Medium.otf"
weight: 500
- asset: "packages/shadcn_flutter/fonts/GeistMono-Regular.otf"
weight: 400
- asset: "packages/shadcn_flutter/fonts/GeistMono-SemiBold.otf"
weight: 600
- asset: "packages/shadcn_flutter/fonts/GeistMono-Thin.otf"
weight: 100
- asset: "packages/shadcn_flutter/fonts/GeistMono-UltraBlack.otf"
weight: 900
- asset: "packages/shadcn_flutter/fonts/GeistMono-UltraLight.otf"
weight: 200
6. Run the app #
flutter run
Widgets #
Animation #
Disclosure #
Feedback #
Forms #
Layout #
Navigation #
Surfaces #
Data Display #