フラミナル

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

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

自分の振り返り用。

リンクは youtube に飛びます。

機能名 コメント 一枚画像(https://www.youtube.com/watch?v=JSqUZFkRLr8&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
Animate さまざまなアニメーションを設定できる。flutter_animate パッケージを入れると使うことができる
Autocomplete 指定した入力に対して、ルールに応じたsuggestionを出すことができる。実際の動作を見るなら Flutter Autocomplete Widget - YouTube がおすすめ
Badge ウィジェットにバッジを付与できる
Baseline 親に対する子ウィジェットの配置を制御する、具体的には親ウィジェットの上からいくつ下に子ウィジェットの最後がくるかを指定する。
CallbackShortcuts キーボードショートカットを作れる。Shortcuts よりシンプルだが簡単に使える。
DropDownButton ドロップダウン形式のセレクトボックス
DropDownMenu ドロップダウン形式。選択時のコールバックが取得できるのでなんでもできる。またメニューの検索やフィルタリングもオプションで選択可能
Draggable ドラッグの開始位置、ドラッグをするもの、ドラッグの目的地、ドラッグをしたことによる恩恵などを一括で管理できる
FaIcon FontAwesomeのアイコンを使うためのウィジェット
ExpansionPanel タップでパネルが展開されるウィジェット
Flow 複数の子ウィジェットのアニメーションを一括管理できるウィジェット
FlutterLogo FlutterLogoを表示するためのウィジェット
FocusableActionDetector Actions, Shortcuts, Focus, MouseRegion の機能がすべて入ったウィジェット、これを使わずにそれぞれのウィジェットを使う場合は親子関係を意識しないと正しく動かないものができる。
FutureBuilder Futureを使いつつウィジェットを使用する時に使えるウィジェット。Future呼び出し中や、呼び出し後の処理を規定して表現できる
Gap 親ウィジェットの主軸方向に指定の隙間をあける。height / width を指定しなくていいのが楽。Padding のように wrap するものでもないので見た目が綺麗。overflow をきにするなら MaxGap もある
GestureDetector デバイス上の操作を取得しコールバックを仕込めるウィジェット
Hero とあるページから別のページに遷移するときに同じ画像を表示させ続けるようにする遷移を実現させるためのもの
HeroMode Hero を使っているが特定のタイミングでは動かしたくないなどHeroの制御を行うウィジェット
Home Widget Android/iPhone のホーム画面にある簡素なアプリ画面(プラットフォーム側の用語でウィジェットという)の作成はプラットフォーム側で行う必要があるが、そこが参照するローカルストレージのデータを更新するためのウィジェット
Line Chart fl_chart の一部。棒グラフを作成できる
LinerGradient 色を複数選択してグラデーションを作ることができる。グラデーションの比率を変えたり、斜めにグラデーションすることも可能。ShaderMask を使うと文字に対してグラデーションもできる
MouseRegion マウスクリックやウィジェットの中に入った・出たを検知するためのウィジェット
NavigationBar 画面の下にある複数のアイコンを包含したナビゲーションのバー。 BottomNavigationBarとの違いは、NavigationBar は Material3 Design に準拠していること。具体的にはボタンをタップした時に背景色がつくとか。
NavigationRail 画面の横に設置できるナビゲーションバー。
OverlayPortal 親ウィジェットの相対位置を指定してウィジェットを配置できる。Overlay / OverlayEntry との違いはツリー構造で、こっちのほうは一直線のツリー構造をつくるので親の参照が簡単。一方でOverlay / OverlayEntryOverlay に対して複数の子を指定する関係で参照性が悪い
PhysicalModel ウィジェットの下に新しいウィジェットを作成しそれが陰影などを提供する
Pi Chart fl_chart の一部。円形のグラフを作成できる
RatingBar レーティングバーが作成できる。flutter_rating_bar パッケージ付属
RawMagnifier 拡大鏡が作成できる。デザインも MagnifierDecoration で変更可能
RefreshIndicator スクロール可能なビューをラップして使うウィジェット、実行時に関数をトリガーしその完了までローディングを表示できる
RepaintBoundary Flutter のウィジェットは部分レイヤーを更新する時に全体のレイヤーを更新してしまうことがあるが、RepaintBoundary を用いると自身のレイヤーに子ウィジェットを分離することでこの挙動を防ぎ、再描画コストを減らすことができる。スクロール可能なリスト、アニメーションが含まれるウィジェット、または頻繁に更新されるコンテンツの周りなど、明確に再描画が多く発生する場所で使うのがおすすめ。
RotatedBox ウィジェットを回転できる。見た目は回転しているが、レイアウトには影響しないようにもできる
ScaffoldMessenger Scaffold の親ウィジェットとして使用し、配下のScaffold は親から SnackBar イベントをサブスクライブする。これによりページ遷移をしても SnackBar を表示し続けることが可能になる。
ScrollBar スクロール可能なウィジェットにスクロールバーを追加する
StatefulBuilder StatefullWidget のうち、部分的に再描画をしたくない際に使用できるウィジェット。setStateの参照範囲が StatefulBuilder に限定されるため再描画を防ぐことができる
TabPageSelector 要素をならべてスイッチするときの灰色の小さい丸を作成できる
TextStyle テキストの装飾。テーマからの継承も行われる。もし変えても変に変わっている場合は Scaffold を使っていない可能性あり。