【FlutterFlow】スワイプ可能なページを実装する「PageView」

はい、こんにちは～！このところ、FlutterFlowのUIビルダーの使い方を覚えよう～ということでいろんなウィジェットを紹介しております。

前回までは、タブバーを紹介しておりました。果たして今回は～、、、「ページビュー」ウィジェットでございます～。それで、何ができるのかですって？実は、スワイプ可能なページを作ることができます。

ふむ、それができたら、ユーザー体験が上がりそうです。

さあ、試してみましょう～。参考にするのは、この公式資料です。レッツゴー♪

ページビューにできること

この「ページビュー」ウィジェットで何ができるか、もうちょっと具体的に説明します。

この「ページビュー」ウィジェット」は、タテヨコいずれかにスワイプできる複数のページを保持するものです。

横方向のスワイプなら、例えば、いわゆる「オンボーディング」（新規ユーザーがアプリを使い始めるときに複数ページでアプリの特徴や使い方を教えてくれるもの）が作れます。

他方、タテ方向のスワイプなら、例えば、TikTokのようにショート動画を連続して見せるようなUIを作ることができます。

なるほど、楽しいアプリを作るには不可欠な機能を持つウィジェットですね～。

画像を水平にスライドさせるページ

よし、早速一つ作ってみましょう～。

空のページにページビュー・ウィジェットを追加します。次の通りです。

するとキャンバスには、下図のように表示されます。え、もう何か出来上がったていますね。3つの画像が横スワイプで表示できるようです。

では、ウィジェットツリーは、どうなっているのかしらん？よく見てみると、PageView Pageが3つ配置されています。その各PageViewPageの中に、画像が一つ配置されています。

なるほど、初期設定では、このようになっているのですね。自分でページ追加する手間が省けて素晴らし～。

テストランしてみます。はい、よこ方向にスワイプすることで３つの画像を表示させることができます～。

以上が、ウィジェットの設置についてでした。

オンボーディングをページビューで作成！

初期設定状態のウィジェットについて知りました。

次は、公式資料にならって、3ページで構成される「オンボーディング」デザインを作ってみましょう～。画像を画面いっぱいに表示させて、横スクロールできるようにします。

まずは、PageViewのプロパティで、高さを無限（inf）に変更します。無限マークを押すだけでOKです。

はい、下図のように、すでにオンボーディングぽくなりました。

画像にテキストを載せる

続いて、画像の上にテキストを載せたいと思います。そうですよね～、画像だけではちょっと足りないかな。

最初のイメージ・ウィジェットを選択します。

次に、Imageを右クリックしてWrap widgetを選びます。おお、こんな操作したことないぞ～。ウィジェットを包む、、ってどいうことでしょう？

「イメージ・ウィジェットを包むウィジェットを選択せよ」と出てきますね。画像とテキストを重ねると言えば、、、Stackですね。Stackを選択。

はい、イメージがスタックに包み込まれました～。

キャンバスは、次のようになっています。おや、画像が小さく表示されてしまいました。ちょっと不安です。

はい、本日はここまで～。今回は、ページビューウィジェットのご紹介をして、オンボーディング作成の出だしをやりました。

次回は、オンボーディング製作の続きをやりましょう！