FlutterのWidgetを一覧にまとめました

FlutterのWidget一覧です。たくさんありますが、まず覚えときたいのはMaterial Components系とレイアウト系のWidgetです。 Material Components系は画面に配置する部品。レイアウト系は部品の配置方法を指定します。 それでは、Widgetを見ていきましょう。

Widgetカテゴリー

Material Components

マテリアルデザインガイドラインを実装する、視覚的、動作的、およびモーションリッチなウィジェット

Material Components(アプリの構造とナビゲーション)

Widget 説明
Appbar
f:id:Tony505:20210302051114p:plain:w150
マテリアルデザインのアプリバー。アプリバーは、ツールバーと、TabBarやFlexibleSpaceBarなどの他のウィジェットで構成されます。
BottomNavigationBar
f:id:Tony505:20210302051053p:plain:w150
BottomNavigationBarを使用すると、1 回のタップでトップレベルビューを簡単に表示したり切り替えたりできます。BottomNavigationBarウィジェットは、このコンポーネントを実装します。
Drawer
f:id:Tony505:20210302051104p:plain:w150
スキャフォールディングの端から水平方向にスライドして、アプリケーション内のナビゲーション リンクを表示するマテリアル デザイン パネル。
MaterialApp
f:id:Tony505:20210302051058p:plain:w150
マテリアルデザインを実装するアプリケーションに一般的に必要なウィジェットの数をラップする便利なウィジェット
Scaffold
f:id:Tony505:20210302051044p:plain:w150
基本的なマテリアル デザインの視覚的レイアウト構造を実装します。このクラスは、Drawer、SnackBar、およびBottomSheetを表示するためのAPIを提供します。
SliverAppBar
f:id:Tony505:20210302051049p:plain:w150
カスタムスクロールビューと統合されたマテリアル デザイン アプリ バー。
TabBar
f:id:Tony505:20210302051109p:plain:w150
タブの水平行を表示するマテリアルデザイン ウィジェット
TabBarView
f:id:Tony505:20210302051109p:plain:w150
現在選択されているタブに対応するウィジェットを表示するページ ビュー。通常はタブバーと組み合わせて使用します。
WidgetsApp
f:id:Tony505:20210302051114p:plain:w150
アプリケーションに一般的に必要なウィジェットの数をラップする便利なクラス。

Material Components(ボタン)

Widget 説明
ButtonBar
f:id:Tony505:20210302053146p:plain:w150
ボタンの水平方向の配置。
DropdownButton
f:id:Tony505:20210302053116p:plain:w150
フラット ボタンは、マテリアル コンポーネント ウィジェットに印刷されたセクションで、色で塗りつぶしてタッチに反応します。
FloatingActionButton
f:id:Tony505:20210302053132p:plain:w150
フローティング アクション ボタンは、アプリケーションのプライマリ アクションを昇格させるためにコンテンツの上に移動する円形のアイコン ボタンです。フローティングアクションボタンは、最も一般的にスキャフォールディング.floatingActionButtonフィールドで使用されます。
IconButton
f:id:Tony505:20210302053105p:plain:w150
アイコン ボタンは、マテリアル ウィジェットに印刷された画像で、色 (インク) で塗りつぶしてタッチに反応します。
OutlineButton
f:id:Tony505:20210302053136p:plain:w150
重要であるがアプリのプライマリアクションではないセカンダリアクション用の中強調ボタン。
PopupMenuButton
f:id:Tony505:20210302053141p:plain:w150
メニューを押したときにメニューを表示し、項目が選択されたためにメニューが閉じられたときに onSelected を呼び出します。
RaisedButton
f:id:Tony505:20210302054024p:plain:w150
マテリアルデザインの上げられたボタン。隆起したボタンは、インターフェース上に浮かぶ長方形の素材で構成されています。

Material Components(入力と選択)

Widget 説明
Checkbox
f:id:Tony505:20210302055531p:plain:w150
チェックボックスを使用すると、ユーザーはセットから複数のオプションを選択できます。チェックボックスウィジェットは、このコンポーネントを実装します。
Date & Time Pickers
f:id:Tony505:20210302055521p:plain:w150
日付ピッカーは、ダイアログウィンドウを使用してモバイルで単一の日付を選択します。タイムピッカーは、ダイアログを使用して、モバイルで1つの時間を(時間:分形式で)選択します。
Radio
f:id:Tony505:20210302055534p:plain:w150
ラジオボタンを使用すると、ユーザーはセットから1つのオプションを選択できます。ユーザーが利用可能なすべてのオプションを並べて表示する必要があると思われる場合は、ラジオボタンを使用して排他的に選択します。
Slider
f:id:Tony505:20210302055538p:plain:w150
スライダーを使用すると、ユーザーはスライダーの親指を動かして値の範囲から選択できます。
Switch
f:id:Tony505:20210302055543p:plain:w150
オン/オフスイッチは、単一の設定オプションの状態を切り替えます。Switchウィジェットはこのコンポーネントを実装します。
TextField
f:id:Tony505:20210302055547p:plain:w150
テキストフィールドをタッチすると、カーソルが置かれ、キーボードが表示されます。TextFieldウィジェットはこのコンポーネントを実装します。

Material Components(ダイアログ、アラート、およびパネル)

Widget 説明
AlertDialog
f:id:Tony505:20210302061309p:plain:w150
アラートは、状況についてユーザーに通知する確認応答を必要とする緊急の中断です。AlertDialogウィジェットはこのコンポーネントを実装します。
BottomSheet
f:id:Tony505:20210302061313p:plain:w150
下部のシートは画面の下から上にスライドして、より多くのコンテンツを表示します。showBottomSheet()を呼び出して永続的なボトムシートを実装するか、showModalBottomSheet()を呼び出してモーダルボトムシートを実装できます。
ExpansionPanel
f:id:Tony505:20210302061300p:plain:w150
拡張パネルには作成フローが含まれており、要素の軽量編集が可能です。ExpansionPanelウィジェットはこのコンポーネントを実装します。
SimpleDialog
f:id:Tony505:20210302061249p:plain:w150
単純なダイアログは、リストアイテムに関する追加の詳細またはアクションを提供できます。たとえば、サブテキストや直交アクション(アカウントの追加など)を明確にするアバターアイコンを表示できます。
SnackBar
f:id:Tony505:20210302061318p:plain:w150
画面の下部に短時間表示されるオプションのアクションを含む軽量メッセージ。

Material Components(情報表示)

Widget 説明
Card
f:id:Tony505:20210302054420p:plain:w150
マテリアル デザイン カード。カードには、わずかに丸い角と影があります。
Chip
f:id:Tony505:20210302054425p:plain:w150
マテリアル デザイン チップ。チップは、接触などの小さなブロックで複雑なエンティティを表します。
CircularProgressIndicator
f:id:Tony505:20210302054429p:plain:w150
アプリケーションがビジーであることを示すためにスピンするマテリアルデザインの循環進行状況インジケーター。
DataTable
f:id:Tony505:20210302054432p:plain:w150
データ テーブルには、生データのセットが表示されます。通常、デスクトップエンタープライズ製品に表示されます。DataTable ウィジェットは、このコンポーネントを実装します。
GridView
f:id:Tony505:20210302054404p:plain:w150
グリッド リストは、縦および横のレイアウトで配列されたセルの繰り返しパターンで構成されます。GridView ウィジェットは、このコンポーネントを実装します。
Icon
f:id:Tony505:20210302054413p:plain:w150
マテリアル デザイン アイコン。
Image
f:id:Tony505:20210302054417p:plain:w150
イメージを表示するウィジェット
LinearProgressIndicator
f:id:Tony505:20210302054438p:plain:w150
マテリアルデザインの線形進行状況インジケーター(プログレス バーとも呼ばれます)。
Tooltip
f:id:Tony505:20210302054442p:plain:w150
ツールヒントは、ボタンやその他のユーザー インターフェイス アクションの機能を説明するのに役立つテキスト ラベルを提供します。Tooltip ウィジェットが長押しされたとき (またはユーザーが他の適切なアクションを実行した場合) にラベルを表示するには、ツールヒント ウィジェットのボタンをラップします。

Material Components(レイアウト)

Widget 説明
Divider
f:id:Tony505:20210302063057p:plain:w150
両側にパディングを持つ 1 つの論理ピクセルの太さの水平線。
ListTile
f:id:Tony505:20210302063102p:plain:w150
通常、一部のテキストと、先頭アイコンまたは末尾アイコンを含む固定高さの行。
Stepper
f:id:Tony505:20210302063047p:plain:w150
一連のステップの進行状況を表示するマテリアルデザインステッパーウィジェット

レイアウト

他のウィジェットの列、行、グリッド、および他の多くのレイアウトを配置します。

レイアウト(Single-child)

Widget 説明
Align
f:id:Tony505:20210303051057p:plain:w150
子をそれ自体の中に配置し、オプションで子のサイズに基づいてサイズを変更するウィジェット
AspectRatio
f:id:Tony505:20210303051100p:plain:w150
子のサイズを特定のアスペクト比にしようとするウィジェット
Baseline
f:id:Tony505:20210303051105p:plain:w150
子のベースラインに従って子を配置するウィジェット
Center
f:id:Tony505:20210303051110p:plain:w150
子をそれ自体の中心に置くウィジェット
ConstrainedBox
f:id:Tony505:20210303051114p:plain:w150
子に追加の制約を課すウィジェット
Container
f:id:Tony505:20210303051118p:plain:w150
一般的なペイント、配置、サイズ設定ウィジェットを組み合わせた便利なウィジェット
CustomSingleChildLayout
f:id:Tony505:20210303051114p:plain:w150
単一の子のレイアウトをデリゲートに延期するウィジェット
Expanded
f:id:Tony505:20210303051123p:plain:w150
行、列、またはフレックスの子を展開するウィジェット
FittedBox
f:id:Tony505:20210303051126p:plain:w150
フィットに応じて、子をそれ自体の中でスケーリングおよび配置します。
FractionallySizedBox
f:id:Tony505:20210303051131p:plain:w150
子を使用可能な合計スペースの一部にサイズ変更するウィジェット。レイアウトアルゴリズムの詳細については、RenderFractionallySizedOverflowBoxを参照してください。
IntrinsicHeight 子のサイズを子の本来の高さに合わせるウィジェット
IntrinsicWidth 子のサイズを子の固有の幅に合わせるウィジェット
LimitedBox
f:id:Tony505:20210303051135p:plain:w150
制約がない場合にのみサイズを制限するボックス。
Offstage 子をツリー内にあるかのようにレイアウトするウィジェットですが、何もペイントせず、子をヒットテストに使用できるようにすることも、親にスペースをとることもありません。
OverflowBox 親から取得するものとは異なる制約を子に課し、子が親からオーバーフローすることを可能にするウィジェット
Padding
f:id:Tony505:20210303051139p:plain:w150
指定されたパディングによって子を挿入するウィジェット
SizedBox
f:id:Tony505:20210303051143p:plain:w150
指定されたサイズのボックス。子が与えられた場合、このウィジェットはその子に特定の幅や高さを強制します(値がこのウィジェットの親によって許可されていると仮定します)。幅または高さのいずれかがnullの場合、このウィジェットは、そのディメンションの子のサイズに一致するようにそれ自体のサイズを設定します。
SizedOverflowBox 特定のサイズであるが、元の制約を子に渡すウィジェット。これはおそらくオーバーフローします。
Transform
f:id:Tony505:20210303051147p:plain:w150
子をペイントする前に変換を適用するウィジェット

レイアウト(Multi-child)

Widget 説明
Column
f:id:Tony505:20210303051401p:plain:w150
ウィジェットのリストを垂直方向にレイアウトします。
CustomMultiChildLayout デリゲートを使用して複数の子のサイズと位置を設定するウィジェット
Flow フローレイアウトアルゴリズムを実装するウィジェット
GridView
f:id:Tony505:20210303051404p:plain:w150
グリッドリストは、垂直および水平のレイアウトで配列されたセルの繰り返しパターンで構成されます。GridViewウィジェットはこのコンポーネントを実装します。
IndexedStack
f:id:Tony505:20210303051413p:plain:w150
子のリストから1つの子を表示するスタック。
LayoutBuilder
f:id:Tony505:20210303051337p:plain:w150
ウィジェットのサイズに依存できるウィジェットツリーを構築します。
ListBody 子を特定の軸に沿って順番に配置し、他の軸の親の次元に強制するウィジェット
ListView ウィジェットのスクロール可能な線形リスト。ListViewは、最も一般的に使用されるスクロールウィジェットです。子をスクロール方向に次々に表示します。交差軸では、子はListViewに入力する必要があります。
Row
f:id:Tony505:20210303051345p:plain:w150
ウィジェットのリストを水平方向にレイアウトします。
Stack
f:id:Tony505:20210303051348p:plain:w150
このクラスは、テキストと画像をグラデーションでオーバーレイし、下部にボタンを付けるなど、簡単な方法で複数の子を重ねる場合に便利です。
Table
f:id:Tony505:20210303051352p:plain:w150
子にテーブルレイアウトアルゴリズムを使用するウィジェット
Wrap
f:id:Tony505:20210303051357p:plain:w150
子を複数の水平または垂直方向に表示するウィジェット

レイアウト(Sliver widgets)

Widget 説明
CupertinoSliverNavigationBar
f:id:Tony505:20210303051519p:plain:w150
スライバーを使用したiOS-11スタイルの大きなタイトルのiOSスタイルのナビゲーションバー。
CustomScrollView スライバーを使用してカスタムスクロール効果を作成するScrollView。
SliverAppBar
f:id:Tony505:20210303051523p:plain:w150
CustomScrollViewと統合するマテリアルデザインアプリバー。
SliverChildBuilderDelegate ビルダーコールバックを使用してスライバーに子を提供するデリゲート。
SliverChildListDelegate 明示的なリストを使用してスライバーに子を提供するデリゲート。
SliverFixedExtentList 同じ主軸範囲を持つ複数のボックスの子を線形配列に配置するスライバー。
SliverGrid 複数のボックスの子を2次元の配置で配置するスライバー。
SliverList 複数のボックスの子を主軸に沿って線形配列に配置するスライバー。
SliverPadding 別のスライバーの両側にパディングを適用するスライバー。
SliverPersistentHeader スライバーのGrowthDirectionの反対側のビューポートの端までスライバーをスクロールするとサイズが変化するスライバー。
SliverToBoxAdapter 単一のボックスウィジェットを含むスライバー。

Text

テキストの表示とスタイル設定。

Widget 説明
DefaultTextStyle 明示的なスタイルなしで子孫のテキストウィジェットに適用するテキストスタイル。
RichText
f:id:Tony505:20210303060552p:plain:w150
リッチテキストウィジェットは、複数の異なるスタイルを使用するテキストを表示します。表示するテキストは、TextSpanオブジェクトのツリーを使用して記述されます。各オブジェクトには、そのサブツリーに使用されるスタイルが関連付けられています。レイアウトの制約に応じて、テキストが複数行にまたがったり、すべて同じ行に表示されたりする場合があります。
Text
f:id:Tony505:20210303060556p:plain:w150
単一のスタイルのテキストの実行。

Input

MaterialComponentsとCupertinoの入力ウィジェットに加えてユーザー入力を取得します。

Widget 説明
Form
f:id:Tony505:20210303062322p:plain:w150
複数のフォームフィールドウィジェット(TextFieldウィジェットなど)をグループ化するためのオプションのコンテナー。
FormField 単一のフォームフィールド。このウィジェットはフォームフィールドの現在の状態を維持するため、更新と検証エラーはUIに視覚的に反映されます。
RawKeyboardListener ユーザーがキーボードのキーを押すか離すたびにコールバックを呼び出すウィジェット

Accessibility

アプリをアクセシブルにします。

Widget 説明
ExcludeSemantics その子孫のすべてのセマンティクスを削除するウィジェット。これは、他の方法では報告されるが混乱を招くだけのサブウィジェットを非表示にするために使用できます。たとえば、Material Components Chipウィジェットは、チップラベルと重複しているため、アバターを非表示にします。
MergeSemantics その子孫のセマンティクスをマージするウィジェット
Semantics ウィジェットの意味の説明でウィジェットツリーに注釈を付けるウィジェット。アプリケーションの意味を判断するために、アクセシビリティツール、検索エンジン、およびその他のセマンティック分析ソフトウェアによって使用されます。

Animation and Motion

アプリにアニメーションをもたらします。

Widget 説明
AnimatedAlign アニメーションバージョンのAlignは、指定された配置が変更されるたびに、指定された期間にわたって子供の位置を自動的に移行します。
AnimatedBuilder アニメーションを作成するための汎用ウィジェット。AnimatedBuilderは、より大きなビルド関数の一部としてアニメーションを含めたい、より複雑なウィジェットに役立ちます。AnimatedBuilderを使用するには、ウィジェットを作成してビルダー関数を渡すだけです。
AnimatedContainer 一定期間にわたって値が徐々に変化するコンテナ。
AnimatedCrossFade 与えられた2人の子の間でクロスフェードし、サイズ間でアニメーション化するウィジェット
AnimatedDefaultTextStyle DefaultTextStyleのアニメーションバージョン。指定されたスタイルが変更されるたびに、指定された期間にわたってデフォルトのテキストスタイル(明示的なスタイルのない子孫のテキストウィジェットに適用されるテキストスタイル)を自動的に移行します。
AnimatedListState アイテムが挿入または削除されたときにアイテムをアニメーション化するスクロールコンテナの状態。
AnimatedModalBarrier ユーザーが自分の背後にあるウィジェットと対話するのを防ぐウィジェット
AnimatedOpacity 指定された不透明度が変更されるたびに、指定された期間にわたって子供の不透明度を自動的に遷移させる不透明度のアニメーションバージョン。
AnimatedPhysicalModel PhysicalModelのアニメーションバージョン。
AnimatedPositioned 指定された位置が変更されるたびに、指定された期間にわたって子供の位置を自動的に遷移させるPositionedのアニメーションバージョン。
AnimatedSize 指定された子のサイズが変更されるたびに、指定された期間にわたってそのサイズを自動的に移行するアニメーションウィジェット
AnimatedWidget 指定されたListenableが値を変更したときに再構築するウィジェット
AnimatedWidgetBaseState 暗黙的なアニメーションを持つウィジェットの基本クラス。
DecoratedBoxTransition デコレーションのさまざまなプロパティをアニメーション化するDecoratedBoxのアニメーションバージョン。
FadeTransition ウィジェットの不透明度をアニメーション化します。
Hero 子をヒーローアニメーションの候補としてマークするウィジェット
PositionedTransition 特定のアニメーションを使用して、アニメーションの存続期間中に子供の位置を開始位置から終了位置に遷移させる、Positionedのアニメーションバージョン。
RotationTransition ウィジェットの回転をアニメーション化します。
ScaleTransition 変換されたウィジェットのスケールをアニメーション化します。
SizeTransition 独自のサイズをアニメーション化し、子をクリップして位置合わせします。
SlideTransition 通常の位置に対するウィジェットの位置をアニメーション化します。

Assets, Images, and Icons

アセットの管理、画像の表示、アイコンの表示。

Widget 説明
AssetBundle アセットバンドルには、アプリケーションで使用できる画像や文字列などのリソースが含まれています。これらのリソースへのアクセスは非同期であるため、アプリケーションのユーザーインターフェイスをブロックすることなく、ネットワーク経由(NetworkAssetBundleなど)またはローカルファイルシステムから透過的にロードできます。
Icon
f:id:Tony505:20210302054413p:plain:w150
マテリアルデザインのアイコン。
Image
f:id:Tony505:20210302054417p:plain:w150
画像を表示するウィジェット
RawImage dart:ui.Imageを直接表示するウィジェット

Async

パターンをFlutterアプリケーションに非同期します。

Widget 説明
FutureBuilder Futureとの相互作用の最新のスナップショットに基づいて自身を構築するウィジェット
StreamBuilder ストリームとの相互作用の最新のスナップショットに基づいて自身を構築するウィジェット

Cupertino (iOS-style widgets)

現在のiOSデザイン言語用の美しく忠実度の高いウィジェット

Widget 説明
CupertinoActionSheet
f:id:Tony505:20210309041801p:plain:w150
多くの中からオプションを選択するためのiOSスタイルのモーダルボトムアクションシート。
CupertinoActivityIndicator
f:id:Tony505:20210309041806p:plain:w150
iOSスタイルのアクティビティインジケーター。円形の「スピナー」を表示します。
CupertinoAlertDialog
f:id:Tony505:20210309041809p:plain:w150
iOSスタイルのアラートダイアログ。
CupertinoButton
f:id:Tony505:20210309041813p:plain:w150
iOSスタイルのボタン。
CupertinoContextMenu
f:id:Tony505:20210309041817p:plain:w150
子供が長押しされたときに開くiOSスタイルのフルスクリーンモーダルルート。コンテンツに関連するアクションを表示するために使用されます。
CupertinoDatePicker
f:id:Tony505:20210309041823p:plain:w150
iOSスタイルの日付または日付と時刻のピッカー。
CupertinoDialog
f:id:Tony505:20210309041827p:plain:w150
iOSスタイルのダイアログ。
CupertinoDialogAction
f:id:Tony505:20210309041831p:plain:w150
CupertinoAlertDialogで通常使用されるボタン。
CupertinoFullscreenDialogTransition
f:id:Tony505:20210309041836p:plain:w150
フルスクリーンダイアログの呼び出しに使用されるiOSスタイルのトランジション
CupertinoNavigationBar
f:id:Tony505:20210309041840p:plain:w150
OSスタイルのトップナビゲーションバー。通常、CupertinoPageScaffoldで使用されます。
CupertinoPageScaffold
f:id:Tony505:20210309041845p:plain:w150
基本的なiOSスタイルのページレイアウト構造。ナビゲーションバーとコンテンツを背景に配置します。
CupertinoPageTransition
f:id:Tony505:20210309041850p:plain:w150
iOSスタイルのページ遷移アニメーションを提供します。
CupertinoPicker
f:id:Tony505:20210309041855p:plain:w150
iOSスタイルのピッカーコントロール。短いリストでアイテムを選択するために使用されます。
CupertinoPopupSurface 警告ダイアログやアクションシートなど、iOSポップアップサーフェスのように見える角丸長方形のサーフェス
CupertinoScrollbar
f:id:Tony505:20210309041858p:plain:w150
スクロール可能なウィジェットのどの部分が現在表示されているかを示すiOSスタイルのスクロールバー。
CupertinoSegmentedControl
f:id:Tony505:20210309041903p:plain:w150
iOSスタイルのセグメント化されたコントロール。水平リストで相互に排他的なオプションを選択するために使用されます。
CupertinoSlider
f:id:Tony505:20210309041906p:plain:w150
値の範囲から選択するために使用されます。
CupertinoSlidingSegmentedControl
f:id:Tony505:20210309041910p:plain:w150
iOS-13スタイルのセグメント化されたコントロール。水平リストで相互に排他的なオプションを選択するために使用されます。
CupertinoSliverNavigationBar
f:id:Tony505:20210309041913p:plain:w150
スライバーを使用したiOS-11スタイルの大きなタイトルのiOSスタイルのナビゲーションバー。
CupertinoSwitch
f:id:Tony505:20210309041918p:plain:w150
iOSスタイルのスイッチ。単一の設定のオン/オフ状態を切り替えるために使用されます。
CupertinoTabBar
f:id:Tony505:20210309041922p:plain:w150
iOSスタイルの下部タブバー。通常、CupertinoTabScaffoldで使用されます。
CupertinoTabScaffold
f:id:Tony505:20210309041925p:plain:w150
タブ付きiOSアプリの構造。コンテンツのタブの上にタブバーを配置します。
CupertinoTabView
f:id:Tony505:20210309041929p:plain:w150
タブ間の並列ナビゲーションをサポートするタブのルートコンテンツ。通常、CupertinoTabScaffoldで使用されます。
CupertinoTextField
f:id:Tony505:20210309041933p:plain:w150
iOSスタイルのテキストフィールド。
CupertinoTimerPicker
f:id:Tony505:20210309041937p:plain:w150
iOSスタイルのカウントダウンタイマーピッカー。

Interaction Models

タッチイベントに応答し、ユーザーをさまざまなビューにルーティングします。

Interaction Models(Touch interactions)

Widget 説明
AbsorbPointer ヒットテスト中にポインターを吸収するウィジェット。吸収がtrueの場合、このウィジェットは、ヒットテストを終了することにより、サブツリーがポインターイベントを受信するのを防ぎます。レイアウト中にスペースを消費し、通常どおり子をペイントします。RenderBox.hitTestからtrueを返すため、子が検索されたイベントのターゲットになるのを防ぐだけです。
Dismissible> 示された方向にドラッグすることで閉じることができるウィジェット。DismissDirectionでこのウィジェットをドラッグまたはフリングすると、子がスライドして表示されなくなります。スライドアニメーションに続いて、resizeDurationがnull以外の場合、Dismissibleウィジェットは、resizeDuration上でその高さ(または幅、却下方向に垂直な方)をゼロにアニメーション化します。
DragTarget Draggableウィジェットがドロップされたときにデータを受信するウィジェット。ドラッグ可能オブジェクトがドラッグターゲットの上にドラッグされると、ドラッグターゲットはドラッグ対象が保持しているデータを受け入れるかどうかを尋ねられます。ユーザーがドラッグ対象をドラッグターゲットの上にドロップした場合(およびドラッグターゲットがドラッグ対象のデータを受け入れることを示した場合)、ドラッグターゲットはドラッグ対象のデータを受け入れるように求められます。
Draggable DragTargetにドラッグできるウィジェット。ドラッグ可能なウィジェットがドラッグジェスチャの開始を認識すると、画面上でユーザーの指を追跡するフィードバックウィジェットが表示されます。ユーザーがDragTargetの上にいるときに指を離すと、そのターゲットには、ドラッグ可能なデータによって運ばれるデータを受け入れる機会が与えられます。
DraggableScrollableSheet 制限に達するまでスクロール可能サイズのサイズを変更してからスクロールすることにより、ドラッグジェスチャに応答するスクロール可能オブジェクトのコンテナ。
GestureDetector ジェスチャーを検出するウィジェット。null以外のコールバックに対応するジェスチャを認識しようとします。このウィジェットに子がある場合、そのサイズ設定の動作はその子に委ねられます。子がない場合は、代わりに親に合うように成長します。
IgnorePointer ヒットテスト中に表示されないウィジェット。無視がtrueの場合、このウィジェット(およびそのサブツリー)はヒットテストからは見えません。レイアウト中にスペースを消費し、通常どおり子をペイントします。RenderBox.hitTestからfalseを返すため、検索されたイベントのターゲットにすることはできません。
InteractiveViewer 子とのパンおよびズームの相互作用を可能にするウィジェット
LongPressDraggable 子を長押しからドラッグ可能にします。
Scrollable Scrollableは、ジェスチャ認識を含むスクロール可能なウィジェットのインタラクションモデルを実装しますが、実際に子を表示するビューポートがどのように構築されるかについては意見がありません。

Interaction Models(Routing)

Widget 説明
Hero 子をヒーローアニメーションの候補としてマークするウィジェット
Navigator スタック規律を持つ子ウィジェットのセットを管理するウィジェット。多くのアプリには、ウィジェット階層の最上位近くにナビゲーターがあり、オーバーレイを使用して論理履歴を表示し、最近アクセスしたページを古いページの上に視覚的に表示します。このパターンを使用すると、ウィジェットをオーバーレイ内で移動することにより、ナビゲーターが1つのページから別のページに視覚的に移行できます。同様に、ナビゲーターを使用して、ダイアログウィジェットを現在のページの上に配置することにより、ダイアログを表示できます。

Painting and effects

これらのウィジェットは、レイアウト、サイズ、または位置を変更せずに、子供に視覚効果を適用します。

Widget 説明
BackdropFilter 既存のペイントされたコンテンツにフィルターを適用してから、子をペイントするウィジェット。この効果は、特にフィルターがブラーなどの非局所的である場合、比較的高価です。
ClipOval
f:id:Tony505:20210309053226p:plain:w150
楕円を使用して子をクリップするウィジェット
ClipPath パスを使用して子をクリップするウィジェット
ClipRect
f:id:Tony505:20210309053229p:plain:w150
長方形を使用して子をクリップするウィジェット
CustomPaint
f:id:Tony505:20210309053234p:plain:w150
ペイントフェーズ中に描画するキャンバスを提供するウィジェット
DecoratedBox
f:id:Tony505:20210309053238p:plain:w150
子がペイントする前または後にデコレーションをペイントするウィジェット
FractionalTranslation 子をペイントする前に、ボックスのサイズの一部として表される変換を適用するウィジェット
Opacity
f:id:Tony505:20210309053219p:plain:w150
子を部分的に透明にするウィジェット
RotatedBox 子を1/4回転の整数で回転させるウィジェット
Transform
f:id:Tony505:20210309053222p:plain:w150
子をペイントする前に変換を適用するウィジェット

Scrolling

親の子として複数のウィジェットをスクロールします。

Widget 説明
CustomScrollView スライバーを使用してカスタムスクロール効果を作成するScrollView。
DraggableScrollableSheet 制限に達するまでスクロール可能サイズのサイズを変更してからスクロールすることにより、ドラッグジェスチャに応答するスクロール可能オブジェクトのコンテナ。
GridView
f:id:Tony505:20210309054459p:plain:w150
グリッドリストは、垂直および水平のレイアウトで配列されたセルの繰り返しパターンで構成されます。GridViewウィジェットはこのコンポーネントを実装します。
ListView
f:id:Tony505:20210309054509p:plain:w150
ウィジェットのスクロール可能な線形リスト。ListViewは、最も一般的に使用されるスクロールウィジェットです。子をスクロール方向に次々に表示します。交差軸では、子はListViewに入力する必要があります。
NestedScrollView その内部のスクロールビューは、他のスクロールビューをネストすることができ、それらのスクロール位置は本質的にリンクされています。
NotificationListener ツリーをバブリングする通知をリッスンするウィジェット
PageView ページごとに機能するスクロール可能なリスト。
RefreshIndicator
f:id:Tony505:20210309054449p:plain:w150
スクロール可能なマテリアルデザインプルツーリフレッシュラッパー。
ScrollConfiguration スクロール可能なウィジェットがサブツリーでどのように動作するかを制御します。
Scrollable Scrollableは、ジェスチャ認識を含むスクロール可能なウィジェットのインタラクションモデルを実装しますが、実際に子を表示するビューポートがどのように構築されるかについては意見がありません。
Scrollbar マテリアルデザインのスクロールバー。スクロールバーは、スクロール可能なウィジェットのどの部分が実際に表示されているかを示します。
SingleChildScrollView 1つのウィジェットをスクロールできるボックス。このウィジェットは、通常は完全に表示される単一のボックスがある場合に役立ちます。たとえば、タイムピッカーの時計の文字盤ですが、コンテナーが1つの軸(スクロール方向)で小さすぎる場合は、スクロールできることを確認する必要があります。 )。

Styling

アプリのテーマを管理したり、アプリを画面サイズに対応させたり、パディングを追加したりします。

Widget 説明
MediaQuery メディアクエリが指定されたデータに解決されるサブツリーを確立します。
Padding
f:id:Tony505:20210303051139p:plain:w150
指定されたパディングによって子を挿入するウィジェット
Theme 子孫ウィジェットにテーマを適用します。テーマは、アプリケーションの色と活版印刷の選択について説明します。