【FlutterFlow】PageView専用アクションでページ遷移をコントロール

前回記事からの続きです。PageViewウィジェットを使って「オンボーディング」（新規ユーザーにアプリの導入説明する複数ページ）を作っています。

前回は、インジケータのカスタマイズを紹介しました。ドットの間隔やドットの丸みを調整したり、さてまたはドットを透明化したりと詳細な設定ができましたね

さて、今回は、ボタンを使ったページ遷移をやりましょう。スクロールやドットのタップを使ってもページ遷移させることは、もちろんできるのですが、選択肢としてボタンも考えておきたいですよね。

ということで、さっそくボタンを使ったページ遷移、やってみましょう！

どんなアクションのボタンが必要？

オンボーディング用のページには、どんなボタンを設置しましょうか。「次へ」ボタンですよね。でも、実際には、「前へ」や「スキップ」というボタンもあった方がいいでしょうね。

では、まずは「次へ」ボタンを作ってみましょう！

PageViewウィジェットには、３つのPaView Pageがあります。

ボタンを配置したいPageView Pageには、Stackウィジェットをいれておきましょう。そのStack内にボタン・ウィジェットを追加します。こうすることで、画像の上にボタンを配置できますね。

ボタンが新規設置されたら、任意の場所にボタンを移動しておきましょう。

はい、以上がボタン設置です。ボタンウィジェットを置くのは、Stack内であることに注意しておきましょう。

ボタンテキストの更新

続いて、ボタンテキストを変更しましょう。

ボタン・ウィジェットを選択して、ボタン・テキストを「Next」に変更しました。

はい、テキストが更新されました。

ボタンの外観は、とりあえずこれでいいでしょう。

PageView専用！アクション設定

次は肝心のアクション設定です。これがちょっとコツがいるんだな。

ボタン・ウィジェットのアクションタブを開きます。Add Actionボタンをクリックします。

さて、どんなアクションを追加しますか？Navigate to？はい、私もそう思いました。しかし、実は違います。下図のようにpageなどと検索して、「Control Page View」を選びます。おお、PageView用のアクション！

制御対象のPageViewを選びます。

PageViewを選びます。アプリ内には、一つしかPageViewしかないし、ウィジェット名も変更していないので。

どこに移動するかを選びます。Nextでいいですね。このほか、前、最初、最後と選べます。スキップというアクションは、PageView外のページに移動することなので、Navigate toアクションを使えばいい、ということでしょう。

はい、これで1ページ目のNextボタンをタップすると、2ページ目に遷移させることができるようになりました。パチパチ。

2ページ目にボタンを複製

無事、PageView Pageの遷移ボタンができましたが、もう少しやってみましょう！

2ページ目にも、まったく同じボタンを配置すれば、3ページ目に遷移できるようになりますよね。だって、アクションの遷移先を「次へ」と、相対的に設定したのですから。

試します！ボタンを複製します。

複製されたボタンをカットして、2つ目のPageView Page内スタックにペーストします。

複製できましたよ～。

2ページ目に複製されたボタンをタップすると、3ページ目に遷移するようになりました～。やったね～。

あとは、2ページ目と3ページ目に「前へ」ボタンを同様に追加すればいいでしょう！

はい、今日はここまで。今回は、ボタンタップによるPageView Pageの遷移アクションを設定しました。専用のアクションがあるなんて、びっくり。

次回は、渋いですが、Dividerをやります。

またね。