Widgetとは？
FlutterにおけるWidgetとは、画面を作っていく「パーツ」のことである。
画面上のレイアウト、要素、装飾、アニメーションなど、あらゆるものを表現するために使用される。
例えば、テキスト、ボタン、コンテナ（箱）、行や列、余白まですべてがウィジェットでできている。
これらのWidgetを組み合わせて、アプリの画面が作られる。
※Widget名は大文字で始まる。
Widgetの種類
Widgetにはたくさんの種類がある。いろいろな分類の仕方があるが、デザインのテイストで分ける場合、Androidアプリらしい「Material」系統、iOSアプリらしい「Cupertino」系統のWidgetがある。
（Flutter立ち上げ時に現れるカウンターアプリは、Material系統のWidgetを使用している。）
まず知っておきたいのは、MaterialComponents系とレイアウト系のWidget。
MaterialComponents系は画面に配置するパーツ。レイアウト系はパーツの配置方法を指定する。
MaterialComponents系
見た目をデザインしたり、クリックや入力したりできる、画面上に表示されるWidgetである。
Material Components(アプリの構造とナビゲーション)
| Widget | 説明 |
|---|
| Appbar | マテリアルデザインのアプリバー。アプリバーは、ツールバーと、TabBarやFlexibleSpaceBarなどの他のウィジェットで構成されます。 |
| BottomNavigationBar | BottomNavigationBarを使用すると、1 回のタップでトップレベルビューを簡単に表示したり切り替えたりできます。BottomNavigationBarウィジェットは、このコンポーネントを実装します。 |
| Drawer | スキャフォールディングの端から水平方向にスライドして、アプリケーション内のナビゲーション リンクを表示するマテリアル デザイン パネル。 |
| MaterialApp | マテリアルデザインを実装するアプリケーションに一般的に必要なウィジェットの数をラップする便利なウィジェット。 |
| Scaffold | 基本的なマテリアル デザインの視覚的レイアウト構造を実装します。このクラスは、Drawer、SnackBar、およびBottomSheetを表示するためのAPIを提供します。 |
| SliverAppBar | カスタムスクロールビューと統合されたマテリアル デザイン アプリ バー。 |
| TabBar | タブの水平行を表示するマテリアルデザイン ウィジェット。 |
| TabBarView | 現在選択されているタブに対応するウィジェットを表示するページ ビュー。通常はタブバーと組み合わせて使用します。 |
| WidgetsApp | アプリケーションに一般的に必要なウィジェットの数をラップする便利なクラス。 |
Material Components(ボタン)
| Widget | 説明 |
|---|
| ButtonBar | ボタンの水平方向の配置。 |
| DropdownButton | フラット ボタンは、マテリアル コンポーネント ウィジェットに印刷されたセクションで、色で塗りつぶしてタッチに反応します。 |
| FloatingActionButton | フローティング アクション ボタンは、アプリケーションのプライマリ アクションを昇格させるためにコンテンツの上に移動する円形のアイコン ボタンです。フローティングアクションボタンは、最も一般的にスキャフォールディング.floatingActionButtonフィールドで使用されます。 |
| IconButton | アイコン ボタンは、マテリアル ウィジェットに印刷された画像で、色 (インク) で塗りつぶしてタッチに反応します。 |
| OutlineButton | 重要であるがアプリのプライマリアクションではないセカンダリアクション用の中強調ボタン。 |
| PopupMenuButton | メニューを押したときにメニューを表示し、項目が選択されたためにメニューが閉じられたときに onSelected を呼び出します。 |
| RaisedButton | マテリアルデザインの上げられたボタン。隆起したボタンは、インターフェース上に浮かぶ長方形の素材で構成されています。 |
Material Components(入力と選択)
| Widget | 説明 |
|---|
| Checkbox | チェックボックスを使用すると、ユーザーはセットから複数のオプションを選択できます。チェックボックスウィジェットは、このコンポーネントを実装します。 |
| Date & Time Pickers | 日付ピッカーは、ダイアログウィンドウを使用してモバイルで単一の日付を選択します。タイムピッカーは、ダイアログを使用して、モバイルで1つの時間を（時間：分形式で）選択します。 |
| Radio | ラジオボタンを使用すると、ユーザーはセットから1つのオプションを選択できます。ユーザーが利用可能なすべてのオプションを並べて表示する必要があると思われる場合は、ラジオボタンを使用して排他的に選択します。 |
| Slider | スライダーを使用すると、ユーザーはスライダーの親指を動かして値の範囲から選択できます。 |
| Switch | オン/オフスイッチは、単一の設定オプションの状態を切り替えます。Switchウィジェットはこのコンポーネントを実装します。 |
| TextField | テキストフィールドをタッチすると、カーソルが置かれ、キーボードが表示されます。TextFieldウィジェットはこのコンポーネントを実装します。 |
Material Components(情報表示)
| Widget | 説明 |
|---|
| Card | マテリアル デザイン カード。カードには、わずかに丸い角と影があります。 |
| Chip | マテリアル デザイン チップ。チップは、接触などの小さなブロックで複雑なエンティティを表します。 |
| CircularProgressIndicator | アプリケーションがビジーであることを示すためにスピンするマテリアルデザインの循環進行状況インジケーター。 |
| DataTable | データ テーブルには、生データのセットが表示されます。通常、デスクトップエンタープライズ製品に表示されます。DataTable ウィジェットは、このコンポーネントを実装します。 |
| GridView | グリッド リストは、縦および横のレイアウトで配列されたセルの繰り返しパターンで構成されます。GridView ウィジェットは、このコンポーネントを実装します。 |
| Icon | マテリアル デザイン アイコン。 |
| Image | イメージを表示するウィジェット。 |
| LinearProgressIndicator | マテリアルデザインの線形進行状況インジケーター(プログレス バーとも呼ばれます)。 |
| Tooltip | ツールヒントは、ボタンやその他のユーザー インターフェイス アクションの機能を説明するのに役立つテキスト ラベルを提供します。Tooltip ウィジェットが長押しされたとき (またはユーザーが他の適切なアクションを実行した場合) にラベルを表示するには、ツールヒント ウィジェットのボタンをラップします。 |
Material Components(レイアウト)
| Widget | 説明 |
|---|
| Divider | 両側にパディングを持つ 1 つの論理ピクセルの太さの水平線。 |
| ListTile | 通常、一部のテキストと、先頭アイコンまたは末尾アイコンを含む固定高さの行。 |
| Stepper | 一連のステップの進行状況を表示するマテリアルデザインステッパーウィジェット。 |
レイアウト系
パーツの配置方法を指定する、画面上に表示されないWidgetである。
レイアウト(Single-child)
| Widget | 説明 |
|---|
| Align | 子をそれ自体の中に配置し、オプションで子のサイズに基づいてサイズを変更するウィジェット。 |
| AspectRatio | 子のサイズを特定のアスペクト比にしようとするウィジェット。 |
| Baseline | 子のベースラインに従って子を配置するウィジェット。 |
| Center | 子をそれ自体の中心に置くウィジェット。 |
| ConstrainedBox | 子に追加の制約を課すウィジェット。 |
| Container | 一般的なペイント、配置、サイズ設定ウィジェットを組み合わせた便利なウィジェット。 |
| CustomSingleChildLayout | 単一の子のレイアウトをデリゲートに延期するウィジェット。 |
| Expanded | 行、列、またはフレックスの子を展開するウィジェット。 |
| FittedBox | フィットに応じて、子をそれ自体の中でスケーリングおよび配置します。 |
| FractionallySizedBox | 子を使用可能な合計スペースの一部にサイズ変更するウィジェット。レイアウトアルゴリズムの詳細については、RenderFractionallySizedOverflowBoxを参照してください。 |
| IntrinsicHeight | 子のサイズを子の本来の高さに合わせるウィジェット。 |
| IntrinsicWidth | 子のサイズを子の固有の幅に合わせるウィジェット。 |
| LimitedBox | 制約がない場合にのみサイズを制限するボックス。 |
| Offstage | 子をツリー内にあるかのようにレイアウトするウィジェットですが、何もペイントせず、子をヒットテストに使用できるようにすることも、親にスペースをとることもありません。 |
| OverflowBox | 親から取得するものとは異なる制約を子に課し、子が親からオーバーフローすることを可能にするウィジェット。 |
| Padding | 指定されたパディングによって子を挿入するウィジェット。 |
| SizedBox | 指定されたサイズのボックス。子が与えられた場合、このウィジェットはその子に特定の幅や高さを強制します（値がこのウィジェットの親によって許可されていると仮定します）。幅または高さのいずれかがnullの場合、このウィジェットは、そのディメンションの子のサイズに一致するようにそれ自体のサイズを設定します。 |
| SizedOverflowBox | 特定のサイズであるが、元の制約を子に渡すウィジェット。これはおそらくオーバーフローします。 |
| Transform | 子をペイントする前に変換を適用するウィジェット。 |
レイアウト(Multi-child)
| Widget | 説明 |
|---|
| Column | 子ウィジェットのリストを垂直方向にレイアウトします。 |
| CustomMultiChildLayout | デリゲートを使用して複数の子のサイズと位置を設定するウィジェット。 |
| Flow | フローレイアウトアルゴリズムを実装するウィジェット。 |
| GridView | グリッドリストは、垂直および水平のレイアウトで配列されたセルの繰り返しパターンで構成されます。GridViewウィジェットはこのコンポーネントを実装します。 |
| IndexedStack | 子のリストから1つの子を表示するスタック。 |
| LayoutBuilder | 親ウィジェットのサイズに依存できるウィジェットツリーを構築します。 |
| ListBody | 子を特定の軸に沿って順番に配置し、他の軸の親の次元に強制するウィジェット。 |
| ListView | ウィジェットのスクロール可能な線形リスト。ListViewは、最も一般的に使用されるスクロールウィジェットです。子をスクロール方向に次々に表示します。交差軸では、子はListViewに入力する必要があります。 |
| Row | 子ウィジェットのリストを水平方向にレイアウトします。 |
| Stack | このクラスは、テキストと画像をグラデーションでオーバーレイし、下部にボタンを付けるなど、簡単な方法で複数の子を重ねる場合に便利です。 |
| Table | 子にテーブルレイアウトアルゴリズムを使用するウィジェット。 |
| Wrap | 子を複数の水平または垂直方向に表示するウィジェット。 |
Text
文字の表示やその装飾に関するWidgetである。
| Widget | 説明 |
|---|
| DefaultTextStyle | 明示的なスタイルなしで子孫のテキストウィジェットに適用するテキストスタイル。 |
| RichText | リッチテキストウィジェットは、複数の異なるスタイルを使用するテキストを表示します。表示するテキストは、TextSpanオブジェクトのツリーを使用して記述されます。各オブジェクトには、そのサブツリーに使用されるスタイルが関連付けられています。レイアウトの制約に応じて、テキストが複数行にまたがったり、すべて同じ行に表示されたりする場合があります。 |
| Text | 単一のスタイルのテキストの実行。 |
