【FlutterFlow】自分オリジナルのコンポーネントはこうして作る！

こんにちは～。前回記事からの続きです。FlutterFlowのコンポーネントの使い方を練習中でございます～。

前回は、コンポーネント一覧から、ページにコンポーネントを追加する方法について知りました。ウィジェットの追加とだいたい同じですが、ダイヤモンドマークのタブを選択する必要がありましたね。

今回は、自分で作ったウィジェットの組み合わせをコンポーネントとして登録する方法について、学びましょう！

「このウィジェットのセット、アプリ内で繰り返し使うなあ～。」と思ったら、ぜひ使ってみましょう！

それでは、今日も元気に、レッツゴー♪

ウィジェットの組み合わせを用意

では、何かページをご用意いただいて、そのページ内のウィジェットの組み合わせをコンポーネントに転換します。

私の方では、こんなページを準備しました。

余談ですが、こんなページが10分くらいでさくさく作れるようになったのは、レイアウトの作り方を学んだお陰なのですよ…。過去記事のリンクを貼っておきますね～、いちおう。

下図の赤枠内のウィジェットのセットをコンポーネントにしたいと思います。

ウィジェットツリーはこんな感じです。赤枠内がコンポーネント化のターゲットですよ。

なお、４つのカラム内はこうです。

はい、下準備はOKね！

簡単一発！？コンポーネント化

では、上記のウィジェットのセットをコンポーネント化します。

Rowを右クリックします。するとConvert to Componentというメニューが見つかります。これを選択します。

小窓が立ち上がるので、コンポーネントに名前を付けてあげて、Create Componentを押します。

うお、もうコンポーネントが作れてしまった～。速くない！？

ほらね。一覧にも追加されています。

ウィジェットツリーはこんな感じです。できてる、できてる♪

いや、こんな簡単にコンポーネントが作れるとは、知りませんでした～。

コンポーネント化されたウィジェットはどうなった？

ところで、ん？なんかページのウィジェットツリーが何か違うぞ…。

あ！さっきコンポーネント化したウィジェットがコンポーネントに置き換わってる！なるほどね～。

もう一つのウィジェットとして修正はできません。あくまで共有化された部品を引用している状態になりました。

となりますと、コンポーネントは、バックエンドクエリと紐づけて動的にコンテンツを表示させるときに大活躍しそうです。違います！？

今度、試してみよう！

はい、本日はここまで～。今回は、自分で作ったウィジェットの組み合わせをコンポーネントにしてみるというお話でした～。

次回は、BottomSheetを扱います。

では～。