PageView

PageView Widget – Flutter Widget Guide By Flutter Agency

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 Demo

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.

Abhishek Dhanani

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.

Leave a comment

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


Discuss Your Project

Connect with Flutter Agency's proficient skilled team for your app development projects across different technologies. We'd love to hear from you! Fill out the form below to discuss your project.

Build Your Agile Team

Hire Skilled Developer From Us

"*" indicates required fields

✓ Valid number ✕ Invalid number

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number