Блог

В Flutter , я нашел много анимаций для PageView детей, но я не могу найти ни одной библиотеки для реализации видео ниже в flutter.

Вы можете посмотреть простое видео по этой ссылке

Какую библиотеку я могу использовать для достижения этой цели?

Я добавляю пример… это работа .. когда пользователь начинает изменять страницу, страница уменьшается, а когда пользователь меняет страницу… масштабирование до 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],),
        );
      }),
    );
  }
}
  

Редактировать

Я добавляю анимацию в приведенный выше код

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

}
  

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

Вы можете играть с max(0.9, (1 - ((_pageController.page! - i).abs() / 2))) ними по своему вкусу.