shadcn-ui-flutter

Flutter 向け Shadcn UI

このスキルでは、Flutter で shadcn_ui パッケージを使用するためのドキュメントと例を提供します。

テーマ設定とカスタマイズ

Flutter 向け Shadcn UI は、強力なテーマ設定システムを提供します。組み込みのカラースキーム（blue、gray、green、neutral、orange、red、rose、slate、stone、violet、yellow、zinc）を使用することも、独自のものを作成することもできます。

テーマの適用

ShadApp 内で ShadThemeData を使用して、ライトテーマとダークテーマを定義します。

詳細ガイド

• テーマ設定
• タイポグラフィ
• Material と Cupertino の相互運用
• レスポンシブ
• デコレーター

コンポーネント

名前	説明	リファレンス
Accordion	操作可能な見出しを縦に並べたもので、それぞれの見出しを操作するとコンテンツのセクションが表示されます。	accordion.md
Alert	ユーザーの注意を引くためのコールアウトを表示します。	alert.md
Avatar	ユーザーを表すプレースホルダー付きの画像要素です。	avatar.md
Badge	バッジ、またはバッジのように見えるコンポーネントを表示します。	badge.md
Breadcrumb	リンクの階層を使って、現在のリソースへのパスを表示します。	breadcrumb.md
Button	ボタン、またはボタンのように見えるコンポーネントを表示します。	button.md
Calendar	ユーザーが日付を入力および編集できる日付フィールドコンポーネントです。	calendar.md
Card	ヘッダー、コンテンツ、フッターを備えたカードを表示します。	card.md
Checkbox	ユーザーがチェック済みと未チェックを切り替えられるコントロールです。	checkbox.md
Context Menu	マウスの右クリックで表示される、操作や機能などのメニューをユーザーに表示します。	context-menu.md
Date Picker	範囲やプリセットを指定できる日付選択コンポーネントです。	date-picker.md
Dialog	ユーザーの操作を中断するモーダルダイアログです。	dialog.md
Form	フォームを作成します。入力値の検証やフォームフィールドの値への簡単なアクセスが可能です。	form.md
IconButton	アイコンボタン、またはアイコン付きボタンのように見えるコンポーネントを表示します。	icon-button.md
Input	フォームの入力フィールド、または入力フィールドのように見えるコンポーネントを表示します。	input.md
InputOTP	コピー＆ペースト機能を備えた、アクセシブルなワンタイムパスワードコンポーネントです。	input-otp.md
Menubar	デスクトップアプリケーションで一般的な、視覚的に常時表示され、統一されたコマンド一式にすばやくアクセスできるメニューです。	menubar.md
Popover	ボタンを操作すると、ポータル内にリッチコンテンツを表示します。	popover.md
Progress	タスクの完了状況を示すインジケーターを表示します。通常はプログレスバーとして表示されます。	progress.md
RadioGroup	ラジオボタンと呼ばれる、チェック可能なボタンのセットです。一度にチェックできるボタンは1つまでです。	radio-group.md
Resizable	サイズ変更可能なパネルグループとレイアウトです。	resizable.md
Select	ボタンを操作すると、ユーザーが選択できるオプションの一覧を表示します。	select.md
Separator	コンテンツを視覚的または意味的に区切ります。	separator.md
Sheet	Dialog コンポーネントを拡張し、画面のメインコンテンツを補足するコンテンツを表示します。	sheet.md
Slider	指定された範囲内からユーザーが値を選択する入力要素です。	slider.md
Sonner	独自の方針に基づくトーストコンポーネントです。	sonner.md
Switch	ユーザーがオンとオフを切り替えられるコントロールです。	switch.md
Table	レスポンシブなテーブルコンポーネントです。	table.md
Tabs	タブパネルと呼ばれるコンテンツの階層化されたセクションのセットで、一度に1つずつ表示されます。	tabs.md
Textarea	フォームのテキストエリア、またはテキストエリアのように見えるコンポーネントを表示します。	textarea.md
Time Picker	時刻選択コンポーネントです。	time-picker.md
Toast	一時的に表示される簡潔なメッセージです。	toast.md
Tooltip	要素にキーボードフォーカスを当てるか、マウスカーソルを合わせると、その要素に関連する情報を表示するポップアップです。	tooltip.md

使用例

各コンポーネントのページ下部に例が用意されています。

基本設定

以下は、ライトテーマとダークテーマに対応した、shadcn_ui を使った Counter App の完全な例です。

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(
      debugShowCheckedModeBanner: false,
      theme: ShadThemeData(
        brightness: Brightness.light,
        colorScheme: const ShadZincColorScheme.light(),
      ),
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadZincColorScheme.dark(),
      ),
      themeMode: ThemeMode.system,
      home: const CounterPage(),
    );
  }
}

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

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return Scaffold(
      appBar: AppBar(title: const Text('Shadcn Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
              style: theme.textTheme.muted,
            ),
            Text(
              '$_counter',
              style: theme.textTheme.h1,
            ),
          ],
        ),
      ),
      floatingActionButton: ShadButton(
        onPressed: _incrementCounter,
        child: const Icon(LucideIcons.plus),
      ),
    );
  }
}

ライブラリに含まれるパッケージ

Flutter Shadcn UI は、エクスポートされており、プロジェクトにインポートせずに使用できる優れたオープンソースライブラリで構成されています。

flutter_animate

flutter animate ライブラリは、Shadcn UI コンポーネントで幅広く使用されている、非常に優れたアニメーションライブラリです。

flutter_animate のアニメーションは、コンポーネントが List<Effect> を受け取るため、ユーザーが簡単にカスタマイズできます。

lucide_icons_flutter

Shadcn UI コンポーネントで使用されている、優れたアイコンライブラリです。 LucideIcons クラスを使用して Lucide アイコンを利用できます。たとえば、LucideIcons.activity のように使用します。

すべてのアイコンはこちらでご覧いただけます。

two_dimensional_scrollables

ShadTable コンポーネントで使用されている、優れた低レベルのテーブル実装です（非常に高性能です）。

intl

intl パッケージは、メッセージ翻訳などの国際化およびローカライズ機能を提供します。

universal_image

複数の画像形式に対応しています。ShadAvatar コンポーネントで使用されています。