How to create animated pageview in flutter? - flutter

Question

enter image description here
How to create curve page animation page view in flutter

Answer 1

create a pageview controller with an integer variable for the index in your stateful widget
and then initial them like this
PageController pageController;
int currentPageIndex = 0;
#override
void initState() {
super.initState();
pageController = PageController(initialPage: currentPage);
}
then you can use them in your PageView widget with your custom pages
PageView(
controller: pageController,
children: [
Container(
color: Colors.yellow,
),
Container(
color: Colors.red,
),
Container(
color: Colors.blue,
),
],
onPageChanged: (index) {
setState(() {
currentPageIndex = index;
});
},
)

Answer 2

Try This Code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
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.red),
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("Animation"),
),
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),
],
),
);
}
Here is video