Flutter Widget of the Weekを見たメモ
最近暇なときにFlutterを勉強してるんですが、これできないかなーと思って検索するとだいたいやりたいことができるWidgetがヒットするのですごい。このまま一生検索し続けてもいいが、事前に浅くても網羅的に知っておいた方が楽そうなので、Flutter Widget of the Weekというyoutubeを見ながらWidgetの概要ををメモしていく。
SafeArea
ノッチとかにかからない安全な領域にchildを閉じ込めてくれる。Safeにする方向を指定できるんですね...。
Wrap
行をはみ出さないようにいい感じに改行しつつ並べてくれるやつ。chipとかを並べるのに便利らしい。
AnimatedContainer
色とかborder、形みたいなContainerの見た目を変化させた時にinterpolateして自然なアニメーションにしてくれる。
Opacity
透明度を決めるWidget。要素を消したときに隙間を埋めたくないとき、単に消すのではなくOpacityを0にするという風にも使える。AnimatedOpacityというのを使えばこれも自然なアニメーションになる。
FutureBuilder
Futureの状態を見てViewを組み立ててくれる。Loadingアイコンを表示したいときとかに自前で処理を書かなくてもFutureごとこいつに渡すといい感じで表示してくれる。
FloatingActionButton
例のボタン。floatingActionButtonLocationというプロパティで位置を調整できる。
PageView
swipeでページを切り替えることができる。Navigatorで遷移するやつの子のレイヤーの遷移なのかな？
Table
Gridviewみたいなものだけど、スクロールはできない && より細かくレイアウトが指定できる。
SliverAppBar
スクロール位置によって表示/非表示や高さが変わるAppBarかな？CustomScrollViewというやつと一緒に使うみたい。楽しそうなので使ってみたい。
SilverList/SilverList
複数のListView/GridViewを一緒にスクロールさせることができる？遅延読み込みができるのでリストの要素が大量にあるときにも便利。
FadeInImage
ネットワークから画像を表示するときに、placeholderを表示するのに使える。
StreamBuilder
FutureBuilderのStream版かな。streamを渡しておくと決まり切った記述だけでいい感じにviewにしてくれる。ネットワークの状態とかも見られる。
InheritedModel
Providerと同じことを自分でやりたいときに使うと良いのかな？親に状態を持たせておいて子がそれを購読しているとき、子を再ビルドするかを細かい粒度で指定できる。
ClipRRect
render treeに差し込むことで子のborderRadiusを指定できる。ちなみに、同じようなことを他の形でやるClipPathやClipOvalというWidgetもある。
Hero
routes間の遷移で２つのWidgetを紐づけておくとアニメーションでいい感じにしてくれる。
CustomPaint
低レベルなWidget。独自の見た目/動きを持ったWidgetを使いたいときにこいつをextendsして使う。
Tooltip
Widgetをタップしたときに吹き出しをpopupしてくれる...だけでなく、読み上げとかにも対応しているのでアクセシビリティの観点からも良い。
FittedBox
あるWidgetを別のWidgetにfitさせたいときに使う。fitのさせ方は色々選べる。
LayoutBuilder
デバイスの大きさ/向きによって表示するWidgetを出し分けたいときに使うのかな？
AbsorbPointer
すべての配下のWidgetについてタッチを無効にする。
Transform
いろいろなWidgetの形を変えたり、移動させたり、角度を変えたりできる。こいつを使うと3Dっぽいやつも含めていい感じのアニメーションが作れそう。
BackdropFilter
ImageFilterを適用するためのWidget。ぼかしたり歪ませたりなどの画像の加工ができる。Stackと合わせて使う（他のWidgetの上にかぶせる）と良い。
Align
Widgetの配置を決めるやつ。Centerのカスタムできる版みたいな感じ。
Positioned
Stackの中でWidgetの配置を細かく決めたいときに使う。top/bottom/left/right/height/widthがプロパティにあってcssのように位置が指定できる。
AnimatedBuilder
アニメーションを行う方法の１つ。animationとchildを渡すとアニメーションしてくれる。
Dissmissible
リストの要素を横にswipeして消すときに使えるやつ。方向を指定できるのでswipeの方向の左/右によって操作を変えることも可能。
SizedBox
Widgetを特定のサイズにしたいときに使う。SizedBox.expandを使うと可能な限り大きくなるWidgetを作れる。２つのWidget間に決まったスペースを作りたい場合にPadding/Marginではなく空のSizedBoxを置くこともある。
Draggable
ドラッグ＆ドロップの実装に使う。ドロップ先にはDragTargetを置いておく。ドロップ時に何が起こるかはDragTarget側に指定する。
AnimatedList
リストの要素を削除したり編集したりするとき、急に表示が変わると何が起こったのかわからないことがある。AnimatedListにanimationを渡すことでいい感じにしてくれる。
Flexible
flex値を指定しておくと親の大きさに合わせていい感じにスペースを占有してくれる。Expandedとの違いは、余白を完全に埋めないことができることらしい。
flutterで均等にwidgetを並べる｜Captain_PAG｜note
MediaQuery
デバイスに関する情報を取得してくれる。画面サイズや文字サイズ、アニメーションを有効化してるかなど。
Spacer
Row/Columnの要素の間に差し込むことで並び方をカスタムできる。flexプロパティを指定できる。
AnimatedIcon
animationを渡すことでiconをアニメーションで変化させることができる。
AspectRatio
Widgetを特定のアスペクト比で表示したいときに使う。Expandedのchildとして使うとうまく動かないが、間にAlignを挟むことでちゃんとアスペクト比が保たれるようになる。
LimitedBox
Containerのように親がサイズを指定するWidgetは、子のサイズを指定しないWidgetの子になるとうまく動かない。このときにLimitedBoxを使ってサイズの最大値を指定しておくと良い。親がサイズを指定してきた場合にはLimitedBoxは何もしない。
Placeholder
placeholderです。何も指定しなければ可能な限り余白を埋める。
RichText
１行のテキストの中でTextStyleを変えたいときにはRichTextのchildをTextSpanにするとできる。文中にリンクを差し込みたいときとかにも使える。
ReorderableListView
ドラッグ＆ドロップで要素の順番を変えることができるリスト。
AnimatedSwitcher
あるWidgetを別のWidgetに置き換えたいときに使う。例えばAnimatedSwitcherのchildを変数にしておいて、setStateでchildに代入すればFadeアニメーションでWidgetを入れ替えてくれる。遷移のアニメーションは好きなようにカスタムできる。
AnimatedPositioned
paddingをアニメーションで変えることができる。curve/durationを指定して動きをカスタムできる。
IndexedStack
表示するWidgetを切り替えたいときに使う。切り替えたときに状態を保存しておいてくれる。タブ切り替えとかに使うのかな？
Semantics
Widgetにメタ情報を足すためのWidget。足した情報はアクセシビリティツールや検索エンジンが使う。
ConstrainedBox
Widgetのサイズの最大値や最小値を決める。
AnimatedOpacity
WidgetをFade in/Fade outさせることができる。これを使ったより高レベルなWidgetにFadeTransitionがある
FractionallySizedBox
サイズを親Widgetに対する割合で指定することができる。
DataTable
いい感じの表を作れる。項目でソートできたりする。
Slider
スライダーです。RangeSliderで両端をスライドさせて範囲を選べるようにできる。
AlertDialog
alertです。警告を表示するだけでも良いし、ユーザアクションを取らせることもできる。showDialogで描画する。iOS風にしたければCupertinoAlertDialogを使う。
DefaultTabController & TabBar
タブ切り替えを作れるやつ。
