How to create animated pageview in flutter?

RushikeshBhayani
January 31, 2023
174 views
0 votes
2 Answers

How to create curve page animation page view in flutter

Answers

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

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

Please signup or login to give your own answer.

Click here to cancel reply.