【Flutter】PageViewの基本とサンプルコード

本記事では、PageView widgetの基本的な使い方とサンプルコード、関連記事を紹介します。

Flutterの公式動画の「Widget of the Week」をベースに日本語で説明しています。

本記事を読むメリット

  • PageViewの基本的な使い方や考え方がわかる
  • PageViewのサンプルコードを確認できる
  • 関連記事をトピック毎にまとめて確認できる

PageViewの基本的な使い方

要約

  • PageViewを使えば、ユーザーがスワイプで画面を切り替えられるようにできる
  • 最初に表示される画面はinitialPageで指定できる
  • scrollDirectionでスワイプを縦にするか横にするかを設定できる

説明

あなたのアプリに複数の画面がある場合、ユーザーがスワイプで画面を切り替えられるようにするにはどうしたらいいでしょうか?

PageViewを使えば、簡単です。

使い方は、まずはPageControllerを作ります。
PageControllerはスワイプの検出とスワイプ時のアニメーションを管理しています。

まず、PageControllerを作る

次にPageViewのinitialPageプロパティを使用して、最初に表示される画面を設定します。

最後に、PageViewにPageControllerと実際に表示する画面のリストをセットしましょう。やることはこれだけです。

ページを縦にスワイプできるようにするには、scrollDirectionプロパティにverticalを指定してください。

PageViewとPageControllerを使うことによって、アプリのユーザーは見たい画面にスワイプで移動できるようになり、よりユーザーフレンドリーなアプリを作ることができます。

動画

サンプルコード

・現在のページをドット(点)で表現するPageView(英語)
 PageView example with dots indicator

・水平垂直、両方向のスクロールとSnappingのサンプルコード(英語)(少し長め)
 Flutter: Page View – Techie Blossom

関連記事

・PageViewをListViewの中に配置する際の注意点
 【Flutter】スクロールできるビューにページビューを表示する方法
 Widget of the Week – #39 LimitedBox

・Flutter 公式ドキュメント
 PageView class – widgets library – Dart API – Flutter

・関連書籍
 Flutterの基本的な仕組みや周辺知識(テストやCIなど)を網羅的に学べる入門書
 Flutter モバイルアプリ開発バイブル

・その他のwidgetについてはこちら
 カテゴリ-Flutter

以上、PageViewの基本的な使い方とサンプルコードでした。

 

こちらのプログラミング書籍もおすすめ
(若手プログラマー向け、コーディングのレベルが1段階アップ!)

レガシーコード改善ガイド

  • 特定の言語に限らず、プログラミング初心者で理論から学びたい方におすすめ
  • プログラムに不具合が発生する仕組みや原理を理解できます。
  • その結果、不具合に強いコードが理解でき、書けるようになります。
  • 既存動作を担保しつつ、ソースをリファクタするための方法論を知ることができます。
  • テーマはテストですが、コーディングのレベルアップにも大きく役立ちます

Head First Java 第2版 ―頭とからだで覚えるJavaの基本

  • Javaなどのオブジェクト指向プログラミングの初心者におすすめ
  • 初心者が躓きやすいポイントをわかりやすく解説(インターフェースオブジェクト指向ポリモーフィズムなど)
  • コードをシンプルに保つことができるようになる
  • ポリモーフィズムを利用した、拡張しやすいプログラムをつくることができるようになる。

 

この記事を書いた人

たかお

IT企業で開発者として6年経験を積んだ後、2019年からインドIT企業の日本法人でITコンサルにジョブチェンジ。
 
プログラミングはjava、js、html、cssあたりを仕事で6年くらい。
個人ではFlutterをいじってます。
学んだことを発信していきます。よろしくお願いします!
 
firebaseで簡単なタイピングアプリを作ってみました。
もしよければ遊んでみてください!
1位の記録や管理人(私)の記録と勝負できるようになってます!
 
タイピング・チャレンジャー
https://typing-challenger.com/