すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】ウォークスルー画面を簡単に作成する方法

アプリ開発時、以下の様な機能を実装したいケースがある。

アプリ起動後に表示するウォークスルー画面

この機能はPageViewクラスとsmooth_page_indicatorで簡単に作成できる。

本エントリでは以下の流れでウォークスルー画面を簡単に作成する方法を説明する。


ウォークスルー画面例

まず動作画像とコードを示す。その後適宜説明を加える

ウォークスルー動作画像

ウォークスルー動作画像

コード


コード説明

本エントリのウォークスルーUIはPageViewクラスとsmooth_page_indicatorを用いて実現している。 まずそれぞれのクラスについて説明し、その後PageControllerについて述べる。

PageView

api.flutter.dev

PageViewはスクロールして特定のchildrenに指定したウィジェットを表示することができる。

ListViewなどのレイアウト系ウィジェットと異なる点として、 「スクロールは中途半端な位置では終わらない」がある。 以下の画像はListViewを用いた例。中途半端な位置でスクロールが止まる。

listviewだと中途半端な位置でスクロールが終わる

PageViewを使用する上ではいくつか注意点がある。

[注意点1] サイズを指定した方がよい

SizedBoxなどでラップして縦横のサイズを指定する。 未指定だとRenderBox was not laid outみたいなエラーが表示される。

[注意点2] controllerプロパティを指定する

本エントリで示している例の様に、PageViewの下に現在のページ位置を示すインディケーターがある場合、 controllerを指定する必要がある。 出ないと現在のページ位置が認識されず、実際のページ位置とインディケーターが示すページ位置がずれる。

smooth_indicator

ウォークスルーでは現在何枚目のページを表示しているかを表すインディケーターがよく併せて表示される。 そこでsmooth_page_indicatorを使用する。

pub.dev

サードパーティのパッケージなのでpubspec.yamlに以下を記述する。

smooth_page_indicator: ^1.0.0+2

使用方法は簡単で、controllerプロパティにPageViewにも指定した共通のコントローラーを指定すれば良い。 またページ数の指定はcountにページ数を渡すことで可能。