PageView Widget in Flutter

Last Updated : 29 Nov, 2020

The PageView widget allows the user to transition between different screens in their flutter application. All you need to set it up are a PageViewController and a PageView.

Constructor of PageView class:

Syntax:
PageView({Key key, 
Axis scrollDirection, 
bool reverse, 
PageController controller, 
ScrollPhysics physics, 
bool pageSnapping, 
void Function(int) onPageChanged, 
List<Widget> children, 
DragStartBehavior dragStartBehavior, 
bool allowImplicitScrolling})

Properties of Pageview Widget:

scrollDirection: It sets the axis of scrolling (Vertical or horizontal).
reverse: It defines the scrolling direction. By default, it is set to false.
controller: It is used to control the pages.
physics: It sets the animation of page after stopped dragging.
onPageChanged: This is called when page change occurs.
children: It displays the list of widgets.
allowImplicitScrolling: This property takes in a boolean value as the object. It controls whether to allocate implicit scrolling to the widget's page.
childDelegate: SliverChildDelegate class is the object given to this property. It provides children widgets to PageView widget.
clipBehaviour: This property takes in Clip enum as the object. It controls whether the content inside the PageView widget will be clipped or not.
dragStartBehaviour: This property holds DragStartBehavior enum (final) as the object. It controls the way in which the drag behaviour will start to be registered.
pageSnapping: It takes a boolean value to determine whether the page snapping will be on or of for PageView widget.
restoralionID: The restorationID takes in a string as the object. It is used to save the scroll position and later restore it.
scrollDirection: This property holds Axis enum as the object to decide the scroll axis of the PageView which can be either vertical or horizontal.

Example:

The main.dart file.

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageView',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

   PageController controller=PageController();
  List<Widget> _list=<Widget>[
    new Center(child:new Pages(text: "Page 1",)),
    new Center(child:new Pages(text: "Page 2",)),
    new Center(child:new Pages(text: "Page 3",)),
    new Center(child:new Pages(text: "Page 4",))
  ];
  int _curr=0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar:AppBar(
        title: Text("GeeksforGeeks"),
        backgroundColor: Colors.green,
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.all(3.0),
            child: Text(
              "Page: "+(
                _curr+1).toString()+"/"+_list.length.toString(),textScaleFactor: 2,),
          )
        ],),
      body: PageView(
        children: 
          _list,
          scrollDirection: Axis.horizontal,
        
          // reverse: true,
          // physics: BouncingScrollPhysics(),
          controller: controller,
          onPageChanged: (num){
          setState(() {
            _curr=num;
          });
        },
      ),
      floatingActionButton:Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children:<Widget>[
          FloatingActionButton(
            onPressed: () {      
              setState(() {
               _list.add(
                new Center(child: new Text(
                  "New page", style: new TextStyle(fontSize: 35.0))),
              );   
              });
              if(_curr!=_list.length-1)
                controller.jumpToPage(_curr+1);
                else
                controller.jumpToPage(0);
            },
      child:Icon(Icons.add)),
      FloatingActionButton(
        onPressed: (){
          _list.removeAt(_curr);
          setState(() {
            controller.jumpToPage(_curr-1);
          });
        },
      child:Icon(Icons.delete)),
        ]
      )
    );
  }
}

class Pages extends StatelessWidget {
  final text;
  Pages({this.text});
  @override
  Widget build(BuildContext context) {
   return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
          Text(text,textAlign: TextAlign.center,style: TextStyle(
            fontSize: 30,fontWeight:FontWeight.bold),),      
        ]
      ),
    );
  }
}

We have set the following parameters in the above example:

scrollDirection: Axis.horizontal,
controller: controller,

Output:

If the properties are changed as below in the above example:

scrollDirection: Axis.horizontal,
reverse: true,
physics: BouncingScrollPhysics(),
controller: controller,

It will result in the following:

pageview widget with horizontal axis and controller

If the properties are changed as below in the above example:

scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
controller: controller,

It will result in the following:

pageview widget with vertical axis and controller

For the complete code, you can refer to https://github.com/singhteekam/Flutter-PageView-Example

Flutter - Signature View Widget

singh_teekam

Improve

Article Tags :

Dart
Flutter

PageView Widget in Flutter

Constructor of PageView class:

Properties of Pageview Widget:

Similar Reads

Thank You!

What kind of Experience do you want to share?