【Widget of the Week】#9 PageView

【#9 PageView】動画

【#9 PageView】概要

Flutterで見栄えの良い画面を作るのは簡単!

PageViewはスワイプでページ移動ができる!

PageViewの使い方

【#9 PageView】解説

①Flutterで見栄えの良い画面を作るのは簡単!

Flutterは多種多様なウィジェットを提供しているので、魅力的なページを作ることが比較的容易にできます。

ではそのページがたくさん出来た時にどうしたらユーザーに気持ちよく使ってもらえるでしょうか?

スマホではよく用いられる手法ですが、スワイプすることでページ移動できたら便利ですよね。

②PageViewはスワイプでページ移動ができる!

ボタンでページ移動をするのではなく、スワイプで移動したい時はPageViewを使いましょう!

これから動画の内容に沿ってPageViewの使い方を解説していきたいと思います。

③PageViewの使い方

  1. PageControllerを作ろう!

PageViewを実装するファーストステップとして PageControllerを用意しましょう。

PageControllerがスワイプを検知することで画面移動を実現することができます。

2. 開始ページを設定しよう!

PageControllerのinitialPageプロパティに初期表示するページのインデックス番号を指定しましょう。

この後PageViewの方で表示するページをリスト形式で設定していきます。

3. PageViewを作ろう!

実際にPageViewを作っていきましょう。

まず、controllerプロパティに先ほど作ったPageControllerを設定します。

次にchildrenプロパティにリスト形式で表示したい画面を並べます。

このリストのインデックスの番号は0からスタートしています。

つまりPageControllerのinitPageプロパティには0から始まるインデックス番号を指定してください。

【#9 PageView】サンプルコード① (基本的なプロパティ)

①children

型:List<Widget>
表示するページをリスト形式で設定できる。

②controller

型:PageController
PageControllerを設定する。初期表示ページの設定などはPageControllerで行う。
※ PageControllerの詳細はこちら(公式ドキュメント)

③scrollDirection

型:Axis
スクロールする方向を設定できる。Axis.horizontalで横スクロールAxis.verticalで縦スクロールにできる。

④onPageChanged

型:ValueChanged<int>
画面遷移時に実行する関数を設定できる。引数としてページのインデックス番号を取得できる。

※ PageViewの詳細はこちら(公式ドキュメント)

See the Pen
PageView
by RyomaArisawa (@ryoma-arisawa)
on CodePen.

投稿者プロフィール

ArisawaRyoma
社会人歴2年目の駆け出しエンジニアです。

学生の時はがっつり文系(=遊んだただけ)でほぼPCに触れずに生きてきたので、プログラミングは日々勉強中。Vue / React / Django / Springなど色々浮気して今はFlutterにハマってます。

趣味は海外旅行、釣り、卓球など。

Twitterでも色々発信してるので良ければフォローお願いします。

関連記事

  1. 【Widget of the Week】#10 Table

  2. flutter

    【Flutter】開発環境構築(Flutter,VSCode,Wind…

  3. flutter

    【Flutter】Widgetテスト(Flutter,VSCode,T…

  4. 【Widget of the Week】#5 Opacity

  5. 【Widget of the Week】#6 FutureBuilde…

  6. flutter

    【Flutter】ビルド,リリース,テスターへデプロイ(Flutter…

最近の記事

  1. flutter
  2. flutter
  3. flutter

制作実績一覧

  1. Checkeys