shadcn_flutter

Pub Likes Pub Points Pub Version GitHub Repo stars

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.

Documentation - Pub.dev

Widgets

Animation

AnimatedValueBuilder Number Ticker RepeatedAnimationBuilder

Disclosure

Accordion Collapsible

Feedback

Alert Alert Dialog Circular Progress Progress Bar Skeleton Toast

Forms

Button Checkbox Chip Input Color Picker Date Picker Form Input Input OTP Phone Input Radio Group Select Slider Star Rating Switch Text Area Time Picker Toggle

Layout

Card Carousel Divider Resizable Stepper Steps Timeline

Breadcrumb Menubar Navigation Menu Pagination Tabs Tab List Tree

Surfaces

Dialog Drawer Hover Card Popover Sheet Tooltip

Data Display

Avatar Avatar Group Code Snippet Tracker

Utilities

Badge Calendar Command Context Menu Dropdown Menu

Installation

Using CLI

1. Activate the package

flutter pub global activate shadcn_flutter_cli

2. Run the command

flutter pub global run shadcn_flutter_cli:setup

Manual 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(
        colorScheme: ColorSchemes.darkZync(),
        radius: 0.5,
      ),
    ),
  );
}

5. Add the fonts

Add the following fonts to your pubspec.yaml file.

  fonts:
    - family: RadixIcons
      fonts:
        - asset: "packages/shadcn_flutter/icons/RadixIcons.otf"
    - family: BootstrapIcons
      fonts:
        - asset: "packages/shadcn_flutter/icons/BootstrapIcons.otf"
    - 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

Libraries

shadcn_flutter