PageView Widget in Flutter

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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),),     
        ]
      ),
    );
  }
}

chevron_right


We have set the following parameters in the above example:



scrollDirection: Axis.horizontal,
controller: controller,

Output:

pageview widget with horizontal axis

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




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_

Article Tags :

6


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.