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:
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