Photo by Egzon Muliqi on Unsplash

PageView belongs to the Scrolling widgets. If you're interested please read the related posts on Scrolling widgets. In this series we've already written about CustomScrollView and NestedScrollView.

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.

Certainly, in some scenario, CustomScrollView or NestedScrollView works better than PageView. Therefore, we must take that into account and remember that the opposite is also true.

Besides, we need to understand Slivers. And, of course, some scrolling widgets use slivers in more efficient way.

Anyway, in this article, we'll cover the very basic concepts of PageView. And after that, in our next article, we'll cover more advanced features of PageView widget.

Firstly, page view widget is a scrollable list of pages, as the name suggests. Either vertically, or horizontally, we can view either infinite number of pages, or a fixed list of pages.

However, in most cases, we don't want infinite pages. And in this case, we have a simple code snippet that a beginner can understand. So let's see that first. Secondly, we'll discuss the code and see the screenshots also. And, finally, we'll take a look at how we can learn further.

import 'package:flutter/material.dart';  class PageViewSampleSimple extends StatelessWidget {   const PageViewSampleSimple({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: PageViewSampleSimpleHome(),     );   } }  class PageViewSampleSimpleHome extends StatelessWidget {   const PageViewSampleSimpleHome({Key? key}) : super(key: key);    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: const Text('PageView Simple Sample'),       ),       body: PageView(         scrollDirection: Axis.vertical,         children: <Widget>[           Container(             color: Colors.green,             child: const Text(               'Page One',               style: TextStyle(                 fontFamily: 'Allison',                 fontSize: 60,                 fontWeight: FontWeight.bold,               ),             ),           ),           Container(             color: Colors.yellow,             child: const Text(               'Page Two',               style: TextStyle(                 fontFamily: 'Allison',                 fontSize: 60,                 fontWeight: FontWeight.bold,               ),             ),           ),           Container(             color: Colors.deepPurple,             child: const Text(               'Page Three',               style: TextStyle(                 fontFamily: 'Allison',                 fontSize: 60,                 fontWeight: FontWeight.bold,               ),             ),           ),         ],       ),     );   } }

The code snippet shows, we have three pages as children. By default, each child is forced to be the same size as the viewport.

Our code shows that each child is a container filled with different colour.

The first page is Green.

PageView in flutter page one
PageView in flutter page one

Now, we can control the scroll direction and in our case, we've instructed that parameter to scroll vertically.

 scrollDirection: Axis.vertical,

As a result, we can swipe our flutter app upwards and the second page slowly comes to take the centre stage. This page is yellow.

PageView in flutter page two
PageView in flutter page two

Let's scroll up more to find out the third page, which is deep purple.

PageView in flutter page three
PageView in flutter page three

Most importantly, this combination of code and images is pretty basic. But we've certainly understood the basic principle of PageView widget.

For further reading, please visit my website:

How to use PageView in Flutter

 This free site is ad-supported. Learn more
​