Как создать такую анимацию в flutter правильно?

Для создания анимаций в Flutter можно использовать различные подходы и инструменты. Один из наиболее распространенных способов - использование класса AnimationController в сочетании с классом Tween.

AnimationController представляет собой объект, который управляет ходом анимации, его продолжительностью, скоростью и другими параметрами. Tween, с другой стороны, определяет начальное и конечное состояние значения, которое будет анимироваться.

Для создания анимации с использованием AnimationController и Tween необходимо выполнить следующие шаги:

  1. Создать экземпляр AnimationController и определить его параметры, такие как длительность анимации, начальное и конечное состояние значения:
AnimationController _controller = AnimationController(
  duration: Duration(seconds: 2),
  vsync: this,
);

Здесь duration - это длительность анимации, vsync - объект, который указывает анимации о приостановке, когда виджет, содержащий анимацию, не находится на экране (обычно это State объект или TickerProvider).

  1. Создать Tween с начальным и конечным состоянием значения. Например, если вы хотите анимировать свойство ширины контейнера от 100 до 300 пикселей:
Tween<double> _widthTween = Tween<double>(begin: 100, end: 300);

Здесь begin и end - начальное и конечное значения, которые задаются для свойства, которое вы хотите анимировать.

  1. Привязать Tween к AnimationController и получить текущее значение анимации через анимационный объект:
Animation<double> _animation = _widthTween.animate(_controller);
  1. Начать анимацию:
_controller.forward();

Этот метод запускает анимацию вперед от начального состояния до конечного состояния.

  1. Использовать значение анимации в вашем виджете, чтобы изменить свойства, например, ширину контейнера:
Container(
  width: _animation.value,
  height: 100,
  color: Colors.blue,
),

Здесь значение анимации используется для изменения ширины контейнера при каждом обновлении виджета.

  1. Остановить анимацию при необходимости:
_controller.stop();

Вышеуказанный подход представляет собой базовый способ создания анимаций в Flutter с использованием AnimationController и Tween. Однако Flutter предоставляет и другие возможности и инструменты для более сложных и кастомных анимаций, такие как анимированные виджеты и анимационные кривые.