FlutterFlow：Widget一覧

FlutterFlowにどんなWidgetが用意されているか確認しようと思い、公式ドキュメントを見たところ、英語記載で分かりづらかったので、簡単にまとめてみました。

公式の分類に従って「Layout Elements」「Base Elements」「Page Elements」「Form Elements」の4つに分けて整理しています。

Layout Elements
Base Elements
Page Elements
Form Elements
株式会社GenAiについて
1. 関連記事

Layout Elements

アプリのレイアウトを作成するために使用できるWidgetです。

Widget	説明の翻訳
	Containerは、多目的ボックスのような多目的ウィジェットです。これは、子ウィジェット (アプリのインターフェイス内の小さなコンポーネント) を装飾して配置する方法と考えることができます。これは画面を分割し、それらを配置およびスタイル設定するのに役立ちます。
	Rowは、子ウィジェットを水平に配置します。
	Columnは、子ウィジェットを垂直に配置します。
	Stackを使用すると、ウィジェットを互いに重ねて配置できます。机の上に置かれた書類の山のようなもので、それぞれの書類がウィジェットであると考えてください。上の紙ははっきりと見え、その下の紙は部分的または完全に覆われています。
	Cardは、 3D効果のための丸い角とわずかな影を備えたボックス内にいくつかの関連情報を表すために使用されます。たとえば、Cardウィジェットを使用して名刺やレストラン情報、映画の詳細などを表示できます。
	ListViewは、アイテムのリストを直線状 (垂直または水平) に配置して表示するための非常に便利なウィジェットです。 ListViewは、項目のリストが画面に収まらない場合に自動的にスクロールを提供するRow・Columnの高度なバージョンです。
	GridViewは、アイテムのリストをグリッドまたは 2 次元 (同時に垂直方向と水平方向) に表示するために使用されます。
	Spacerは、RowとColumnの子の間に柔軟な空のスペースを挿入するために使用されます。
	Dividerは、ウィジェットを視覚的に分離するために使用される水平線です。
	Vertical Dividerは、ウィジェットを視覚的に分離するために使用される垂直線です。
	TabBarには水平方向のタブの列が表示され、ユーザーはタブをタップしてさまざまなコンテンツビューを切り替えることができます。通常、各タブはコンテンツの異なるセクションまたはカテゴリを表します。
	PageViewは、スワイプ可能なページを作成するために使用されます。ページビューでは、複数の子ウィジェットを追加できます。各子ウィジェットは 1 ページとみなされ、水平または垂直にスクロールできます。
	Carouselは画像スライダーとも呼ばれ、一連の画像やコンテンツを水平形式、場合によっては垂直形式で表示するために使用される一般的なデザイン要素です。カルーセルスライダーの主な目的は、画像、製品の特徴、ニュース記事、紹介文などの複数の情報を限られた画面スペース内で紹介することです。
	Expandableは展開または折りたたんで、アイテムの詳細を表示または非表示にします。ヘッダー、折りたたみビュー、展開ビューで構成されます。 Expandableは通常、ListViewにデータを入力して「展開/折りたたみ」項目エントリを作成するために使用されます
	Wrapは、子を次々に表示するという点で、RowおよびColumnに似ています。アイテムを表示するのに十分なスペースがない場合、Wrapはアイテムを新しいRowまたはColumnに自動的に配置します。
	Formを使用すると、ユーザー入力を検証し、検証が失敗した場合にメッセージを表示できます。このウィジェットには、任意の数のフォームフィールドを含めることができます。フォームフィールドは、通常、TextFields、Dropdown、RadioButton、またはDate/Time pickerなどの入力フィールドです。
	StaggeredViewは、アイテムのリストを千鳥状のグリッド形式で表示します。
	FlippableCardは、「カードを反転するアニメーション」と呼ばれる視覚的なインタラクションを提供します。最初はカードの表面が表示され、タップすると裏面が表示されます
	SwipeableStackは、ユーザーが任意の方向にスワイプできるカードまたはコンテンツレイヤーをスタックするように設計されたウィジェットです。これは、Tinderなどの出会い系アプリでプロフィールの閲覧によく使用されます。
	DataTableは、データを表形式で表示するためのウィジェットです。スプレッドシートと同様に情報が行と列に編成され、大量のデータを読みやすく理解しやすくなります。

Base Elements

一般的なWidgetです。

Widget	説明の翻訳
	Textは、画面上にテキストを表示するために使用されます。
	RichTextは、単一の段落内に複数のスタイルと色でテキストを表示するために使用されます。色やフォントサイズの変更、アクションの追加など、テキストのさまざまなセクションを個別にカスタマイズできます。
	Imageには、アップロードされたアセットまたは URLリンクからの画像が表示されます。Imageは、JPEG、PNG、GIF、アニメーションGIF、WebP、アニメーションWebP、BMP、WBMP などの画像を表示できます。
	CircleImageは、アップロードされたアセットまたはURLリンクから円形の画像を表示するために使用されます。CircleImageは、JPEG、PNG、GIF、アニメーションGIF、WebP、アニメーションWebP、BMP、WBMPなどのさまざまなタイプの画像を表示できます。
	Iconは、小さなイメージや記号を表示するために使用されます。
	Buttonを使用すると、ユーザーはデータの保存、新しいページを開くなどのアクションを実行できます。
	IconButtonを使用すると、ユーザーは1回タップするだけでアクションを実行できます。通常のボタンウィジェットとは異なり、このウィジェットには、ボタンをクリックしたときに実行されるアクションを表す小さな画像または記号が表示されます。
	ListTileには、タイトル、サブタイトル、先頭のアイコン、および末尾のアイコンが含まれています。 ListTileは通常、ListViewを設定するために使用されます。
	SlidableListTileは、ユーザーがスワイプしたときにListTile上で実行できるアクションのリストを表示する特別なタイプのListTileです。
	VideoPlayerは、アップロードされたアセットまたはURLリンクからビデオを表示するために使用されます。VideoPlayerは、MP4、MOV、WAV、MPEG、JPEGモーションフォトなどを含むさまざまなビデオ形式を再生できます。
	YoutubePlayerは、Youtubeからビデオを再生するために使用されます。
	Calendarには、月と週の日が表示されます。 Calendarを使用して、イベントリストを日付でフィルタリングできます。
	Checkboxを使用すると、ユーザーはリストから複数のオプションを選択し、アプリ内の設定をオンまたはオフにすることができます。
	CheckboxListTileは、 CheckboxとListTileを組み合わせたものです。 CheckboxListTileの任意の場所をタップすると、Checkboxが切り替わります。
	Switchを使用すると、ユーザーはアプリの設定をオンまたはオフにできます。
	SwitchListTileは、 SwitchとListTileを組み合わせたものです。 SwitchListTile上の任意の場所をタップすると、Switchが切り替わります。
	ToggleIconを使用すると、ユーザーは2つの異なる状態を表す2つのアイコンを切り替えることができます。これを使用して、音楽のオン/オフ、アプリのテーマの変更、いいねなどの機能や設定を有効/無効にすることができます。
	AudioPlayerは、アップロードされたアセットまたはURLリンクからオーディオを再生します。
	WebViewを使用すると、Webサイトのコンテンツをアプリ内に直接表示できます。これは、ユーザーがWebページを表示するためにアプリを離れることを望まない場合に便利です。
	StaticMapには、mapboxからの地図の画像が表示されます。このウィジェットは、ズームイン、ズームアウト、地図スクロールなどの対話機能やコントロールを使用せずに地図上に場所を表示する場合に適しています。
	GoogleMapを使用すると、アプリ内に地図を表示し、ユーザーに地理情報とナビゲーション機能を提供できます。
	AdBannerは、アプリ内に広告バナーを表示するために使用されます。 AdBannerには、テキスト、画像、ビデオ広告などのその他のリッチメディアが表示されます。 AdBannerウィジェットは、Googleの広告ネットワークであるAdmobを使用します。
	LottieAnimationを使用すると、アップロードされたアセットまたはURLリンクからLottieファイルを表示できます。Lottieファイルは高品質（ピクセル化されていません）で、GIFよりも小さく、あらゆるプラットフォームに簡単に追加できます。
	Blurは、子ウィジェットまたは親ウィジェットをぼかすために使用されます。このウィジェットを使用して、iOSでよく見られるすりガラス効果を作成できます。
	Transformは、子ウィジェットに傾斜、回転、拡大縮小、移動（またはスライド）などのグラフィック変換を適用します。
	MediaDisplayは、URLリンクからの画像またはビデオを表示します。このウィジェットは、ListView（アクティビティフィードを表示するため）やGridViewなどのスクロール可能なウィジェット内で使用できます。
	RiveAnimationは、リアルタイムのインタラクティブなデザインおよびアニメーションツールです。RiveAnimationウィジェットを使用すると、RiveアセットをFlutterFlowに簡単にインポートし、アプリ内で使用できます。
	HtmlViewを使用すると、アプリ内のHTMLおよびCSSコンテンツを表示できます。テキストに特別な書式を設定したい場合に便利です。
	PdfViewerを使用すると、アップロードされたアセットまたはURLリンクからPDFファイルを表示できます。
	ProgressBarは、タスクの進行状況を表すために使用されます。 ProgressBarを使用して、ファイルのダウンロード/アップロード、今週の売上、費やした時間、総合スコアなどを表示するUIを構築できます。
	LanguageSelectorは、ユーザーがアプリの言語を設定できるようにするために使用されます。 LanguageSelectorには現在選択されている言語が表示され、タップするとサポートしているすべての言語のリストが開きます。
	Badgetは、注意が必要な項目の数を示します。通常、これはIconButtonなどの他のウィジェットの上に浮かぶ中くらいの大きさのドットです。
	Chartは、情報をグラフィック形式で表すために使用されます。これを使用すると、複雑な情報をわかりやすい形式で表示できます。
	MuxBroadcastを追加すると、ユーザーはイベントをリアルタイムで視聴できるようになります。 MuxBroadcastは、APIベースのビデオストリーミングサービスであるMuxを使用します。
	Timerには、残り時間または経過時間のカウントが表示されます。たとえば、期間限定オファーのカウントダウン、OTP再送信の残り時間、ランディングページなどを表示します。
	MouseRegionを使用すると、マウスポインターがウィジェットに出入りするたびに通知されます。これを使用して、ユーザーがボタンの上にマウスを置いたときにボタンをアニメーション化したり、ユーザーがメニューアイコンの上にマウスを置いたときにメニュー項目を表示または非表示にしたりするなど、UXを構築できます。
	Barcodeは、一連の線とパターン内に情報を埋め込むために使用されます。バーコード内のデータは、スキャナーマシン、 Googleレンズ(Android)、Apple カメラ(iOS)などのアプリ、またはFlutterFlowを使用して作成した独自のアプリを使用して簡単に再試行できます。
	DataTableは、データを表形式で表示するためのウィジェットです。スプレッドシートと同様に情報が行と列に編成され、大量のデータを読みやすく理解しやすくなります。
	Tooltipは、小さなポップアップボックスにウィジェットのテキストによる説明を提供します。ユーザーがウィジェットをタップまたは長押しするか、ウィジェットの上にマウスを置くと表示されます。通常、ウィジェットの機能について説明するために使用されます。
	ConditionalBuilderを使用すると、特定の条件に基づいてさまざまなウィジェットを動的に表示できます。このウィジェットを使用すると、さまざまな条件を定義でき、それぞれの条件がtrueの場合に表示される特定のウィジェットに関連付けられます。これは、アプリで何が起こっているかに応じて異なるものを表示するスイッチがあるようなものです。
	StickyHeaderは、スクロール可能なリストの上部を「貼り付ける」か、ビューポートの上部に表示されたままにし、残りのコンテンツをスクロールできるようにする特別なタイプのウィジェットです。ユーザーが下にスクロールしても、スティッキーヘッダーは上部に固定されたままとなり、一貫したコンテキストまたはナビゲーションキューを提供します。
	Markdownは、Markdown構文を使用してテキストを入力および表示するために使用されます。これにより、本格的なWYSIWYG（What You See Is What You Get）エディターの複雑さやHTMLコードの作成を必要とせずに、テキストを簡単にフォーマットできます。
	Draggableは、アプリ内の別の場所にドラッグアンドドロップできるウィジェットを作成するために使用されます。これにより、ユーザーはタッチジェスチャまたはマウスを使用して項目を移動することにより、アプリを操作できるようになります。
	DragTargetは、ドラッグされた項目をドロップできる場所を指定するために、Draggableと組み合わせて使用されます。Draggableによって運ばれるデータを受け入れることができる領域を作成します。

Page Elements

ページのレイアウトを作成するために使用できるWidgetです。

Widget	説明の翻訳
	AppBarは、通常、アプリ画面の上部に表示されるツールバーの一種です。これには、タイトル、ナビゲーションコントロール、および多くの場合はアクションボタンが含まれます。
	FloatingActionButton（FAB）は、画面上に浮かんでおり、アクションに関連付けられています。FABは円形で、画面の右下隅にあります。
	Drawerは、他のページへのナビゲーションを提供するために使用されます。左から右にスワイプするか、AppBarのメニューアイコンをクリックすると、画面の左側から開きます。Drawerの外側の任意の場所をクリックするか、左から右にスワイプすることで閉じることができます。
	EndDrawerは通常、他のページへのナビゲーションを提供するために使用されます。右から左にスワイプするか、AppBarのメニューアイコンをクリックすると、画面の右側から開きます。EndDrawerを閉じるには、EndDrawerの外側をクリックするか、左から右にスワイプします。

Form Elements

フォームの作成に使用できるWidgetです。

Widget	説明の翻訳
	TextFieldを使用すると、ユーザーはアプリにテキスト、数字、記号を入力できます。TextFieldを使用して、フォームの作成、メッセージ、ダイアログの送信、検索などを行うことができます。
	DropDownを使用すると、ユーザーはオプションのリストから選択できます。表示する項目のセットと、現在の選択を示す初期値が必要です。ユーザーがドロップダウンリストから項目を選択すると、選択した項目を反映するように値が更新されます。
	RadioButtonは、ユーザーが複数の選択肢から1つのオプションを選択できるようにするために使用されます。
	PinCodeを使用すると、PINまたはOTPを入力できます。このウィジェットを使用して、フィンテックアプリで支払いを行う前にユーザーIDまたはトランザクションを確認できます。
	Sliderは、値の範囲から1つの値を選択するために使用されます。スライダーの最小値と最大値を定義すると、ユーザーはスライダーのつまみ（スライド円）をドラッグすることで、指定された範囲内の値を選択できます。
	RatingBarは、評価を表示したり、ユーザーから評価を収集したりするために使用されます。
	CreditCardFormを使用すると、ユーザーはカード番号、有効期限、CVVなどのクレジットカードの詳細を入力できます。 Braintree Payment Actionを使用しているときにクレジットカードによる支払いを受け入れる場合は、このウィジェットを使用できます。
	CountControllerは、カウントまたは数値を増減するために使用されます。 CountControllerを使用すると、eコマースアプリで購入するときに製品の数量を設定できます。
	ChoiceChipsを使用すると、ユーザーはチップのグループから1つのオプションを選択できます。各チップにはアイコンと付随するテキストが表示されるため、さまざまな選択肢を簡単に表現できます。このウィジェットを使用して、電子商取引アプリにフィルター機能を実装し、ユーザーがサイズ、色、価格帯などのさまざまな製品属性を選択できるようにすることができます。
	PlacePickerは、施設や地理的位置などの場所に関する情報を取得するために使用されます。この情報には、名前、住所、都市、州、国、郵便番号、緯度経度の詳細が含まれます。
	Formを使用すると、ユーザー入力を検証し、検証が失敗した場合にメッセージを表示できます。このウィジェットには、任意の数のフォームフィールドを含めることができます。フォームフィールドは、通常、TextFields、Dropdown、RadioButton、またはDate/Time pickerなどの入力フィールドです。
	CheckboxGroupは、ユーザーが複数の項目を選択できるようにするために使用されます。項目名の前にチェックボックスが表示され、チェックを入れる/外すことで選択/解除できます。
	Signatureを使用すると、署名をキャプチャできます。このウィジェットは、画面上の指またはマウスポインターを追跡し、それに応じて署名パッドに線を描画します。このウィジェットを使用すると、デジタル形式で契約書または契約書に対するユーザーの同意を得ることができます。