Photo by Afdhal N. on Unsplash

We've been doing a series of articles on Scrolling Widgets. As a result, we've already written an article on PageView. However, PageView has two other constructors that are also important and demand a place in this Scrolling series.

As we've just said, PageView is just like any other Scrolling widgets, although this widget has its own pros and cons that include many amazing features. Moreover, it depends on how we'll use them.

However, PageView.builder constructor plays also a crucial role and acts differently than PageView. PageView.builder creates a scrollable list that works page by page using widgets.

When we need to show a large number of children, this PageView.builder constructor is incomparable. Moreover, the builder is called only for those children that are actually visible.

How much can we scroll?

With reference to that question, we can say PageView.builder controls that item count with the itemCount parameter. We cannot provide a null value.

As long as the indices are less than item count parameter, and greater than or equal to zero, PageView.builder constructor calls the parameter itemBuilder. We'll see that in a minute.

Before that, let's know a few other key information about PageView.builder constructor.

Firstly, by default, PageView.builder doesn't support child reordering. We can use either use PageView or PageView.custom constructor to do that.

Secondly, PageView.builder doesn't allow null value for the allowImplicitScrolling parameter.

Since PageView.builder is a constructor of PageView, which has StatefulWidget as its immediate ancestor, therefore, PageView.builder effects are not going to work with Stateless widget. Although we can always experiment with the Provider package.

Certainly, we can start with a stateless widget first and our code snippet is like the following one.

import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import '/models/counter.dart';  class PageViewBuilderSimple extends StatelessWidget {   const PageViewBuilderSimple({Key? key}) : super(key: key);    static const String _title = 'PageView Simple Sample';    @override   Widget build(BuildContext context) {     return const MaterialApp(       debugShowCheckedModeBanner: false,       title: _title,       home: PageViewBuilderHome(),     );   } }  class PageViewBuilderHome extends StatelessWidget {   const PageViewBuilderHome({Key? key}) : super(key: key);    @override   Widget build(BuildContext context) {     double thisPage = context.watch<Counter>().x;     return Scaffold(       appBar: AppBar(         title: const Text('PageView Simple Sample'),       ),       body: PageView.builder(         itemCount: 4,         itemBuilder: (context, position) {           Color color;           if (position == thisPage.floor()) {             color = Colors.pinkAccent;             return Container(               color: color,               child: const Text(                 "First Page",                 style: TextStyle(                   color: Colors.white,                   fontSize: 120.0,                   fontFamily: 'Allison',                 ),               ),             );           } else if (position == thisPage.floor() + 1) {             color = Colors.blueAccent;             return Container(               color: color,               child: const Text(                 "Second Page",                 style: TextStyle(                   color: Colors.white,                   fontSize: 120.0,                   fontFamily: 'Allison',                 ),               ),             );           } else if (position == thisPage.floor() + 2) {             color = Colors.deepOrangeAccent;             return Container(               color: color,               child: const Text(                 "Third Page",                 style: TextStyle(                   color: Colors.white,                   fontSize: 120.0,                   fontFamily: 'Allison',                 ),               ),             );           } else {             color = Colors.greenAccent;             return Container(               color: color,               child: const Text(                 "Fourth Page",                 style: TextStyle(                   color: Colors.white,                   fontSize: 120.0,                   fontFamily: 'Allison',                 ),               ),             );           }         },       ),     );   } }

Before we run the code, let's understand that we have used provider package and using a data model where we've declared our current page double value equal to 0.0.

Further reading >>

What is PageView builder in flutter?

 This free site is ad-supported. Learn more
​