flutter widget

[Flutter] widget逆引き集

目次 - 右のアイコンで折りたためます -

概要

FlutterのWidgetに関する技術を逆引き形式でまとめてみる。主に参考サイトにもある動画リストです。その他にも便利そうだなと思ったものを適宜追加しています。

目的

flutterのWidgetについて、そもそもどのような機能が用意されているのかまとめました。私もまだ勉強中ですので何があるのか知るためにも。

以下の点を留意してしてくれると助かります。(TODOとあるのは今後調査致します

info

自分がしたいことに対しての解決策(Widget)がわからない・見つからない方向け。

例:○○がしたい!/○○っていう機能ってあるかな

caution

具体的な実装方法が知りたい!という方はここでは解決しない可能性があります。

例:ListTileを使ってマテリアルアイコンを表示、サブテキストも表示したい!

逆引きの見方

逆引きの見方

逆引き

適切なコンテンツ領域を表示したい

SafeArea

SafeAreaで囲めば、iOS / Androidでも適切なコンテンツ領域に表示出来る。

MediaQueryを使って画面サイズを判定しているようです。(MediaQueryについてはこちら。)

要素を引き伸ばして隙間を埋めたい

Expanded

flex要素を指定して優先順位を付けることも出来る。

スペース不足になった

Wrap

スペースがなくなった場合改行してくれる

アニメーションしたい

AnimatedContainer

スペースがなくなった場合改行してくれる

他のレイアウトを保ちつつ領域を確保したい

Opacity

スペースがなくなった場合改行してくれる

データ読み込み時の状態を確認したい

FutureBuilder

コネクションのステートを確認しながら実装。

フェードイン、アウトしたい

FadeTransition

AnimationControllerも参考に。

画面右下にあるボタンを表示したい

FloatingActionButton(FAB)

モバイル版TwitterのツイートボタンやYahoo!さんなどのサービスで見られる下にスクロールした際に画面トップへスクロールするような挙動するためのボタン。

スワイプして画面間を切り替えたい

PageView

PageController、縦方向のにスクロールも可能。

表(テーブル)を表示したい

Table

スクロールがいらないウィジェットのグリッド。

リスト表示にて一番上が大きいリストを表示したい

SliverAppBar

CustomScrollViewも参考に。

ページ上部と下部をまとめてスクロールしたい

SliverList 、SliverGrid

複雑なスクロールを作成をするのに役立つ。リストとグリッドのスクロール。

画像のダウンロードを待つ間にプレイスホルダーを表示したい

FadeInImage

イベントの流れを取得したい(Firebase連携)

StreamBuilder

Firebase連携、snapshot。

ウィジェットツリー上部周辺の保存データへのアクセス

InheritedModel

深くネストされたウィジェットに伝達

四角い画像やコンテンツの角を丸くしたい

ClipRRect

2つの画面間のトランザクションを管理したい

Hero

管理したい両ページには同じタグを使用する必要がある。

線、長方形などの形を描画したい

CustomPaint

丸、アーチ、ビットマップ、段落テキストもできる。

アイコンに備考(補足)を付けたい

Tooltip

IconButtonも参考に。

ウィジェットが複数で1ボックス内に収めたい

FittedBox

外観決定前に画面サイズを知りたい

LayoutBuilder

ウィジェット全体をタッチイベントを無効にしたい

AbsorbPointer

ウィジェットのサブツリーが複雑で最上部これを配置すればOK。

あるボタンのみタッチイベントを無効にしたい場合は、各ウィジェットに指定する。

RaisedButton(

  color: Colors.blue,

  child: Text('Click me!'),

  onPressed: null,

)

アニメーションをしたい

Transform

バウンズ、3D、透視などが出来る。

画像の回転やモザイク(ぼかし)をかけたい

BackdropFilter

ぼかし、ImageFilter、Stack。

指定の場所にウィジェットを配置したい

Align

数値指定、Alignment、Stack。

ウィジェットのポジションを決めたい

Positioned

アニメーション(要素を回転)したい

AnimatedBuilder

0度から360度を時計回りで繰り返す動きをする。

おすすめ実装方法は、StatefulWidget中のビルド機能でコードをWarpしてウィジェットの状態を通してコントローラーを管理すること。との事。

スワイプでリスト項目を削除したい

Dismissible

ListView、secondaryBackgroundも参考に。

何も描画しない領域を埋めたい

SizedBox

PageController、縦方向のにスクロールも可能。

特定の値を複数のウィジェットに反映したい

ValueListenableBuilder、ValueNotifier

要素をドラッグをさせたい

Draggable

リストに対してアニメーションする

AnimatedList

要素を自動(フレキシブルに)調整したい

Flexible

ユーザーのデバイス情報、画面サイズを取得したい

MediaQuery

使用しているアプリの画面サイズやデバイスの向きを取得することができる。

スペースを配置したい

Spacer

インスタンスを生成するだけ。相対的にもできる。

ウィジェット間のデータ受け渡しを防ぎ集約したい

InheritedWidget

アニメーション付きアイコンを使いたい

AnimatedIcon

既にアニメーション付きアイコンが用意されている。アイコンの再生や逆再生も出来る。

アスペクト比を指定したい

AspectRatio

TODO

LimitedBox

使用しているアプリの画面サイズやデバイスの向きを取得することができる。

仮のUIコンポーネントを配置したい

Placeholder

仮のデザインを当てたい時に便利。

複数のスタイル(太文字、アンダーライン、イタリック)を組み合わせたい

RichText

リスト内のドラッグ&ドロップ

ReorderableListView

TODOアプリであるようなリストをドラッグ&ドロップをして配置を変えられるような動き。

ウィジェット間をアニメーションで表示切り替えしたい

AnimatedSwitcher

TODO

AnimatedPositioned

パディング間でアニメーションしたい

AnimatedPadding

ウィジェット間を入れ替われるようにしたい

IndexedStack

UIの部分を明示的に示したい

Semantics

デザインに合わせて幅や高さを微調整したい

ConstrainedBox

重複したウィジェットを使いたい

Stack

画像を徐々に消す、半透明化したい

AnimatedOpacity

薄く目立たなくすることも。FadeTransitionも参考に。

相対的なサイズや位置を指定したい

FractionallySizedBox

スクロール可能なリスト項目を表示したい

ListView

リスト項目を動的に作成したい場合は「ListView.builder」を使用する。

リストにアイコンやタイトルなどを表示したい

ListTile

背景の色や形をスタイリングしたい

Container

表示テキストを選択出来るようにしたい

SelectableText

使用しているアプリの画面サイズやデバイスの向きを取得することができる。

セル内容に応じた列サイズを自動調整したい

DataTable

ソート、行選択、編集可能セルも備わっている。収まらない場合はSingleChildScrollView。

スライダーを使いたい

Slider、RangeSlider、CupertinoSlider

iOSユーザーはCupertinoSliderを使用すると良い。

サンプルコードは、こちらを参照。

ダイアログを表示したい

AlertDialog

ユーザーに意思決定をさせたい、ユーザーに警告を出したい。

クロスフェードさせたい

AnimatedCrossFade

ウィジェット内ででスクロールしたい

DraggableScrollableSheet

ウィジェとの高さと横幅も指定出来る。

画像やウィジェットに色をつけたい

ColorFiltered

画像の色にフィルターをかけたい場合。

トグルボタンをつけたい

ToggleButtons

ボールドマークやセンタリングのようなボタン。背景の色、ボタンが押下時の挙動、マウスがフォーカスされた時のイベントも拾える。

下からスライドインするアクションリストを表示したい(iOSのみ)

CupertinoActionSheet

こちらは、iOS向けのウィジェットです。タイトルやメッセージ、キャンセルボタンも指定出来る。

TODO

TweenAnimationBuilder

画像を表示したい

Image

アセットから読み込む。端末の解像度により適切なバージョンのファイルを自動表示してくれる。また「pubspec.yaml」に記載する必要があり。

「Image.network()」を使えばネットワークからの画像も表示出来る。

ウィジェットをタブ整理したい

DefaultTabController、TabBar

ナビゲーション(左スワイプメニュー)を表示したい

Drawer

Scaffoldウィジェットで実装。

Drawer

サンプルコードは、こちらを参照。

アプリ下部にポップアップメッセージ(短いメッセージ)を表示したい

SnackBar

一時的に下部にメッセージを表示出来る。表示内容はテキスト出なくても良い。他のウィジェット(ボタンなど)でも良い。

3Dのようなリッチなリストビューを表示したい

ListWheelScrollView

ListWheelScrollView は ListViewの進化バージョン。通常は画面に収まらないたくさんのアイテムを閲覧と選択できるのがListView。

TODO

ShaderMask

通知を検知したい

NotificationListener

TODO

Builder

ウィジェットをユニークな形状にしたい

ClipPath

進捗状況(インジゲーター)を表示したい

CircularProgressIndicator、LinearProgressIndicator

確定型:進捗量を表す場合。( 30 / 100% の状況のように。)

不確定型:残り時間が確定していないく、処理が実行中であることを表したいとき。

境界線(水平線)を引きたい

Divider

ウィジェット間に線を引くことが出来る。線の色、太さ、余白などを指定出来る。

共通(統一)にしたい場合はMaterialApp 中の theme プロパティの diverThemeDataを使用すると良い。

アプリUIのユーザーのタップ操作を保護したい

IgnorePointer

円形の進捗状況(インジケーター)を表示したい

CupertinoActivityIndicator

マテリアルデザインのインジケータ。CircularProgressIndicator、LinearProgressIndicatorも参考に。

画像を円形や楕円形に切り取りたい

ClipOval

デフォルトで指定した画像のサイズになる。画像が横長の場合は横長の楕円形になり、正方形の場合は円形になる。

並べた要素を均等に並べたい

MainAxisAlignment.spaceAround(spaceBetween、spaceEvenly)

並べた要素に対して均等に余白を作成する。行、列どちらも設定可能。

・spaceAround

・spaceBetween

・spaceEvenly

サンプルコードは、こちらを参照。

写真などのボックス状(格子状)のレイアウトを配置したい

GridView

基本的に横に表示する数を指定する方法が一般的。リストビルダー(ListView.builder)と同じく動的に表示したいときは「GridView.builder」を使用する。

テキストボックスを作りたい

TextField

サンプルコードは、こちらを参照。

テキストボックス(アイコンやヒントテキスト付き)を作りたい

TextField、decoration

独自のアニメーションを実装したい

AnimatedWidget

AnimatedWidgetはWidgetという名前だが、具体的には抽象クラス。

SlideTransition、RotationTransition、FooTransitionなどのアニメーション効果以外の動作が良い場合使用すると良い。

リスト型のチェックボックスを実装したい

CheckboxListTile

CheckboxListTile

サンプルコードは、こちらを参照。

リスト型のラジオボタンを実装したい

RadioListTile

リスト型のスイッチ機能(切り替え・on/off)を実装したい

SwitchListTile

画面遷移したい

Navigator

画面遷移の方法は2つある。1つ目は事前に遷移先を決めておく方法。2つ目は必要に応じて遷移を登録する方法。

ユーザーのトリガー(ボタン押下など)で次の画面へ遷移したときに、前の画面に戻ることが出来ない遷移もすることが可能。

規約、バージョン番号、ライセンスを表示したい

AboutDialog

アプリケーションには規約、バージョン番号、ライセンスなど注意事項を記載する必要がある。記載がない場合はアプリを公開できない可能性があります。

showAboutDialog()機能を使ってダイアログを呼び出すイメージ。例えば、設定画面の一番下に「アプリの情報」をタップイベントにてダイアログを表示するといった使い方。

また、Flutterが提供するライセンス表示ボタンで現在使用しているFlutterパッケージのリストを表示してくれる機能もある。LicenseRegistryクラスを使用すると好みのライセンスを追加できる。

おわりに

今後こちらのページは随時更新する予定です。基本的にYouTubeの「今週のウィジェット」が更新されれば一緒に更新する予定です。

また画面キャプチャを載せられたらより直感的になると思うので検討中です。

参考サイト

-flutter, widget
-, , ,

Copyright© エンジニアが学んだことをアウトプットしていく , 2022 All Rights Reserved Powered by AFFINGER5.