【Flutter】PageViewを使ったシンプルなチュートリアルページの実装

はじめに

下記記事のように、かっこいいチュートリアル作れるパッケージはいくつかありますが、
依存関係を増やしたくない方や、とりあえずシンプルでいいという人向けに、シンプルなチュートリアルページの実装を記事にしようと思います。

画面構成

説明する部分は、画像、タイトル、内容という構成で、その下に現在ページとトータルのページ数を表すインジケータ、次のページに進むためのボタンを表示しています。

ソースコード

動かしてみたい方は下記にリポジトリを置いておきます。

ポイント解説

チュートリアルの実装の大事な部分は、スワイプやボタンの押下で画面が切り替わっていく部分ですが、
それはPageViewというWidgetで作成しています。
PageViewを使うと、スワイプでの切り替えを実装することなく、使用できます。

また、ボタンによる遷移はPageViewに渡すPageControllerで制御します。

pageController.nextPage(
  duration: const Duration(milliseconds: 600),
  curve: Curves.easeInOut,
);

詳しくは公式のページを見るのがいいと思います。

ドットのインジケーターは自前で実装しましたが、以下のような便利なパッケージもあるみたいです。