Trendlist: [New post] What is PageView in Flutter

Tuesday, November 30, 2021

[New post] What is PageView in Flutter

Respond to this post by replying above this line

What is PageView in Flutter

by Sanjib Sinha

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.