Flutterのウィジェット一言
これ見た感想
SafeArea
通知メッセージなど、画面の表示を阻害するものがここで囲んだものには重ならない。
bodyのroot要素として囲んでおくと安牌。
Expanded
ListViewなど、可変データを扱う場合に囲む
TextField
TextEditControllerをStateとしてcontrollerプロパティに渡して使う
入力値はTextEditController.textで取れる
TextEditController.text = ''ってやると直接値を設定することも可能
Column
ウィジェットを縦に並べる
座標ではなく、ウィジェットに対して、というのがflutter特有
Row
ウィジェットを横に並べる
座標ではなく、ウィジェットに対して、というのがflutter特有
Wrap
グリッドレイアウトみたいなもの
表示領域が足りなくなったら、自動で改行入れてくれる。
縦方向、横方向をプロパティで選べる
Opacity
レイアウトを保ったままウィジェットを非表示にできる
透明度を指定できるので、重なっているウィジェットに重ねて表示できる
画像へのマスキングとかに使える（画像にサービス名が乗ってたりするヤツ）
FutureBuilder
async/awaitのウィジェット版
futureに渡したリソース（HTTPリソースなど）のコールバックで値を参照しながら画面描画できる
状態には、
ConnectionState.none/waiting/active/doneがある
入力部分に使うと、非同期でリビルドされるから画面がチラつくため、コイツは読み取り専用にしないといけない
FadeTransition
シンプルなフェードイン・フェードアウトを入れたい場合に使う
FloatingActionButton
画面右下の固定位置に表示するボタン
PageView
スワイプでページ切替する機能、縦横両方いける
メディア系以外でイマイチ使う場面が思いつかない
Table
スクロールする必要がないグリッドを作る
SliverAppBar
スクロールすると変化したり消えたりするアニメーションヘッダーを作るときに使う
（画像表示したり非表示にしたりするアレ）
SliverList & SliverGrid
リストとグリッドをまとめてスクロールさせる場合に使う
FadeInImage
ネットワーク越しに取って表示するイメージを表示されるまで、ローカルに置いてあるイメージで置き換えられるウィジェット
本体画像自体はフェードインされる
StreamBuilder
ストリームデータが流れてくるたびに設定した子要素をのウィジェットを再作成できる
InheritedModel
親データが変わったら、紐づいている子孫ノードのウィジェットをリビルドする
全部リビルドするのではなく、必要な場所だけをリビルドできるからコストが安い
ClipRRect
角丸にできる、荒くしたり色々調整できる
Hero
画面のフォーカスを中央に保ちながら画面遷移できる
一覧のアイコンをクリックしたら、それに対応する詳細画面を表示するとかそんなん。
CustomPaint
独自性を持たせるためのウィジェット
低レベルAPIが用意されてるから自分で何でもやる系。
デザインレベルの人は最終的にはここにいきつくのかなー？
Tooltip
ツールチップ
FittedBox
サイズを中のウィジェットの大きさに合わせてフィッティングするBox
LayoutBuilder
外観決定前にウィジェットのサイズを知りたいときに使う
外観決定前に知ることで、ウィジェットの配置方法を自分で制御できる
AbsorbPointer
サブツリー全体をタッチイベント無効にできる
on/off制御可能（2重送信防止可能）
Transform
回転させたり、動画透過で動かしてるように見せたり何か色々できる
BackdropFilter & ImageFilter
画像のぼかしに使う。
好きな場所をぼかせる
Align
コンテナ内で配置調整する
Positioned
Stackウィジェット内でのウィジェットのポジションを整える
AnimatedBuilder
アニメーションを作成するときの基本系ぽい
Dismissible
リスト項目を左右どちらかの方向にスワイプして消すために使う
垂直方向でも消せる
directionプロパティでスワイプ可能な方向を指定できる
confirmDismissでキャンセルできる(Future<bool>.sync(function)で確認ダイアログとか出して選ばせることも可能)
code:dismissible.dart
direction: DismissDirection.endToStart,
confirmDismiss: (DismissDirection direction) {
return Future<bool>.sync(() => direction == DismissDirection.endToStart);
},
onDismissed: (DismissDirection direction) {
setState(() {
entities.removeAt(i);
});
},
SizedBox
正確なサイズに設定できる
領域を埋めたりできる
ValueListenableBuilder
特定のデータに依存しているウィジェットのUIをリビルドするときに使う。
ValueNotifierと組み合わせる。
データが変わって、valueNotifierを呼ぶことでリスナーが反応して画面を再描画させれる
Draggable
ドラッグするやつ
DraggTargetと組み合わせると、意図したところに置かれたときにイベント発火で処理できる
逆に離れたときにもイベント発火させて処理できる
AnimatedList
リストの追加・削除をアニメ―トする
Flexible
Column（多分Rowも）に指定したウィジェットのflexの合計を分割して画面に表示するのに使う
MediaQuery
色んな画面サイズに基づいてアプリのUIレイアウトを調整できる
タブレット向けとかスマホ向けとか切り替えるのに使えることの模様
画面サイズが大幅に異なれば使いたいと思うかも。
Spacer
ウィジェット間のスペースの取り方を決める
InheritedWidget
子ウィジェットが親ウィジェットのデータにアクセスできるようになる。
ウィジェット間でデータをやり取りする手間を省く。
直接アクセスするんじゃなくて、notifier経由で更新データを受け取る格好らしい
AnimatedIcon
flutterが用意しているアニメーション付きアイコン
AspectRatio
アスペクト比を決定する
Expand, Expand - Alignと組み合わせるといいかも
LimitedBox
ColumとかRowみたいに親にサイズ制限されないウィジェットにデフォルトのサイズ制限を与える場合に使う
Placeholder
複数のウィジェットを組み合わせて画面を作りたくても、何からはじめたら良いか判らないときに、
レイアウト用に使うらしい。
あんま使わないかも
RichText
Textに（一部赤くしたりとか）スタイルを当てれるヤツ
ReorderableListView
ListViewでできない項目の移動をするのに使う
AnimatedSwitcher
複数のウィジェットの切り替えをオサレに切り替える
AnimatedPositioned
与えた位置が変わると、自動的に子の位置を指定された間隔で移行します。方向に関するプロパティが実装されるので、
ウィジェットをアニメーションの一部として拡張したり縮小したりできます
⇒使い道が全くイメージできてない
AnimatedPadding
ウィジェット間のパディングを動的に行う場合に、アニメーションを付ける
IndexedStack
一つの子だけを表示するけど、与えている全部のウィジェットのステートを保持する
入力 -> 確認画面で一緒にしとくとかかな。
CheckboxListTile
ListViewにチェックボックス付き要素を配置するときに割と最適。
選択できない要素については、onChangedプロパティをnullにセットすることで、見栄えがdisableになる
Semantic
子ウィジェットに意味を持たせる
readonlyとかenable/disableなど50プロパティを駆使して色々制御可能な模様
ConstrainBox
サイズを調整可能なBox
最大・最小を設定してカスタマイズ可能
Stack
ウィジェットを重ねるときに使う
IndexedStackで画面切り替えづらいから、これ使ってアニメーション組み合わせてやった方が楽だった
AnimatedOpacity
AnimationController + Opacityでやることを１つのWidgetでできる
FractionallySizedBox
比率で大きさを指定できる。
画面の比率は勿論そうだけど、親のWidgetのサイズでもイケそー
OrientationBuilder
向きの変更時にウィジェットをリビルドするときに使うBuilder
Container
装飾目的でOK
サイズはデフォルトでchildと同じになる
SelectableText
選択可能なテキスト
SelectableText.rich()でリッチテキストにもできる
DataTable
一覧表示するテーブル
ソートとかできる
渡すのはWidgetだから、何でも入れれはする
Slider
スライダーバー
ステップ指定可
AlertDialog
確認ダイアログ
ダイアログの外をタップして閉じるプロパティある(barrierDismissible)
AnimatedCrossFade
２つのWidgetをFadeで入れ替えることができる
登録 -> 完了をFadeで入れ替えるときに使うと良いかもしれない
DraggableScrollableSheet
画面内の一部にドラッグ可能なウィジェットを追加するときに使う。
"全体じゃなくて一部"
ColorFiltered
childに指定したウィジェットに（半透明などの）色を載せられるウィジェット
同じ画像でも、色を合わせることで雰囲気を変えられる
ToggleButtons
トグルボタン
状態をControllerで書き換えて貰える
Cupertinoct
iOS向けのアクションシート
今のところ使わない
TweenAnimationBuilder
アニメーション、割とよく使う
Image
イメージの読込み、ネットワーク越しでもいける
ネットワークから読み込む場合は、プログレスもこのウィジェットで表示可能
ネットワーク越しの場合はキャッシュしてくれる
加工とか、色の変更も可
DefaultTabController & TabBar
タブとその制御に使う
普通のタブ
Drawer
Scaffoldのdrawerに設定する、画面遷移用のメニューウィジェット
ハンバーガーメニューでよく見るヤツ
SnackBar
画面下に出すショートメッセージ
Scaffold.ofでどこからでもScaffoldを参照して表示可能
ListWheelScrollView
ListViewと機能的には同じだが、スクロール時に平面ではなく、輪を描くようにスクロールさせれるお手軽なウィジェット
ShaderMask
配下のWidgetにグラデーションをかけたり、文字の色だけ変えたりできる
Builder
親Widgetの参照を取りたいときにラップすると良いWidget
今までは、FueatureBuilderとかで誤魔化してたけど、これ使えばそういうトリックは不要になりそう