PageView Widget in Flutter – Complete Tutorial

PageView Widget in Flutter – Everything you need to know

PageView Widget in Flutter is actually a scrollable list but rather works as a page. If you know about carousels(More like image sscrolling on a screen), the PageView gives the same control over that. You can create Pages and define what direction they need to be scrolled in.

Extremely useful Widget which makes the life of a developer easy. There are a lot of properties and callbacks that are part of the PageView Widget. The PageView, however, forces the child to stick to viewport as specified. In this tutorial, we will look at all the important properties that are required and helpful in order to create PageViews in Flutter.

PageView Widget – Basics

There are 3 different ways to create PageView in Flutter. They are,

  • Using the PageView Constructor directly(Useful for creating simple PageViews which are mostly Static)
  • Using the PageView.Builder – Helpful in creating Dynamic pageviews(100 scrollable PageViews to be constructed)
  • PageView.Custom – Helpful in creating custom scroll actions/animations to it.

We will look at all these ways in detail below. If you have read the post on ListView Widget in Flutter, you might have the understanding as to what each type of Building can do. We will be looking at them anyway in this post.

PageView constructor()

To start off with, we will look at the first way to create PageView in Flutter. The PageView constructor directly calls the Widget and lets you define the Pages one by one. The constructor call can be done through,

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title:"Androidmonks",
    home: Scaffold(
      body: PageView(),
    ),
  ));
}

There are a lot of important attributes that can be used with the PageView constructor. Take a look at them in the next section.

AFFILIATE ALERT!

Hey People, Since you are enjoying the content here, as the creator of this blog, I thought I will recommend some of the following products(Software & Hardware) that I use on an everyday basis. They highly increase the productivity of my work. Hope you guys like them as well.

Ventilated Laptop Stand

Adjustable Foot Rest

Magnetic Planner – Dry Erase Boards

Recommended Bluetooth Keyboard + Mouse

All the above links are affiliate links and would hugely help in running this website! Thanks and Cheers! Enjoy coding!

PageView.Builder Method

Like mentioned above, Builder is particularly used when there are a lot of pages to be constructed. The use of PageView constructor for 100 pages is not feasible. The Builder method is similar to the ListView method where the page count is taken into consideration and the engine takes care of constructing them for you. Take a look at how the Builder method is used,

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title:"Androidmonks",
    home: Scaffold(
      body: PageView.builder(
          itemBuilder: (context, position)
          {

          },
          itemCount: 10,
      ),
    ),
  ));
}

Like written above, the itemBuilder attribute holds the space to create the actual page. The itemCount, on the other hand, is used to create the pages given number of times. If the itemCount is empty, infinite pages are constructed.

All the attributes of the PageView() constructor are applicable for this method. The next section discusses these properties.

PageView.Custom

The main use of PageView.Custom(Like discussed in the ListView.Custom) is to give the PageView an additional option to make use of the Sliver widgets and create custom animation/movements to the widget. The Slivers like discussed in the SliverAppBar Widget in Flutter post, is useful to create animation movements/Widget with just simple Delegates attached to it. These are possible through the PageView.Custom method. Take a look at how that is used,

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title:"Androidmonks",
    home: Scaffold(
        body: PageView.custom(
            childrenDelegate: SliverChildListDelegate([
              ListTile()
            ])),
    ),
  ));
}

In this example, the childrenDelegate is a required attribute. It takes any type of the Sliver widget. The slivers are nothing but additionally animated widgets performing the same function other than that. You can know more about slivers here.

The attributes of PageView() constructor are applicable for this method also. To know about the properties check the next section.

PageView – Properties

Now that we have looked at all the ways to create a PageView, time to see what the PageView attributes do to the Widget.

scrollDirection

This attribute lets you decide which side the Pages should be scrolled. The Axis class can decide if the direction is either Vertical or Horizontal. Take a look at the example below,

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title:"Androidmonks",
    home: Scaffold(
      body: PageView(
        children: <Widget>[
          Container(
            child: Center(child:Text("Page 1")),
            color: Colors.red,
          ),
          Container(
            child: Center(child:Text("Page 2")),
            color: Colors.blueAccent,
          )
        ],
        scrollDirection: Axis.vertical,
      ),
    ),
  ));
}

The scrollDirection is kept as vertical and the App looks like below,

ScrollDirection in PageView set to vertical.
ScrollDirection in PageView set to vertical.

The direction can also be set to Axis.horizontal to see the scroll in the horizontal axis.

pageSnapping

This attribute lets the Page Snap into view instead of a smooth scroll. The attribute takes in a boolean value and can be used as given below. By default it is set to true, if set to False, instead of snapping to the viewport, it is up to the user to perform the swipe/scroll completely to see the other page.

Using the same example as above and setting the pageSnapping to take a look at the code below.

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title:"Androidmonks",
    home: Scaffold(
      body: PageView(
        children: <Widget>[
          Container(
            child: Center(child:Text("Page 1")),
            color: Colors.red,
          ),
          Container(
            child: Center(child:Text("Page 2")),
            color: Colors.blueAccent,
          )
        ],
        pageSnapping: false,
      ),
    ),
  ));
}

This creates the app which looks like,

Using PageSnap attribute in PageView
Using PageSnap attribute in PageView

physics

Lets the user perform Scroll but with different animation that Flutter Supports. It takes in value of the ScrollPhysics and can be used in the following way.

To understand the difference in the ScrollPhysics, you must understand that, when the user does a fast scroll on the list of pages, the final animation when the max page size is reached is defined by the ScrollPhysics. To see that animation, we will create more than 2 pages and set it to Vertical Scroll. There are a lot of ScrollPhysics that are available, 2 different physics and how they change is given below.

Using BouncingScrollPhysics in the code below we get,

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title:"Androidmonks",
    home: Scaffold(
      body: PageView(
        children: <Widget>[
          Container(
            child: Center(child:Text("Page 1")),
            color: Colors.red,
          ),
          Container(
            child: Center(child:Text("Page 2")),
            color: Colors.blueAccent,
          ),
          Container(
            child: Center(child:Text("Page 3")),
            color: Colors.redAccent,
          ),
          Container(
            child: Center(child:Text("Page 4")),
            color: Colors.blueAccent,
          )
        ],
        pageSnapping: false,
        scrollDirection: Axis.vertical,
        physics: BouncingScrollPhysics(),
      ),
    ),
  ));
}

This creates the app which looks like,

Scrolling when BouncingScrollPhysics is used
Scrolling when BouncingScrollPhysics is used

As you can see, the scroll effect when the First page/Last page is reached gives a bounce effect to denote the end of the pages. This is defined by the BouncingScrollPhysics.

Taking the same example and changing the scrollphysics to ClampingScrollPhysics gives the app which looks like,

ScrollPhysics set to ClampScroll

onPageChanged

This callback is fired whenever the Page is changed. That is whenever the scroll happens, the page number is fired and can be used for further processing.

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title:"Androidmonks",
    home: Scaffold(
      body: PageView(
        children: <Widget>[
          Container(
            child: Center(child:Text("Page 1")),
            color: Colors.red,
          ),
          Container(
            child: Center(child:Text("Page 2")),
            color: Colors.blueAccent,
          ),
          Container(
            child: Center(child:Text("Page 3")),
            color: Colors.redAccent,
          ),
          Container(
            child: Center(child:Text("Page 4")),
            color: Colors.blueAccent,
          )
        ],
        onPageChanged: (num){
          print("Current page number is "+num.toString());
        },
        physics: ClampingScrollPhysics(),
      ),
    ),
  ));
}

This creates the below output,

onPageChanged callback in PageView
onPageChanged callback in PageView

 

controller

The controller attribute controls the entire PageView Widget. It lets you define and control the Pages from outside with just the PageController() object assigned to the PageView.

I have written a very simple(Rather stupid) code, which actually helps you skip a Page(Whevener you try to swipe to the second page, it pushes it to the 3rd page).

Check the code below and the output also

import 'package:flutter/material.dart';

void main()
{ PageController controller = PageController();
  runApp(MaterialApp(
    title:"Androidmonks",
    home: Scaffold(
      body: PageView(
        children: <Widget>[
          Container(
            child: Center(child:Text("Page 1")),
            color: Colors.red,
          ),
          Container(
            child: Center(child:Text("Page 2")),
            color: Colors.blueAccent,
          ),
          Container(
            child: Center(child:Text("Page 3")),
            color: Colors.redAccent,
          ),
          Container(
            child: Center(child:Text("Page 4")),
            color: Colors.blueAccent,
          )
        ],
        controller: controller,
        onPageChanged: (num){
          controller.jumpToPage(2);
          print("Change:"+controller.position.toString());
        },
        physics: ClampingScrollPhysics(),
      ),
    ),
  ));
}
Using Page Controller in PageView widget
Using Page Controller in PageView widget

If you note the console output, the Position object is getting printed. It has a lot of data as to every bit of information about the Page which the user is seeing.

It can also be controlled from outside the PageView’s scope and that provides dynamic control over the pageviews.

PageView in Flutter – Conclusion

PageView in Flutter is a very important widget in terms of organization and better visualization to the entire Flutter App you are going to build.

Also, know more about ListView Widget in Flutter to better understand how the different dynamics of the PageView Widget is created.

That’s it for the article, drop in any comments you have about the PageView widget in the Comment section below.

“Happy Coding”

Leave a Comment

Your email address will not be published. Required fields are marked *