Flutterの記事を整理し本にしました
- 本稿の記事を含む様々な記事を体系的に整理し本にまとめました
- 今後はこちらを最新化するため、最新情報はこちらをご確認ください
- 10万文字を超える超大作になっています(笑)
どんな記事
-
Flutter of the Weekという動画リストがyoutubeにあり、Flutterのウィジェットを分かりやすく紹介しています。 - この動画リストの情報の整理とリンクのまとめになります。
補足
- スマホアプリを作成するクロスプラットフォームにGoogleが作成したFlutterというものがあるのですが、こちらはウィジェットというパーツ(ボタン、リスト、テーブル、アニメーションなどなど)を組み合わせて作ります。
- 自分が作りたいアプリに合ったウィジェットを探したり、ない場合はあるものを組み合わせて実現しなければなりません。
- つまり、たくさんの便利なウィジェットを効率的に知る方法が重要になります。
- ウィジェットについて検索していると、この動画がヒットすることも多いので、勉強も兼ねてどんな動画があるか全部見てみることにしました。
- 自分が思ったことを二言でまとめていますが、使ったことがないものもあり、動画をみた印象を勢いでどんどん書いているので、細かい部分は雰囲気で許してください
- 同じような役割を持ったウィジェットはほぼ同じこと書いているかもですｗ
- 二言では細かいニュアンスを伝えるのは無理がありますので
- 二言では細かいニュアンスを伝えるのは無理がありますので
- 同じような役割を持ったウィジェットはほぼ同じこと書いているかもですｗ
- 自分が思ったことを二言でまとめていますが、使ったことがないものもあり、動画をみた印象を勢いでどんどん書いているので、細かい部分は雰囲気で許してください
Flutter of the Weekのウィジェット一覧
| # | ウィジェット名 | 二言で | 動画 | Doc |
|---|---|---|---|---|
| #1 | Introduction | 1-2分で1つのWidgetを紹介するよ よく使う機能をソースとともに紹介するよ |
 |
- |
| #2 | SafeArea | これで囲めばはみ出さないようにしてくれるよ bodyの下に入れておくと画面がはみ出さないよ |
|
 |
| #3 | Expanded | 要素は拡張できるよ 子要素を複数じゃなくて、子を拡張することで作ると幅とかうまく調整できるよ |
|
|
| #4 | Wrap | Wrapするとはみ出さないよ 要素がはみ出したときに、縦横改行をしてうまく見せてくれるよ |
|
|
| #5 | AnimatedContainer | 状態が変わるときにアニメになるよ 色とか幅とか形とかいい感じに動くよ |
|
|
| #6 | Opacity | これはユーザに見えないよ 見えない処理やウィジェットを作りたいときに便利だよ |
|
|
| #7 | FutureBuilder | Flutterは常に非同期なので、これを使うと待ち時やデータ到着時の描画が簡単にできるよ | |
|
| #8 | FadeTransition | 簡単なアニメーションをさくっとつくれるよ statefullWidgetでcontrollerと一緒に使ってね |
|
|
| #9 | FloatingActionButton | Floatingなボタンを作れるよ ボトムメニューにかぶせたりもできるよ |
|
|
| #10 | PageView | PageViewとPageControllerを使うと、上下左右のスワイプで画面を切り替えれるよ | |
|
| #11 | Table | スクロールさせたくないGridはTableを使おう 細かい調節もできるけど、子要素を見ていい感じに表示するよ |
|
|
| #12 | SliverAppBar | スクロールさせたくない固定部分を作れるよ スクロール後に上部に出したりもできるよ |
|
|
| #13 | SliverList SliverGrid |
Sliverは部分スクロール領域のこと 複雑なスクロール効果を作れるよ |
|
|
| #14 | FadeInImage | 処理中などにプレースホルダを表示できるよ アニメーションにもできるよ |
|
|
| #15 | StreamBuilder | データストリームを扱えるよ イベントごとやsnapshotで画面を変えたりできるよ |
|
|
| #16 | InheritedModel | 遠い子孫が変わったときに依存関係があるところだけ再構成するよ 全部再構成するのが高コストなときに便利だよ |
|
|
| #17 | ClipRRect | ウィジェットの角を丸くするよ 他にもClipOvalやClipPathなどがあるよ |
|
|
| #18 | Hero | 2つの画面で同じアイコンを使うときに、アニメートしていい感じにつないでくれるよ 2つの画面で同じタグを付けてね |
|
|
| #19 | CustomPaint | 細かい線や図形を書くための定例レベルAPIだよ 高速だし細かい部分をかけて便利だよ |
|
|
| #20 | Tooltip | アイコンをタップや長押ししたときに文字や音声を出せるようになるよ アイコンが分かりづらかったり目の不自由な方のために配慮したUIって大事だよね |
|
|
| #21 | FittedBox | 親より子の方が大きことってあるよね そんなときは子供をどうはめるか教えてくれればいい感じに収めるよ |
|
|
| #22 | LayoutBuilder | ビルド前にサイズを知りたい？じゃぁレイアウトビルダーを呼び出せばいいよ こいつを元にビルドロジックを組んでね |
|
|
| #23 | AbsorbPointer | 1個ずつ入力を無効にするのは面倒なので、トップレベルでこいつをON/OFFすればまとめてガードできるよ |
|
|
| #24 | Transform | ウィジェットをナナメにしたり、サイズを変えたりできるよ 3Dっぽく奥行きやアニメーションをつければ最高にcoolだ |
|
|
| #25 | BackdropFilter | 画像をぼかしたりフィルターがかけれるよ 一部だけもOK |
|
|
| #26 | Align | 配置を細かく指定できるよ 右下/左上とかでもいいし、値で細かく書いてもいいよ |
|
|
| #27 | Positioned | 名前の通りstack内でのポジションを指定するよ 上下左右縦横で指定してね |
|
|
| #28 | AnimatedBuilder | これを使うと、ウィジェットにアニメーションを簡単に付けれるよ statefullウィジェットで使ってね |
|
|
| #29 | Dismissible | スワイプでリストからデータを消すことができるよ 左右スワイプはもちろんアニメートもできるよ |
|
|
| #30 | SizedBox | 縦横サイズを指定できて、infinityにすれば子要素の最大値になるよ 子要素なしで使うと余白を作れるよ |
|
|
| #31 | ValueListenableBuilder | 値をウィジェット毎に管理するのは大変だよね こいつで変化を検知して必要な部分を書き換えるようにしよう |
|
|
| #32 | Draggable | ドラッグでウィジェットを動かすときに使えるよ ドラッグ元、ドラッグ中、ドロップ先や各種イベントが準備されてるよ |
|
|
| #33 | AnimatedList | アニメーションのあるリストだよ 要素の追加や削除がわかりやすくなるよ |
|
|
| #34 | Flexible | 子供のサイズをいい感じにできるよ 親や細かく指定しなくてもサイズをfitさせられるよ |
|
|
| #35 | MediaQuery | デバイスの情報を拾えるよ タブレットとスマホでは見せ方を変えたいときもあるよね |
|
|
| #36 | Spacer | 隙間にもいろいろあるよね 値で指定してもいいけど、均等幅なども便利だよ |
|
|
| #37 | InheritedWidget | 共有データを何でもグローバルにするのは良くない 子ウィジェットが親のデータを参照することができるよ |
|
|
| #38 | AnimatedIcon | アイコンがいっぱい準備されているよ その中にはアニメーションのあるものだってあるよ |
|
|
| #39 | AspectRatio | サイズをアスペクト比で指定できるよ Expandedを使えば子要素が自分でサイズを決めれるよ |
|
|
| #40 | LimitedBox | 時には制限も必要だよね 親がいない時にはこいつで最大の大きさを決めればそれ以上はみ出さないよ |
|
|
| #41 | Placeholder | まだ作成中のときに、そのスペースを仮置するやつがいるよ サイズをしてして置いてね |
|
|
| #42 | RichText | 複雑なタイポグラフィを実現できるよ ベースの書式を設定し、個別のフォントで上書きできるよ |
|
|
| #43 | ReorderableListView | ユーザが並び替えられるリストだよ ヘッダも付けれる便利なリストだよ |
|
|
| #44 | AnimatedSwitcher | 複数のウィジェット間をおしゃれなアニメーションでつなぐよ LayoutBuilderと組み合わせるともっと便利 |
|
|
| #45 | AnimatedPositioned | ウィジェットのアニメーションをつけるよ 位置やサイズを動かせるよ |
|
|
| #46 | AnimatedPadding | パディングにだってアニメーションが付けれるよ 余白サイズやアニメーション時間を設定してね |
|
|
| #47 | IndexedStack | テレビのようにウィジェットを切り替えれるよ 最前面が表示され残りは裏でキープ!! |
|
|
| #48 | Semantics | ウィジェットに意味を足せるよ 検索エンジンや意味解析のツールに情報を伝えられるよ |
|
|
| #49 | ConstrainedBox | 子要素のサイズを微調整できるよ 最大最小サイズを指定できるのでテキストやボタンをうまく調節できるよ |
|
|
| #50 | Stack | ウィジェットを重ねるよ はみ出させたり、はみ出した分を切り取ったり、positionと組み合わせて調節したできるよ |
|
|
| #51 | AnimatedOpacity | 透明度をアニメーションするよ 使わないものを徐々に非表示にしたり、逆に見えないものを見えるようにできるよ |
|
|
| #52 | FractionallySizedBox | 相対的なサイズを調整するよ。画面や親の何%の大きさのウィジェットや余白を設定できるよ | |
|
| #53 | ListView | リストを表示するよ。縦向き/横向き、スクロールの許可/禁止、動的要素の表示など自由度が高い!! | |
|
| #54 | ListTile | リストの要素を簡単にリッチにできるよ 先頭や末尾のアイコンやタイトル、イベントもバッチリさ |
|
|
| #55 | Container | 万能な入れ物だよ 子供しかいないと見えないよ。色を付けたり位置をずらしたり、まとめたりと色々役立つよ |
|
|
| #56 | SelectableText | ユーザが選択できるテキストにできるよ 選択時のフォントやタップ時のコピーや全選択などができるよ |
|
|
| #57 | DataTable | 表を作れるよ 列と行のデータを定義してね。コールバックや編集もできるよ |
|
|
| #58 | Slider | 範囲から値を選ぶUIだよ。RangeSliderだと2つの値を取れるよ | |
|
| #59 | AlertDialog | ダイアログを作るよ 重要な判断をユーザにしてもらうときには必要だよね |
|
|
| #60 | AnimatedCrossFade | 2つのウィジェットをアニメーションで切り替えるよ サイズが違っていてもなめらかに変わっていくよ |
|
|
| #61 | DraggableScrollableSheet | ウィジェットの中でスクロールさせられるよ min/maxのウィジェットサイズも指定できるよ |
|
|
| #62 | ColorFiltered | 単純な塗りつぶし以外の色もほしいよね こいつで画像等にカラーフィルターをかけてカスタマイズしてね |
|
|
| #63 | ToggleButtons | 複数のアイコンやテキストのスイッチを作るよ 選択時やオンマウスで色を変えたりといろいろできるよ |
|
|
| #64 | CupertinoActionSheet | iOSユーザ向けのスライドインする選択肢を出すよ テキストやキャンセルなど単純なリスト以外もできるよ |
|
|
| #65 | TweenAnimationBuilder | 独自のアニメーションを作れるよ アニメーションが完了した時のイベントも準備しているよ |
|
|
| #66 | Image | 画像だよ URLはローカルもオンラインもできるし、画像の加工だって簡単 |
|
|
| #67 | TabBar | タブでウィジェトを切り替えれるよ タブコントローラーと一緒に使ってね |
|
|
| #68 | Drawer | 左右のスワイプでページ遷移をナビゲートできるよ ページのリストと一緒に使うと便利だよ |
|
|
| #69 | SnackBar | 短い文字を画面下に表示するよ scaffold.ofでラップすれば超簡単にでるよ |
|
|
| #70 | ListWheelScrollView | ListViewの進化版だよ 3Dの円柱を回っているようなListViewを作れるよ |
|
|
| #71 | ShaderMask | シェーダでグラデーションを作れるよ 画像やウィジェットやアイコンに炎のグラデーションを付けたりできるよ |
|
|
| #72 | NotificationListener | 通知を制御できるよ 通知のバブリングをキャッチしてコールバックしたり、止めたりできるよ |
|
|
| #73 | Builder | 親は子の事を知っているけど、子は親の情報を知らないよね builderはofメソッドを持つ親への参照を解決してくれるよ |
|
|
| #74 | ClipPath | #16のClipRRectの線バージョンだよ 応用すると切り絵みたいに複雑な図形もつくれるよ |
|
|
| #75 | CircularProgressIndicator LinearProgressIndicator |
作業時間の進捗を表す円形/線形のプログレスだよ 終了がわかっている確定型とわからない不確定型があるよ |
|
|
| #76 | Divider | 境界線だよ 色や幅やインデントを指定できけど、テーマで一括設定するのがオススメ! |
|
|
| #77 | IgnorePointer | タップをガードできるよ ユーザの誤操作防止で設定すればインタラクティブでなくなるよ |
|
|
| #78 | CupertinoActivityIndicator | Cupertino系の円形の読み込みインジケータだよ サイズやアニメーションをしてしてね。処理が終われば消えるよ |
|
|
| #79 | ClipOval | #16のClipRRectの円バージョンだよ 独自のClipperをクラスを作れば、細かく調整も効くよ |
|
|
| #80 | AnimatedWidget | 個別ウィジェットにアニメーションを付けるよ 準備されているXXTransitionで物足りないならこれで独自なものを作ろう |
|
|
| #81 | Padding | 大事な大事な余白だよ 上下左右やウィジェットのstart/endから余白を作れるよ |
|
|
| #82 | CheckboxListTile | チェックボックスとリストタイルを合体させたよ タイルのどこをクリックしてもチェックを切り替えれるよ |
|
|
| #83 | AboutDialog | タップやコールバックでダイアログ表示できるよ コンテキストに文字を入れてね。ちなみにライセンス表示は自動で作れるよ |
|
|
| #84 | Package:sqflite | DB(SQLLite)使いたいことはよくあるよね APIを通じたアクセスや生のSQL実行、トランザクションもサポートしているよ |
|
|
| #85 | SliverAppBar | SliverAppBarがバージョンアップしたよ ストレッチ機能で、スクロールが下まで行ったときにうまい具合に伸びてくれるよ |
|
|
| #86 | InteractiveViewer | デカイウィジェットをいい感じに収めるよ 拡大縮小やパンもできるよ |
|
|
| #87 | GridView | 縦横に並ぶグリッドを簡単に作れるよ 間隔を開けたりスクロールできたり、使い勝手は抜群 |
|
|
| #88 | SwitchListTile | ON/OFFのトグルスイッチを持ったリストを作れるよ 他にもチェックボックスリストやラジオリストなどもあるよ |
|
|
| #89 | Package:location | 緯度経度や速度などの位置情報を取得できるよ ユーザに許可を求めてサービスを有効かも簡単にできるよ |
|
|
| #90 | Package:Device_info | Flutterがどこで動いているか分かるよ プラットフォームの判別だけでなく詳細情報も拾えるよ |
|
|
| #91 | ImageFiltered | 簡単に画像の加工ができるよ 実は画像だけじゃなくてウィジェットに対しても掛けられるので便利 |
|
|
| #92 | PhysicalModel | 陰影を簡単につけられるよ 影の色や深度、方向などを自由に設定できるよ |
|
|
| #93 | Package:Animations | さりげなく美しいアニメーションを簡単に作れるよ デフォルトでもスマートだし、カスタマイズもできるよ |
|
|
| #94 | Package:flutter_slidable | スワイプでアイコン表示や機能の実現がイベントハンドラやジェスチャー検知よりも簡単にできるよ リストとの相性が良くてカスタマイズもできるよ |
|
|
| #95 | RotatedBox | ウィジェットを回転させられるよ transformと違ってレンダリングのみに影響を与えるよ |
|
|
- 以後は書籍の方で追加しております
最後に
- APIのドキュメントもしっかりしていますが、説明動画もこれだけあるというのはすごいですね。さすが天下のGoogle
- そして、こういうCoolな動画をサクッと作れるようになりたいなっという別の思いも出てきましたｗ
- 自分が一番このページをみるかもｗ
ちなみに、自分が使いたいと思ったもの
- 配置、サイズ系
- safeArea : はみ出さないように
- Align : 強引なレイアウトではなく、位置を自動調整しないと
- FractionallySizedBox : 相対で指定しないとすぐに崩れちゃうので
- ページ遷移
- pageView : Swipeで切り替えたい
- drawer : 左右スワイプでページ遷移
- ToggleButton : ページ切り替えをわかりやすく!!
- 処理待ち
- FadeInImage : 処理待ちは画像とかを出したい
- CircularProgressIndicator : 処理待ちは画像ではなくプログレスでも良いかな
- UI
- rangeSlider : 範囲を拾うのに良さそう
- ListView : 多目的なデータの並びに使えそう