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

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

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

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

ウォークスルー画面例

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

ウォークスルー動作画像

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

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

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

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

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

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

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

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

smooth_page_indicator: ^1.0.0+2

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