PageView Widget in Flutter

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.
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})
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:
If the properties are changed as below in the above example:
scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
controller: controller,
It will result in the following:
For the complete code, you can refer to https://github.com/singhteekam/Flutter-PageView-Example
ankit_kumar_
Flutter
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Stack Widget
Dart Tutorial
Flutter - Search Bar
Operators in Dart
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Flutter - Dialogs
Flutter - ListTile Widget