フラミナル

考え方や調べたことを書き殴ります。IT技術系記事多め

【更新中】Flutter の Widget of the Week をすべてはっていく

自分の振り返り用。

リンクは youtube に飛びます。

機能名 コメント 一枚画像(https://www.youtube.com/watch?v=JSqUZFkRLr8&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
AboutDialog ダイアログを表示する
AbsorbPointer ウィジェットへの入力を無効にする
AlertDialog さまざまなアニメーションを設定できる。flutter_animate パッケージを入れると使うことができる
Align 親ウィジェット中の指定した場所に子ウィジェットを配置できます
Animate さまざまなアニメーションを設定できる
AnimatedBuilder さまざまなアニメーションを設定できる。flutter_animate パッケージを入れると使うことができる
AnimatedCrossFade 画像やウィジェットを入れ替える際にフェード効果をいれるもの
AnimatedList リストの中の要素にアニメーションを仕掛けられるウィジェット
AnimatedIcon アニメーションできるアイコンを設置できるウィジェット
AnimatedOpacity 可視性を変えるためのアニメーション
AnimatedPadding Paddingのアニメーション
AnimatedPositioned Positionのアニメーション
AnimatedSwitcher 二つのウィジェットを行き来するアニメーション
AnimatedWidget 抽象クラス。独自のアニメーションを作りたい時に利用する。
AspectRatio アスペクト比を設定できるウィジェット
Autocomplete 指定した入力に対して、ルールに応じたsuggestionを出すことができる。実際の動作を見るなら Flutter Autocomplete Widget - YouTube がおすすめ
BackdropFilter 画像にエフェクトをかける
Badge ウィジェットにバッジを付与できる
Baseline 親に対する子ウィジェットの配置を制御する、具体的には親ウィジェットの上からいくつ下に子ウィジェットの最後がくるかを指定する。
Build 親のcontext を子から参照したいときにシンプルにかけるようになるウィジェット
CallbackShortcuts キーボードショートカットを作れる。Shortcuts よりシンプルだが簡単に使える。
ClipPath ウィジェエトを好きな形に変形するためのウィジェット
CheckboxListTile チェックリスト+タイルのウィジェット、どこをタップしてもセレクトボックスの入力・解除ができる
CircularProgressIndicator ローディングなどにつかうインジケーターのうち円形のものが作成できる
ClipOval 画像を丸く切り抜けるウィジェット
ClipRRect 画像の角を切り取って丸くするウィジェット
ColorFiltered ウィジェットにカラーフィルターを適用する
ConstrainedBox ウィジェットのサイズ調整や制約を与えるためのウィジェット
Container 背景の色や形、サイズ制限のようなスタイリングをしたい時に使う基本的なウィジェット
CupertinoActionSheet ios 向けのスライドインするアクションリスト
CupertinoActivityIndicator 読み込み中のローディングアイコンを表示できる
CustomPaint ウィジェットのデザインを低レベルから調整できる
DataTable スワイプでリスト項目を削除するウィジェット
Dismissible 水平線を引くウィジェット
Divider 水平線を引くウィジェット
DropDownButton ドロップダウン形式のセレクトボックス
DropDownMenu ドロップダウン形式。選択時のコールバックが取得できるのでなんでもできる。またメニューの検索やフィルタリングもオプションで選択可能
Draggable ドラッグの開始位置、ドラッグをするもの、ドラッグの目的地、ドラッグをしたことによる恩恵などを一括で管理できる
DraggableScrollableSheet ウィジェット内でスクロール可能なウィジェットを作る
Drawer ドロワーを表示できるウィジェット
ExpansionPanel タップでパネルが展開されるウィジェット
FaIcon FontAwesomeのアイコンを使うためのウィジェット
FittedBox スペースの制約や箱のレイアウトを管理する
FadeInImage ネットワーク越しの画像の取得時などに、ローディング+フェード効果をつけるウィジェット
Flexible 親ウィジェットに対して自分の方が大きければ自信を限界まで拡大する
Flow 複数の子ウィジェットのアニメーションを一括管理できるウィジェット
FlutterLogo FlutterLogoを表示するためのウィジェット
FocusableActionDetector Actions, Shortcuts, Focus, MouseRegion の機能がすべて入ったウィジェット、これを使わずにそれぞれのウィジェットを使う場合は親子関係を意識しないと正しく動かないものができる。
FractionallySizedBox %指定での SizedBox が作れる
FutureBuilder Futureを使いつつウィジェットを使用する時に使えるウィジェット。Future呼び出し中や、呼び出し後の処理を規定して表現できる
Gap 親ウィジェットの主軸方向に指定の隙間をあける。height / width を指定しなくていいのが楽。Padding のように wrap するものでもないので見た目が綺麗。overflow をきにするなら MaxGap もある
GestureDetector デバイス上の操作を取得しコールバックを仕込めるウィジェット
GridView グリッドを作成できるウィジェット
Hero とあるページから別のページに遷移するときに同じ画像を表示させ続けるようにする遷移を実現させるためのもの
HeroMode Hero を使っているが特定のタイミングでは動かしたくないなどHeroの制御を行うウィジェット
Home Widget Android/iPhone のホーム画面にある簡素なアプリ画面(プラットフォーム側の用語でウィジェットという)の作成はプラットフォーム側で行う必要があるが、そこが参照するローカルストレージのデータを更新するためのウィジェット
LayoutBuilder 外観の最終決定前にウィジェットのサイズを知れる
LinearProgressIndicator ローディングなどにつかうインジケーターのうち線形のものが作成できる
LimitedBox 親ウィジェットによるconstraintがないときに、子ウィジェットにconstraintを付与できる
ListTile マテリアルデザインに従ったリストを作りたい時に使うウィジェット
ListView スクロール可能なリストを作る時につかうウィジェット。横向き方向のスクロールもつくれる。
ListWheelScrollView ドラムロールのようなリストをつくれるウィジェット
IgnorePointer このウィジェットで覆ったところはタッチ動作を無視するようになる。画面遷移時にこれまでタップしていたけど、続いてタップさせたくない時などに利用できる
Image 画像を表示するウィジェット
ImageFiltered 画像に対してブラーや画像変換処理を行える。BackdropFilterの場合は子以降のすべてのウィジェットにフィルターを適用できるがやや非効率的なので、可能な限りImageFilteredを使う方が良い
IndexedStack 画面の切り変えを簡単にしつつ、各ウィジェットのステートも保持できるウィジェット
InheritedModel InheritedWidgetを拡張したもので、特定の部分データの変更に対してのみウィジェットツリーの特定部分をリビルドすることができる
InheritedWidget パラメータを子階層に渡すのをシンプルにするためのウィジェット
InteractiveViewer 画面サイズを超える大きさのウィジェットを画面サイズに収めつつ、ユーザに対して拡大縮小やパン機能を提供する
IIsolates Flutterでマルチスレットを実現する
Line Chart fl_chart の一部。棒グラフを作成できる
LinerGradient 色を複数選択してグラデーションを作ることができる。グラデーションの比率を変えたり、斜めにグラデーションすることも可能。ShaderMask を使うと文字に対してグラデーションもできる
MediaQuery 端末のサイズにあわせた描画をするためのウィジェット。LayoutBuilder はこれの簡素版。
MouseRegion マウスクリックやウィジェットの中に入った・出たを検知するためのウィジェット
NavigationBar 画面の下にある複数のアイコンを包含したナビゲーションのバー。 BottomNavigationBarとの違いは、NavigationBar は Material3 Design に準拠していること。具体的にはボタンをタップした時に背景色がつくとか。
NavigationRail 画面の横に設置できるナビゲーションバー。
NotificationListener ListView などのスクロール可能なウィジェットが発行する ScrollNotifications のようなイベントをキャッチし処理するためのウィジェット
OverlayPortal 親ウィジェットの相対位置を指定してウィジェットを配置できる。Overlay / OverlayEntry との違いはツリー構造で、こっちのほうは一直線のツリー構造をつくるので親の参照が簡単。一方でOverlay / OverlayEntryOverlay に対して複数の子を指定する関係で参照性が悪い
Padding 余白を追加できる
PhysicalModel ウィジェットの下に新しいウィジェットを作成しそれが陰影などを提供する
Placeholder まだ作っていないところに暫定として設置するためのウィジェット
Pi Chart fl_chart の一部。円形のグラフを作成できる
Positioned Stack利用時に指定の場所にウィジェットを配置するためのウィジェット
RangeSlider 部分指定ができるスライダーのウィジェット
RatingBar レーティングバーが作成できる。flutter_rating_bar パッケージ付属
RawMagnifier 拡大鏡が作成できる。デザインも MagnifierDecoration で変更可能
ReorderableListView ユーザが並び替え可能なリストを作成
RefreshIndicator スクロール可能なビューをラップして使うウィジェット、実行時に関数をトリガーしその完了までローディングを表示できる
RepaintBoundary Flutter のウィジェットは部分レイヤーを更新する時に全体のレイヤーを更新してしまうことがあるが、RepaintBoundary を用いると自身のレイヤーに子ウィジェットを分離することでこの挙動を防ぎ、再描画コストを減らすことができる。スクロール可能なリスト、アニメーションが含まれるウィジェット、または頻繁に更新されるコンテンツの周りなど、明確に再描画が多く発生する場所で使うのがおすすめ。
RichText テキストごとに独自の効果を含ませることでリッチなテキスト表現を行うウィジェット
RotatedBox ウィジェットを回転できる。見た目は回転しているが、レイアウトには影響しないようにもできる
SegmentedButton 選択可能なメッセージにする
SelectableText セグメントボタンのウィジェット
Semantics ウィジェットにセマンティクス(機会が判読できる名前や役割)を付与できる
ShaderMask ウィジェットにシェーダーを付与できる。これにより様々な特殊な表現を行うことができるようになる。
SizedBox 指定のサイズのウィジェットを作成できる
ScaffoldMessenger Scaffold の親ウィジェットとして使用し、配下のScaffold は親から SnackBar イベントをサブスクライブする。これによりページ遷移をしても SnackBar を表示し続けることが可能になる。
ScrollBar スクロール可能なウィジェットにスクロールバーを追加する
Slider スライダーのウィジェット
SliverAppBar CustomScrollViewと一緒に使われるアプリケーションバーで、スクロールによって消したり、操作によって伸長させたりを簡単に実装できる。
SnackBar 通知を表示するためのバー
Spacer 配列内のウィジェットの間隔を自由に調整するウィジェット
Stack 要素を重ねて表示するためのウィジェット
StatefulBuilder StatefullWidget のうち、部分的に再描画をしたくない際に使用できるウィジェット。setStateの参照範囲が StatefulBuilder に限定されるため再描画を防ぐことができる
SteamBuilder ストリームデータからウィジェットを作成する
SwitchListTile トグルスイッチを作成できる
TabBar タブを作成するためのウィジェット
TabPageSelector 要素をならべてスイッチするときの灰色の小さい丸を作成できる
TextStyle テキストの装飾。テーマからの継承も行われる。もし変えても変に変わっている場合は Scaffold を使っていない可能性あり。
ToggleButtons トグル形式のボタン
Tooltip Tooltipでアイコンや画像を囲んで、Tooltipメッセージを添付することで、アクセシビリティを埋め込むことができる
Transform ウィジェットを回転させたり、変形させるウィジェット
Tween 値の範囲を補間してアニメーションを作成する
TweenAnimationBuilder カスタムアニメーションを生成するためのウィジェット
ValueListenableBuilder 値の変更を通知しUIを変更させるウィジェット