Page View Animation in Flutter

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