PageView Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

What is PageView Widget in Flutter?

PageView Widget in flutter is used to make a Swipeable Widget list. PageView Widget supports both Vertical and Horizontal swipeable scrolling.

In PageView Widget each child widget should be in the same as Parent Viewport. If your parent widget size is full screen then it will make the swipeable widgets full screen.

PageView Widget 

PageView constructor(): To create a PageView, you can use the constructor. Though there is no required parameter, you should pass children (List). Otherwise, it will show nothing. This type takes a fixed list of children (pages) and makes them scrollable.

 List<Widget> pagesArray = [
    Container(
      color: Colors.orangeAccent,
    ),
    Container(
      color: Colors.white,
    ),
    Container(
      color: Colors.green,
    ),
  ];

  PageView(
    children: pagesArray ,
  )

The above code will create output like below :

PageView Flutter

• PageView.builder(): 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 as below.

PageView.builder(
      itemCount: 10,
      itemBuilder: (context, position) {
        Color color;
        if (position % 3 == 0) {
          color = Colors.red;
        } else if (position % 3 == 1) {
          color = Colors.blue;
        } else {
          color = Colors.green;
        }

        return Container(color: color);
      },
    );

An item builder attribute holds the space to create the actual page. The itemCount, on the other hand, is used to create the pages given a number of times. If the itemCount is empty, infinite pages are constructed.

• PageView.Custom:

PageView.custom(
      childrenDelegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          Color color;

          if (index % 3 == 0) {
            color = Colors.red;
          } else if (index % 3 == 1) {
            color = Colors.blue;
          } else {
            color = Colors.green;
          }

          return Container(color: color);
        },
        childCount: 15,
      ),
    );

Properties

• Key key: The widget key, used to control if it’s should be replaced.

• 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.

 scrollDirection: Axis.vertical,

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

• reverse: Whether the page view scrolls in the reading direction. Defaults to false

• PageController controller : Controller for the PageView.

• ScrollPhysics physics: How the page view should respond to user input.

• bool pageSnapping: Whether to use page snapping. Defaults to true.

• ValueChanged onPageChanged: Callback that will be called whenever a different page becomes the center.

• DragStartBehavior dragStartBehavior: How the drag start behavior is handled. Defaults to DragStartBehavior.start.

• IndexedWidgetBuilder itemBuilder (only for .builder()) : Function that creates a widget for the given index number.

• int itemCount (only for .builder()) : Used to set the maximum page.

• SliverChildDelegate childrenDelegate (only for .custom()) : A delegate that provides the children for the PageView.

Conclusion:

In this article, we have been through What is PageView Widget in Flutter.

Thanks for being with us on Flutter Journey.
Do let us know your valuable feedback.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.