Page View is a list that works page by page. In this article, we will gonna do How to Animate the Page when sliding. A sample video is given below to get an idea about what we are going to do in this article.
We will use the Transform widget to animate the page.
Syntax
Creating a Page controller that is used to control pages and listen to swipes.
// page controller instance PageController controller = PageController(); |
Creating a Variable currentPageValue used to set the number of the selected pages.
// variable to store // current value of page var currentPageValue = 0.0; |
Adding Listener to the controller to change the selected page index when the page is changed.
controller.addListener(() { // setState method to
// rebuild the widget
setState(() {
currentPageValue = controller.page;
});
});
|
Create Page list content in a List Variable.
List PageViewItem = [ // item1,item2,item3
] |
Create a sample Page, pageno, and color as parameters so that we can change every page’s text and color.
Widget page(var pageno, Color color) { return Container(
width: double .infinity,
height: double .infinity,
color: color,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.pages,
color: Colors.white,
),
Text( "${pageno}, Swipe Right or left" ),
Icon(Icons.arrow_right, color: Colors.white),
],
),
);
} |
Building the Page View
PageView.builder( itemCount: pageViewItem.length,
scrollDirection: Axis.horizontal,
controller: controller,
itemBuilder: (context, position) {
return Transform(
transform: Matrix4.identity()
..rotateX(currentPageValue - position),
child: pageViewItem[position],
);
}),
|
Note:
Position values goes between 0 1 2, currentPageValue value goes between 0 and 1 decimals.
Examples 0.255,1.897,2.232
Current Position value – position will return decimal numbers Between 0 and 1 negative rotate left, positive rotate right.
Code Examples
Animation using RotateX
import 'package:flutter/material.dart' ;
void main() {
runApp(PageviewAnimation());
} class PageviewAnimation extends StatefulWidget {
PageviewAnimation({Key? key}) : super(key: key);
@override
State<PageviewAnimation> createState() => _PageviewAnimationState();
} class _PageviewAnimationState extends State<PageviewAnimation> {
PageController controller = PageController();
static dynamic currentPageValue = 0.0;
List pageViewItem = [
page(currentPageValue, Colors.tealAccent),
page(2, Colors.amber),
page(3, Colors.cyan)
];
@override
void initState() {
super.initState();
controller.addListener(() {
setState(() {
currentPageValue = controller.page;
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( "Page View Animation 1" ),
),
body: PageView.builder(
itemCount: pageViewItem.length,
scrollDirection: Axis.horizontal,
controller: controller,
itemBuilder: (context, position) {
return Transform(
transform: Matrix4.identity()
..rotateX(currentPageValue - position),
child: pageViewItem[position],
);
}),
),
);
}
} Widget page(var pageno, Color color) { return Container(
width: double .infinity,
height: double .infinity,
color: color,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.pages,
color: Colors.white,
),
Text( "${pageno}, Swipe Right or left" ),
Icon(Icons.arrow_right, color: Colors.white),
],
),
);
} |
Output
Animation using RotateZ
import 'package:flutter/material.dart' ;
void main() {
runApp(PageviewAnimation());
class PageviewAnimation extends StatefulWidget {
PageviewAnimation({Key? key}) : super(key: key);
@override
State<PageviewAnimation> createState() => _PageviewAnimationState();
} class _PageviewAnimationState extends State<PageviewAnimation> {
PageController controller = PageController();
static dynamic currentPageValue = 0.0;
// list of pages
List pageViewItem = [
page(currentPageValue, Colors.tealAccent),
page(currentPageValue, Colors.amber),
page(currentPageValue, Colors.cyan)
];
@override
void initState() {
super.initState();
controller.addListener(() {
setState(() {
currentPageValue = controller.page;
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( "Page View Animation 1" ),
),
// PageView builder builds the page.
body: PageView.builder(
itemCount: pageViewItem.length,
scrollDirection: Axis.horizontal,
controller: controller,
itemBuilder: (context, position) {\
// Transform using for animation
return Transform(
transform: Matrix4.identity()
..rotateZ(currentPageValue - position),
child: pageViewItem[position],
);
}),
),
);
}
} // this widget makes the page Widget page(var pageno, Color color) { return Container(
width: double .infinity,
height: double .infinity,
color: color,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.pages,
color: Colors.white,
),
Text( "${pageno}, Swipe Right or left" ),
Icon(Icons.arrow_right, color: Colors.white),
],
),
);
} |