基本ウィジェット
-
Container
:コンテンツをラップし、装飾やレイアウト調整が可能 -
Text
:テキストを表示 -
RichText
:スタイルを適用した複数のテキストを表示 -
Image
:画像を表示 -
Icon
:アイコンを表示 -
ElevatedButton
:立体的なボタン -
TextButton
:シンプルなボタン -
OutlinedButton
:枠付きボタン -
FloatingActionButton
:フローティングアクションボタン
レイアウト関連
-
Column
:縦方向にウィジェットを並べる -
Row
:横方向にウィジェットを並べる -
Stack
:ウィジェットを重ねる -
Expanded
:子ウィジェットを親の余ったスペースいっぱいに広げる -
Flexible
:Expanded
と似ているが、より柔軟な比率指定が可能 -
Padding
:余白を追加 -
Align
:子ウィジェットの位置を調整 -
Center
:中央揃え -
SizedBox
:指定したサイズのボックス -
Spacer
:Row
やColumn
内でスペースを作る -
Wrap
:折り返し可能なレイアウト -
GridView
:グリッドレイアウト -
ListView
:スクロール可能なリスト
ナビゲーション・ページ遷移
-
Navigator
:画面遷移の管理 -
MaterialPageRoute
:マテリアルデザインの遷移 -
CupertinoPageRoute
:iOS風の遷移 -
PageView
:ページスワイプ -
TabBar
/TabBarView
:タブナビゲーション -
Drawer
:サイドメニュー -
BottomNavigationBar
:ボトムナビゲーション
フォーム・入力関連
-
TextField
:テキスト入力 -
TextFormField
:バリデーション付きテキスト入力 -
Checkbox
:チェックボックス -
Radio
:ラジオボタン -
Switch
:スイッチ -
Slider
:スライダー -
DropdownButton
:ドロップダウンメニュー -
Form
:複数の入力ウィジェットをグループ化
スクロール関連
-
SingleChildScrollView
:単一のスクロールビュー -
ListView.builder
:動的なリスト -
ListView.separated
:区切り付きリスト -
GridView.builder
:動的なグリッドビュー -
PageView
:ページスワイプ -
RefreshIndicator
:プルダウン更新
アニメーション
-
AnimatedContainer
:アニメーション付きのコンテナ -
AnimatedOpacity
:透明度のアニメーション -
AnimatedAlign
:位置のアニメーション -
AnimatedPadding
:余白のアニメーション -
AnimatedPositioned
:Stackの子ウィジェットのアニメーション -
AnimatedSwitcher
:ウィジェットの切り替えアニメーション -
Hero
:画面遷移時のアニメーション -
TweenAnimationBuilder
:カスタムアニメーション
状態管理
-
StatefulWidget
:状態を持つウィジェット -
Provider
:状態管理(provider
パッケージ使用) -
ChangeNotifier
:リスナーを通知するクラス -
ValueListenableBuilder
:値の変化をリッスンするウィジェット
ダイアログ・モーダル
-
AlertDialog
:アラートダイアログ -
SimpleDialog
:シンプルなダイアログ -
BottomSheet
:ボトムシート -
SnackBar
:スナックバー(短時間の通知)
メディア関連
-
VideoPlayer
:動画再生(video_player
パッケージ使用) -
AudioPlayer
:音声再生(audioplayers
パッケージ使用) -
WebView
:Webページの表示(webview_flutter
パッケージ使用)
カスタム描画
-
CustomPaint
:独自の描画 -
ClipRRect
:角丸のクリップ -
ClipOval
:円形のクリップ -
ClipPath
:カスタム形状のクリップ
プラットフォーム固有
-
CupertinoButton
:iOS風のボタン -
CupertinoSwitch
:iOS風のスイッチ -
CupertinoNavigationBar
:iOS風のナビゲーションバー -
CupertinoTabBar
:iOS風のタブバー