![見出し画像](https://assets.st-note.com/production/uploads/images/100860445/rectangle_large_type_2_2ad78e4ad5013dbe973247a0c59e3f49.png?width=1200)
【FlutterFlow】スワイプ可能なページを実装する「PageView」
はい、こんにちは~!このところ、FlutterFlowのUIビルダーの使い方を覚えよう~ということでいろんなウィジェットを紹介しております。
前回までは、タブバーを紹介しておりました。果たして今回は~、、、「ページビュー」ウィジェットでございます~。それで、何ができるのかですって?実は、スワイプ可能なページを作ることができます。
ふむ、それができたら、ユーザー体験が上がりそうです。
さあ、試してみましょう~。参考にするのは、この公式資料です。レッツゴー♪
ページビューにできること
この「ページビュー」ウィジェットで何ができるか、もうちょっと具体的に説明します。
この「ページビュー」ウィジェット」は、タテヨコいずれかにスワイプできる複数のページを保持するものです。
横方向のスワイプなら、例えば、いわゆる「オンボーディング」(新規ユーザーがアプリを使い始めるときに複数ページでアプリの特徴や使い方を教えてくれるもの)が作れます。
他方、タテ方向のスワイプなら、例えば、TikTokのようにショート動画を連続して見せるようなUIを作ることができます。
なるほど、楽しいアプリを作るには不可欠な機能を持つウィジェットですね~。
画像を水平にスライドさせるページ
よし、早速一つ作ってみましょう~。
空のページにページビュー・ウィジェットを追加します。次の通りです。
![](https://assets.st-note.com/img/1679430098885-JefgjQNEQd.png?width=1200)
するとキャンバスには、下図のように表示されます。え、もう何か出来上がったていますね。3つの画像が横スワイプで表示できるようです。
![](https://assets.st-note.com/img/1679430212646-IQ8D7UEvCk.png)
では、ウィジェットツリーは、どうなっているのかしらん?よく見てみると、PageView Pageが3つ配置されています。その各PageViewPageの中に、画像が一つ配置されています。
![](https://assets.st-note.com/img/1679430373567-UXMhSeeWoG.png)
なるほど、初期設定では、このようになっているのですね。自分でページ追加する手間が省けて素晴らし~。
テストランしてみます。はい、よこ方向にスワイプすることで3つの画像を表示させることができます~。
![](https://assets.st-note.com/img/1679431074791-MGtZ0bMqfE.png?width=1200)
以上が、ウィジェットの設置についてでした。
オンボーディングをページビューで作成!
初期設定状態のウィジェットについて知りました。
次は、公式資料にならって、3ページで構成される「オンボーディング」デザインを作ってみましょう~。画像を画面いっぱいに表示させて、横スクロールできるようにします。
まずは、PageViewのプロパティで、高さを無限(inf)に変更します。無限マークを押すだけでOKです。
![](https://assets.st-note.com/img/1679431444433-AZW11Y14wv.png)
はい、下図のように、すでにオンボーディングぽくなりました。
![](https://assets.st-note.com/img/1679431513136-F1rvWhyGm6.png)
画像にテキストを載せる
続いて、画像の上にテキストを載せたいと思います。そうですよね~、画像だけではちょっと足りないかな。
最初のイメージ・ウィジェットを選択します。
![](https://assets.st-note.com/img/1679431644236-93FWjA4L8g.png)
次に、Imageを右クリックしてWrap widgetを選びます。おお、こんな操作したことないぞ~。ウィジェットを包む、、ってどいうことでしょう?
![](https://assets.st-note.com/img/1679431925715-dUqNvWt1oo.png)
「イメージ・ウィジェットを包むウィジェットを選択せよ」と出てきますね。画像とテキストを重ねると言えば、、、Stackですね。Stackを選択。
![](https://assets.st-note.com/img/1679432051413-Wz0rq6VeE0.png?width=1200)
はい、イメージがスタックに包み込まれました~。
![](https://assets.st-note.com/img/1679432204416-uhFIQ4IXQm.png)
キャンバスは、次のようになっています。おや、画像が小さく表示されてしまいました。ちょっと不安です。
![](https://assets.st-note.com/img/1679432256973-uuaf3nZSry.png)
はい、本日はここまで~。今回は、ページビューウィジェットのご紹介をして、オンボーディング作成の出だしをやりました。
次回は、オンボーディング製作の続きをやりましょう!
この記事が気に入ったらサポートをしてみませんか?