Open In App

PageView Widget in Flutter

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

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



Last Updated : 29 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads