New post Need visibility? Apply for a FREE post for your Startup.  Apply Here

MobileRandom

How to implement a PageView in Flutter.

2 Mins read

Hi, everyone and welcome to a brand new tutorial series on Flutter. Today we’re going to learn how to implement PageView in Flutter.

If you haven’t already seen the Flutter Widget of the Week video about how to implement PageView in Flutter, kindly watch it first. The rest of this article is based on it.

Flutter Widget of the week – PageView.

This video showed you the essence of what PageView does. This article will fill out the code for you to play with. Scroll down to the end to get the full code demo, or just get the source code here.

PageView widget allows the user to swipe/transition between different screens in your app. All you need to set it up are a PageViewController and a PageView.

You can use a PageController to control which page is visible in the view. In addition to being able to control the pixel offset of the content inside the PageView, a PageController also lets you control the offset in terms of pages, which are increments of the viewport size.

PageController can also be used to control the PageController.initialPage, which determines which page is shown when the PageView is first constructed, and the PageController.viewportFraction, which determines the size of the pages as a fraction of the viewport size.

Exploring PageView

PageView is a widget that generates scrollable pages on the screen. This can either be a fixed list of pages or a builder function that builds repeating pages. PageView acts similarly to a Listview in the sense of constructing elements.

Three types/Constructor of PageView

we have three types of PageView just like ListView.

1. PageView
2. PageView.builder
3. PageView.custom

PageView (Default constructor)

This type takes a fixed list of children (pages) and makes them scrollable.

        PageView(
          children: <Widget>[
            Container(
              color: Colors.orange,
              child: Center(
                  child: Text(
                'Page 1',
                style: TextStyle(color: Colors.white),
              )),
            ),
            Container(
              color: Colors.blue,
              child: Center(
                  child: Text(
                'Page 2',
                style: TextStyle(color: Colors.white),
              )),
            ),
            Container(
              color: Colors.green,
              child: Center(
                  child: Text(
                'Page 3',
                style: TextStyle(color: Colors.white),
              )),
            ),
          ],
        ),

The above code produce the below screen 👇

PageView.builder

This constructor takes a itemBuilder function and an itemCount similar to ListView.builder.

PageView.builder(
  itemBuilder: (context, index) {
    return _buildPage();
  },
  itemCount: listItemCount, // Can be null
)

Like a ListView.builder, this builds children on demand.

If the itemCount is set to null (not set), an infinite list of pages can be generated.

Example: The below code produce the below screen 👇

      PageView.builder(
        // itemCount: 3,
        itemBuilder: (context, index) {
        return Container(
          color: index % 2 == 0 ? Colors.green : Colors.blue[700],
        );
      }),

Gives an infinite list of pages with alternating pink and cyan colors:

PageView.custom Constructor

PageView.custom(
   {Key key,
   Axis scrollDirection: Axis.horizontal,
   bool reverse: false,
   PageController controller,
   ScrollPhysics physics,
   bool pageSnapping: true,
   ValueChanged<int> onPageChanged,
   @required SliverChildDelegate childrenDelegate,
   DragStartBehavior dragStartBehavior: DragStartBehavior.start,
   bool allowImplicitScrolling: false,
   String restorationId,
   Clip clipBehavior: Clip.hardEdge}
)

PageView.custom works the same way as ListView.custom. It takes a childrenDelegat function similar to ListView.builder.
PageView.custom is more explained with examples in the source code.


Customized PageView

I hope you have learned something, kindly subscribe to the newsletter and appreciate this tutorial by sharing it and feel free to ask a question. Thanks for reading.

Source code! 👇 Show some ❤️ by starring ⭐ the repo and do follow me 😄!

Complete source code!

Join Flutter Developer Community: Telegram | Facebook | WhatsApp

Let’s connect with each other online: Github,  TwitterYoutubeMediumLinkedIn, etc.

Read also: Understanding the Flutter Architecture.

Don’t miss any tech news ever!

We don’t spam! Read our privacy policy for more info.

18 posts

About author
I'm passionate about learning and teaching programming, majorly Flutter at the moment. I make friends, develop, or learn from them.
Articles
Related posts
Mobile

African smartphone market surges in Q1 2024, outpacing feature phones

1 Mins read
Smartphone shipments have overtaken feature phones for the first time, according to a recent report by the International Data Corporation (IDC). The…
Random

Botswana aims for the stars with first Satellite launch

1 Mins read
Botswana is set to join the ranks of nations with satellites in orbit. The Botswana International University of Science and Technology (BIUST)…
Mobile

Snapchat is working on improving teens safety on its app

1 Mins read
With the ongoing wave of sexual predators lurking around the corners of the internet to prey on unsuspecting teenagers, it has become…
Newsletter Subscription

🤞 Don’t miss any update!

We don’t spam! Read more in our privacy policy

Join our Telegram channel here - t.me/TechpadiAfrica

1 Comment

Leave a Reply