What is PageView custom in flutter?

Since we’ve started writing on Scrolling widgets series, we’ve decided that we’ll cover PageView custom constructor in a separate article. As a result, in this article we’re going to learn what is PageView.custom constructor and, moreover, how we can use this PageView custom constructor in our flutter app.

More or less, as we progress, we’ll be going to find that PageView.custom constructor has many similarities with PageView.builder constructor. However, if they had shared the same features just like a clone, the flutter creators wouldn’t have created another constructor.

Therefore, they have differences and as well as they have some similarities.

Firstly, to be more precise, a PageView custom constructor creates a scrollable list of custom pages that a user can swipe and view. Secondly, with some tweak in our code, we can add some transforming effects to these pages. And finally, we can do so because PageView widgets has some parameters that are dedicated to help Transform widgets.

Now, a PageView custom constructor always allows us to create a child model that we can return as custom pages.

Therefore we can take a look at the full code snippet first.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '/models/counter.dart';

class PageViewCustomSimple extends StatelessWidget {
  const PageViewCustomSimple({Key? key}) : super(key: key);

  static const String _title = 'PageView Custom 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 Custom Sample'),
      ),
      body: PageView.custom(
        childrenDelegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            Color color;
            if (index == thisPage.floor()) {
              color = Colors.yellow;
              return Container(
                color: color,
                child: const Text(
                  "First Page",
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 120.0,
                    fontFamily: 'Allison',
                  ),
                ),
              );
            } else if (index == thisPage.floor() + 1) {
              color = Colors.purple;
              return Container(
                color: color,
                child: const Text(
                  "Second Page",
                  style: TextStyle(
                    color: Colors.yellow,
                    fontSize: 120.0,
                    fontFamily: 'Allison',
                  ),
                ),
              );
            } else if (index == thisPage.floor() + 2) {
              color = Colors.white;
              return Container(
                color: color,
                child: const Text(
                  "Third Page",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 120.0,
                    fontFamily: 'Allison',
                  ),
                ),
              );
            } else {
              color = Colors.black54;
              return Container(
                color: color,
                child: const Text(
                  "Fourth Page",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 120.0,
                    fontFamily: 'Allison',
                  ),
                ),
              );
            }
          },
          childCount: 4,
        ),
      ),
    );
  }
}

At the very end of our code, we find that childCount parameter is 4. PageView.custom constructor has a parameter called childrenDelegate. As the name suggests, we can pass a SliverChildBuilderDelegate class and supply children for slivers using a builder callback.

These children represent custom pages. And as a result, if a user swipes pages, she can view four custom pages in tow, following one another.

PageView custom constructor first page

PageView custom constructor second page

PageView custom constructor third page

PageView custom constructor fourth page

With reference to that, we can say that the child count could have been 10, instead of 4, and we could have made 10 pages.

Since in PageView custom constructor SliverChildBuilderDelegate class plays an important role and supplies children pages, so we can try to know this class closely.

Firstly, as the name points out quite precisely, this class belongs to flutter Slivers.

Secondly, it’s fun to note that the SliverChildBuilderDelegate delegate provides children in a succinct way. When the user swipes and decides to go from the first page to view the second page, in actuality, until the second page is not displayed fully, it is not built.

How does it happen? The SliverChildBuilderDelegate delegate uses NullableIndexedWidgetBuilder callback.

We don’t want to make the discussion more complex and scare the beginners. However, before closing down, let us know a few more important things about the PageView widget.

It has a parameter called allowImplicitScrolling. This parameter must not be null.