【FlutterFlow】Stackでイメージ上にテキストを柔軟に配置できる
前回記事からの続きです。PageViewウィジェットを使って「オンボーディング」（新規ユーザーにアプリの導入説明する複数ページ）を作ろうとしています。
前回は、ページビューウィジェットを追加して、PageViewページ内にあるImageをStackウィジェットで包む（Wrap）ところまでやりました～。
今回は、Stackウィジェットにテキストを加えて、画像の上にそれを表示させましょう！
レッツゴー♪
Stackの影響で小さくなったイメージを大きく表示
ウィジェットの現状を確認しましょう。PageViewPageにイメージがありましたが、それをStack（子要素のウィジェットを重ねて表示させるためのウィジェット）で包みました。下の通りです。
その結果、イメージが小さく表示されるようになりました。Stackの初期設定の影響でしょうね。これを修正するところからいきましょう。
イメージウィジェットを選択して、その高さと幅をInf（無限）にします。無限マークを押すだけです。
はい、下のように再び画面いっぱいに広がりました～。
はい、画像の調整はひとまずOKです。
テキストウィジェットの追加
続いて、この画像にテキストを重ねて表示させます。
そのためには、Stackの中にTextウィジェットを追加しないといけないですね。やりましょう！つぎのとおりです。
追加されました～。上に小さくちょこんとありますね。
このままじゃいけませんね。次のようにカスタマイズしました。
Text：Onboarding Page 1
Theme：Title1
Color：白
するとこうなりました。左上にまだ配置されていますが、これはいったん保留します。
テキストの配置が気になるところですが、これはStackウィジェットの方で調整します。親要素との相対的な関係で子要素の位置を定めるということでしょう。Default Child Vertical Alignmentを0.9にします。水平方向は自動的に真ん中（すなわち0）にセットされます。
やりました～。テキストがStackウィジェットの下の方に表示できました～。
以上で、テキストウィジェットの追加と調整は終わりです。
ページビュー内のページを切り替えて修正
ここまでうまくいきましたが、まだ残り２つのページが残っていましたね。これも更新しなきゃ。
ところで、ページの切り替えってどうやればいいでしょう？ウィジェットツリーで選べばいいでしょ！？いやその通りですが、他の方法もあります。
PageViewを選択します。
プロパティでActive Pageを見つけます。
選択したいPageをクリックします。
あまり使わないかな、この導線。ページの追加もここでできるので、一応この機能の存在を頭に残しておきましょう。
では、残りのページも復習のつもりで同じ設定をすると次のようになります。おおいい感じじゃないですか～。
背景の画像をオンボーディング用にすれば、それらしくなりますね。
はい、本日はここまで～。テキストを追加して画像の上に配置できるようになりました。
このままでも十分すてきだと思うのですが、外観がデフォルトのままですね。次回は、PageViewウィジェットの外観をカスタムしてみましょう！
ではまた～。
この記事が気に入ったらサポートをしてみませんか？