What is PageView builder in flutter?

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.

import 'package:flutter/foundation.dart';

class Counter with ChangeNotifier {
 
  double x = 0.0; 

  void increase() {
    x = x + 1.0;
    notifyListeners();
  }
}

After that, we’ve used this line of code to watch the value from our data model.

double thisPage = context.watch<Counter>().x;

Now, if we run the app, what we do we see?

Next, we can swipe the page to see other pages as expected. However, we’ve declared the item count parameter to 4. And we have 4 pages to display.

In addition, we could have added a special effect while swiping the pages, with the help of Transform widget.

In that case, when we’ll swipe, it won’t swipe horizontally; instead it has a special scroll effect with the help of Transform widget.

Certainly we’ll learn more about this Transform widget in flutter and we’ll also see how we can use Transform widget with PageView.builder constructor.

So stay tuned.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter