🧑‍🦳

PageView.builderを使う

2023/11/30に公開

Flutter

Dart

tech

Overview

公式を翻訳
ページごとに動作するスクロール可能なリスト。ページビューの各子は、強制的にビューポートと同じサイズになります。 PageController を使用して、ビューに表示されるページを制御できます。 PageView 内のコンテンツのピクセルオフセットを制御できることに加えて、PageController を使用すると、ビューポートサイズの増分であるページ単位でオフセットを制御することもできます。 PageController は、PageView が最初に構築されるときにどのページが表示されるかを決定する PageController.initialPage と、ページのサイズをビューポートサイズの一部として決定する PageController.viewportFraction を制御するためにも使用できます。

公式サイト

こんな感じで動作します
縦スクロールするように設定

summary

今回は、動的なページを生成するPageView.builderを使ってみました。150 * 150のカラーボックスを表示したかったんですけど、なぜか景色が映るようになった???
コードを修正して、色が変わる背景に変更しました。縦スクロールすると、UIが切り替わります。

最近、動画を画面全体に表示するUIを作っていたので、似たようなもんかなと思ったので、使ったことのないWidgetの学習目的で使ってみました。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

List<Widget> colorObjet = [
  Container(
    color: Colors.red,
  ),
  Container(
    color: Colors.blue,
  ),
  Container(
    color: Colors.green,
  ),
];
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const PageBuilderExample(),
    );
  }
}

class PageBuilderExample extends StatelessWidget {
  const PageBuilderExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView.builder(
      scrollDirection: Axis.vertical,
      itemCount: colorObjet.length,
      itemBuilder: (BuildContext context, int index) {
        return colorObjet[index];
      },
    ));
  }
}

thoughts

今回は、PageView.builderを使って画面を切り替える処理を作ってみました。横か縦にスクロールするときは、scrollDirectionを設定してね。

参考にした技術記事

Overview

summary

thoughts

Discussion