shadcn-flutter

Shadcn Flutter

Flutter 向けの一貫した UI エコシステムです。コンポーネント、テーマ設定、ツールを備え、Material と Cupertino から切り替える準備が整っています。モバイル、ウェブ、デスクトップに対応する、高品質なウィジェットとモダンなデザイントークンを採用しています。

はじめに

Shadcn Flutter を使った新しい Flutter アプリケーションをセットアップするには、次の手順に従ってください。

1. 依存関係を追加します。

   flutter pub add shadcn_flutter
   

2. main.dart を設定します。

   import 'package:shadcn_flutter/shadcn_flutter.dart';
   
   void main() {
     runApp(
       ShadcnApp(
         title: 'My App',
         theme: ThemeData(
           colorScheme: ColorSchemes.darkSlate,
           radius: 0.5,
         ),
         home: const MyHomePage(),
       ),
     );
   }
   
   class MyHomePage extends StatelessWidget {
     const MyHomePage({super.key});
   
     @override
     Widget build(BuildContext context) {
       return const Scaffold(
         child: Center(
           child: Text('Hello World!').h1(),
         ),
       );
     }
   }
   

ガイド

主要なコンセプトとデザインシステムの基本を学びましょう。

名前	説明	パス
概要	エコシステム、機能、よくある質問の概要です。	guides/introduction.md
インストール	安定版と試験版の段階的なセットアップ手順です。	guides/installation.md
テーマ設定	角丸、密度、スケーリングなどのトークンをカスタマイズします。	guides/theming.md
カラー	Tailwind ベースのカラーパレットと ColorShades を使用します。	guides/colors.md
タイポグラフィ	セマンティックなテキストスタイルとウィジェット拡張機能です。	guides/typography.md
レイアウト	余白、間隔、レスポンシブレイアウトのヘルパーです。	guides/layout.md
アイコン	バンドルされた 10,000 個以上のアイコン（Lucide、Radix など）を利用します。	guides/icons.md
相互運用性	Material と Cupertino のウィジェットを段階的に使用します。	guides/interop.md
状態管理	組み込みの Data および Model 状態システムのガイドです。	guides/state_management.md
ウェブのプリローダー	ウェブアプリの読み込み時の表示をカスタマイズします。	guides/web_preloader.md

コンポーネント

Shadcn Flutter には、100 種類以上の高品質なコンポーネントがあります。以下に主要なカテゴリを示します。

アニメーション

コンポーネント	パス
数値ティッカー	components/animation/number_ticker.md

コントロール

コンポーネント	パス
ボタン	components/control/button.md

開閉表示

コンポーネント	パス
アコーディオン	components/disclosure/accordion.md
折りたたみ	components/disclosure/collapsible.md

表示

コンポーネント	パス
アバター	components/display/avatar.md
チャットバブル	components/display/chat.md
コードスニペット	components/display/code_snippet.md
テーブル	components/display/table.md
トラッカー	components/display/tracker.md

フィードバック

コンポーネント	パス
アラート	components/feedback/alert.md
アラートダイアログ	components/feedback/alert_dialog.md
進捗状況	components/feedback/progress.md
トースト	components/feedback/toast.md

Form

Component	Path
AutoComplete	components/form/autocomplete.md
Checkbox	components/form/checkbox.md
Chip Input	components/form/chip_input.md
Color Picker	components/form/color_picker.md
Date Picker	components/form/date_picker.md
Form	components/form/form.md
Formatted Input	components/form/formatted_input.md
Text Input	components/form/input.md
Input OTP	components/form/input_otp.md
Item Picker	components/form/item_picker.md
Phone Input	components/form/phone_input.md
Radio Group	components/form/radio_group.md
Select	components/form/select.md
Slider	components/form/slider.md
Star Rating	components/form/star_rating.md
Switch	components/form/switch.md
Text Area	components/form/text_area.md
Time Picker	components/form/time_picker.md

Layout

Component	Path
Card	components/layout/card.md
Card Image	components/layout/card_image.md
Carousel	components/layout/carousel.md
Divider	components/layout/divider.md
Resizable	components/layout/resizable.md
Scaffold	components/layout/scaffold.md
Sortable	components/layout/sortable.md
Stepper	components/layout/stepper.md
Steps	components/layout/steps.md
Timeline	components/layout/timeline.md

Navigation

Component	Path
Breadcrumb	components/navigation/breadcrumb.md
Dot Indicator	components/navigation/dot_indicator.md
Menubar	components/navigation/menubar.md
Navigation Menu	components/navigation/navigation_menu.md
Pagination	components/navigation/pagination.md
Switcher	components/navigation/switcher.md
Tab List	components/navigation/tab_list.md
Tab Pane	components/navigation/tab_pane.md
Tabs	components/navigation/tabs.md
Tree	components/navigation/tree.md

オーバーレイ

コンポーネント	パス
ダイアログ	components/overlay/dialog.md
ドロワー	components/overlay/drawer.md
ホバーカード	components/overlay/hover_card.md
ピン留めシート	components/overlay/pinned_sheet.md
ポップオーバー	components/overlay/popover.md
スワイパー	components/overlay/swiper.md
ツールチップ	components/overlay/tooltip.md
ウィンドウ	components/overlay/window.md

ユーティリティ

コンポーネント	パス
バッジ	components/utility/badge.md
カレンダー	components/utility/calendar.md
チップ	components/utility/chip.md
コマンド	components/utility/command.md
コンテキストメニュー	components/utility/context_menu.md
ドロップダウンメニュー	components/utility/dropdown_menu.md
オーバーフローマーキー	components/utility/overflow_marquee.md
更新トリガー	components/utility/refresh_trigger.md

ヒント

これは厳選されたリストです。100以上あるすべてのコンポーネントの一覧は、コンポーネントディレクトリをご覧ください。

インタラクティブな使い方のヒント

1. インタラクションを待つ：Popover や Dialog を使用する場合は、プログラムから操作するために、提供されているコントローラーを使用してください。
2. 拡張機能を活用する：TextStyle や size を手動で設定する代わりに、.h1()、.p()、.iconSmall() などを使用してください。
3. 密度が重要です：プラットフォームごとの密度をまたいで間隔を一貫させるため、DensityContainer または theme.density を使用してください。