How to use PageView in Flutter

Photo by Frank Holleman on Unsplash

There are many ways to display content in a mobile app. One of the most popular approaches to showing tabs and pages in Flutter is to use the PageView widget.

The PageView widget allows us to display sliding and swipeable pages in our Flutter app. This is usually used to display multiple pages where we display one screen at a time. This ranges from viewing full-screen photos to watching short videos one at a time.

Figure 1. PageView example.

Simple PageView example

Let’s start with a simple example of using PageView. Let's say we have a photo gallery app where we can view different photos. Using PageView is a perfect approach to display these photos one at a time. Let's use a Container with different colours to represent a photo.

import 'package:flutter/material.dart';
​
class PageViewScreen extends StatelessWidget {
  const PageViewScreen({
    super.key,
  });
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.green,
          ),
          Container(
            color: Colors.blue…