How to implement pageview in Flutter.
Tags: flutter, android, techwithsam, beginners
Published: 2021-03-23 13:37:05

**Hello everyone and welcome to a brand new tutorial on Flutter. Today, we’re going to learn how to implement a customized PageView in our Flutter app.** 

If you want to know more about some cogent flutter Tricks and Tips and How to achieve tasks easily in Flutter, consider following me and sign up for the newsletter so you don’t miss any updates and also subscribe to my [YouTube Channel](https://www.youtube.com/c/TechWithSam?sub_confirmation=1). Thanks

### Let's get started


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.
{% youtube J1gE9xvph-A %}


This video showed you the essence of what&nbsp;<code>PageView</code>&nbsp;does. This article will fill out the code for you to play with. Scroll down to the end to get the full code demo.

A 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 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, PageController 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

A PageView is a widget that generates [scrollable](https://docs.flutter.io/flutter/widgets/Scrollable-class.html) 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 produces the below screen 👇

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kc6uek0quwejdhsbmdn.png)

### PageView.builder
This constructor takes an item builder 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:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/poaqi8asuhcrq7l86o9v.png)


## 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 childrenDelegate function similar to ListView.builder.
PageView.custom is more explained with examples in the source code. 

## Customized PageView

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc85grbx36tixy3w2fnh.png)

And that's all the major stuff you need 👌, I hope you have learned something, kindly appreciate this article by sharing it, and feel free to ask a question. Thanks for reading

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

{% github techwithsam/PageView-Flutter %}

I hope you have learned one thing or the other, kindly give this article much appreciation you want if you enjoy it, feel free to ask a question and leave a comment if you feel like it 🤭. Thanks for reading and see you in the next series.

🔗 Let's Connect 🔗 ==> [Github](https://github.com/techwithsam) | [Twitter](https://twitter.com/techwithsam_) | [Youtube](https://www.youtube.com/c/TechWithSam?sub_confirmation=1) | [WhatsApp](https://wa.me/message/JLGQNNTPG64IH1) | [LinkedIn](https://linkedin.com/in/techwithsam) | [Patreon](https://www.patreon.com/acctgen1) | [Facebook](https://facebook.com/techwithsam).

Join the Flutter Dev Community 👨‍💻👨‍💻 ==> [Facebook](https://www.facebook.com/groups/flutterdevsgroup/) | [Telegram](https://t.me/flutterdevsgroup) | [WhatsApp](https://chat.whatsapp.com/Cns1jo7dc5dCNrg6aG44My) | [Signal](https://signal.group/#CjQKILccbSu9GnMF_qVrkdCFVQ_i2gmnigPDvweCy86JGpL3EhBg39kp1rftGQgZDYXLty7t).


Subscribe to my [Telegram channel](https://t.me/acctgen) | [Youtube channel](https://www.youtube.com/c/TechWithSam?sub_confirmation=1). Thanks

**Happy Fluttering** 🥰👨‍💻