【FlutterFlow】丸い画像を上手に重ねて印象的なUIを作る：レイアウト絶賛練習中！

どうも！前回記事からの続きです～。FlutterFlowの公式資料に沿って、レイアウトの練習をしております！

前回は、手書きした設計図にしたがい、ウィジェットを上から配置し始めました。設計図を作ったおかけで、次に何をするかが分かっているので、安心感がありますね！

ここまで進めました。

今回は、スタック設定作業を進めます。設定する内容自体はこのブログでも紹介ましたが、新鮮な気持ちで改めて取り組みます。大事なことは、繰り返しやらないとね！

では、レッツゴー♪

スタックにCricle Imageを追加

前回は、Stackを追加し、Paddingの設定までやりました。今回は、その続きからです。Stackに子要素を追加します。

作りたいのは、次の画像の赤枠のようなものです。丸い画像が重なって表示されていますね～。ウィジェットを重ねるレイアウトが可能なのが、この「スタック」でございます！

丸い画像が3つ必要ですが、必要なウィジェットは何でしたっけ？そう、CircleImageでしたね。これを追加しましょう！

キャンバスは、こうなります。

まずは追加できました～。

CircleImageのサイズ設定

CircleImageを一つ追加しました。残り２つ必要ですが、先に一つを設定してからそれを複製した方が速そうです。ということで、CircleImageのプロパティに移動して、設定を進めます。

Diameter（直径）を58pxにします。

あれ？このメニューは、以前、Radius（半径）でしたよね…。Radiusといいながら直径の長さだったんでしょうか、メニュー名が更新されていますね…。

何はともあれ、CircleImageは小さくできました。

CircleImageのBox Fit設定

続いて、CircleImageのBox fitを設定します。

このBox fitというのは、「（Circle内のイメージが正方形の）利用可能なスペースをどのように占有するかを決定する」メニューらしいです。ポップアップを直訳すれば。

この設定を変更すると何がどう変わるかは、調査不足・勉強不足です。すみません。が、デフォルトの「Cover」のままにしておきます。

このCoverは、「利用可能なスペース全体を占有しつつも、できるだけ小さい」のだそうです。今回の場合、None（右から2つ目）を除いて、どれを適用しても外観は変わりませんが…。

はい、BoxFitもOKですね～。

CircleImageを複製して位置を変更

では、CircleImageを2つ増やしますよ。次の通りです。

真ん中に完全に重なって表示されるはずですから、Horizontal Alignmentを変更していきます。それぞれ、-1、-0.8、-0.6としました。

うん、なんとか重ねられましたね～。

本当は、ドラッグアンドドロップでできるはず、らしいのですが、なんかうまくいかないのですよね…。スタックの外へ飛び出てしますのですよ。うまくドラッグする方法をご存じの方、ぜひ教えてください♪。

おまけえすが、表示させる画像は変更しておきました。

下図の赤枠の数値を変更すれば、とりあえず別の画像に差し替えられます。

ということで、ここまでできました～。

はい、本日は以上です。今回は、スタック内のCircleImageを頑張ってせってしました～。

次回は、一番の難関、Rowの設定をやっていきましょう。では！