🧑🦳
PageView.builderを使う
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});
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});
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
を設定してね。
参考にした技術記事
Discussion