Что эквивалентно анимации кругового раскрытия во Флаттере?

Question

Мне было интересно, как реализовать анимацию кругового раскрытия с Android во Flutter. Также есть какой-нибудь ресурс для примеров, касающихся анимации Flutter?

Answer 1

Для раскрытия эффекта вы должны использовать CustomPainter класс.

class RevealProgressButtonPainter extends CustomPainter {
  double _fraction = 0.0;
  Size _screenSize;

  RevealProgressButtonPainter(this._fraction, this._screenSize);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;

    var finalRadius =
        sqrt(pow(_screenSize.width / 2, 2) + pow(_screenSize.height / 2, 2));
    var radius = 24.0 + finalRadius * _fraction;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), radius, paint);
  }

  @override
  bool shouldRepaint(RevealProgressButtonPainter oldDelegate) {
    return oldDelegate._fraction != _fraction;
  }
}

Вы можете прочитать это потрясающее руководство по эффекту кругового раскрытия. для получения подробной информации.

Код Github

Выполняя эффект раскрытия, вы должны плавно открыть второй экран. Для этого используйте Fluro библиотека для маршрутизации и навигации. Это предоставит вам типы переходов.

router.navigateTo(context, "/profile_screen",transition: TransitionType.fadeIn,);