Анимация играет жизненно важную роль в улучшении пользовательского опыта в мобильных приложениях. Flutter, популярный кроссплатформенный фреймворк, предоставляет широкий спектр возможностей анимации. В этой статье мы рассмотрим различные методы анимации высоты виджетов во Flutter. Каждый метод будет сопровождаться примерами кода, которые помогут вам лучше понять реализацию.

Метод 1: AnimatedContainer
Виджет AnimatedContainer во Flutter предоставляет простой способ анимации высоты контейнера. Вы можете определить желаемое значение высоты, а также указать продолжительность и кривую анимации.

double _containerHeight = 100.0;
AnimatedContainer(
  height: _containerHeight,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  child: Container(
    // Container contents
  ),
)

Метод 2: AnimatedSize
Виджет AnimatedSize автоматически анимирует свой размер при каждом изменении размера дочернего элемента. Обертывая виджет AnimatedSize, вы можете анимировать его высоту в зависимости от высоты его дочернего элемента.

double _childHeight = 100.0;
AnimatedSize(
  vsync: this,
  duration: Duration(milliseconds: 500),
  child: Container(
    height: _childHeight,
    // Container contents
  ),
)

Метод 3: AnimatedBuilder
Виджет AnimatedBuilder позволяет создавать собственные анимации, предоставляя функцию конструктора. Используя AnimationController и Tween, вы можете анимировать высоту виджета в функции компоновщика.

AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
  super.initState();
  _controller = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 500),
  );
  _animation = Tween<double>(begin: 100.0, end: 200.0).animate(_controller);
  _controller.forward();
}
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}
AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Container(
      height: _animation.value,
      // Container contents
    );
  },
)

Метод 4: пользовательская анимация с помощью AnimatedWidget
Если вам нужно выполнить более сложную анимацию, вы можете создать собственный AnimatedWidget. Такой подход позволяет инкапсулировать логику анимации в отдельный виджет.

class HeightAnimation extends AnimatedWidget {
  const HeightAnimation({
    Key key,
    Animation<double> animation,
    this.child,
  }) : super(key: key, listenable: animation);
  final Widget child;
  @override
  Widget build(BuildContext context) {
    Animation<double> animation = listenable;
    return Container(
      height: animation.value,
      child: child,
    );
  }
}
// Usage
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
  super.initState();
  _controller = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 500),
  );
  _animation = Tween<double>(begin: 100.0, end: 200.0).animate(_controller);
  _controller.forward();
}
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}
HeightAnimation(
  animation: _animation,
  child: Container(
    // Container contents
  ),
)

В этой статье мы рассмотрели различные методы анимации высоты виджетов во Flutter. Мы рассмотрели подходы AnimatedContainer, AnimatedSize, AnimatedBuilder и пользовательские AnimatedWidget, каждый из которых снабжен примерами кода для облегчения реализации. Используя эти методы анимации, вы можете создавать динамичные и привлекательные элементы пользовательского интерфейса в своих приложениях Flutter.

Не забудьте настроить продолжительность анимации, кривую и высоту цели в соответствии с вашими конкретными потребностями. Удачи в изучении мира анимации Flutter!