Flutter scale-down and scale-up during switch between PageView children

Question

In Flutter, I found many animations for PageView children, but I can't find any library for implementing below video in flutter.

You can see a simple video on this link

Which library can I use to achieve that?

Answer 1

I add an Example ... this is Work .. when user starting to change page the page scaled down and when user Changed page ... scale to 1

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: MyHome(),
        ),
      ),
    );
  }
}
class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  PageController pc = PageController();
  int _current = 0;
  double lastOffset = 0;
  bool smaller = false;

  @override
  void initState() {
    super.initState();
    pc.addListener(() {

      if(pc.offset != lastOffset){
        setState(() {
          smaller = true;
        });
      }
      if(pc.offset % MediaQuery.of(context).size.width == 0){
        setState(() {
          smaller = false;
        });
        lastOffset = pc.offset;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: pc,
      onPageChanged:(value) {
        setState(() {
          _current = pc.page.round();
        });
      },
      children: List.generate(4, (index) {
        return Transform.scale(
          scale: smaller ? 0.9 : 1,
          child: Container(color: Colors.red[index*100 + 100],),
        );
      }),
    );
  }
}

Edit

I add animation to above code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: MyHome(),
        ),
      ),
    );
  }
}
class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with TickerProviderStateMixin{
  PageController pc = PageController();
  int _current = 0;
  double lastOffset = 0;
  bool smaller = false;

  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();


    _controller = AnimationController(
        duration: const Duration(milliseconds: 300), vsync: this,);
    _animation = Tween<double>(begin: 1 , end: 0.9).animate(CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn));


    pc.addListener(() {

      if(pc.offset != lastOffset){
        _controller.forward();
      }
      if(pc.offset % MediaQuery.of(context).size.width == 0){
        _controller.reverse();
        lastOffset = pc.offset;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: pc,
      onPageChanged:(value) {
        setState(() {
          _current = pc.page.round();
        });
      },
      children: List.generate(4, (index) {
        return ScaleTransition(
          scale: _animation,
          child: Container(color: Colors.red[index*100 + 100],),
        );
      }),
    );
  }

  @override

  dispose() {
    _controller.dispose();
    super.dispose();
  }

}

Answer 2

PageView(
  controller: _pageController,
  children: <AnimatedBuilder>[
    for (int i = 0; i < _numberOfYourChildren; i++)
      AnimatedBuilder(
          animation: _pageController,
          builder: (BuildContext context, Widget? child) {
            return Transform.scale(
              scale: _pageController.position.haveDimensions ? max(0.9, (1 - ((_pageController.page! - i).abs() / 2))) : 1.0,
              child: YourChild(),
            );
          }),
  ],
)

You can play with max(0.9, (1 - ((_pageController.page! - i).abs() / 2))) to your liking.