Skip to content
Related Articles

Related Articles

Page View Animation in Flutter

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 06 Apr, 2022

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.

Dart




// page controller instance 
PageController controller = PageController();

Creating a Variable currentPageValue used to set the number of the selected pages.

Dart




// 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.

Dart




controller.addListener(() {
        // setState method to 
        // rebuild the widget
      setState(() { 
        currentPageValue = controller.page;  
      });
  });

Create Page list content in a List Variable.

Dart




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. 

Dart




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

Dart




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 

Dart




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

Dart




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),
      ],
    ),
  );
}

Output


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!