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

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

double _containerWidth = 100.0;
AnimatedContainer(
  width: _containerWidth,
  height: _containerWidth,
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  child: Container(color: Colors.blue),
)

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

double _containerWidth = 100.0;
AnimatedSize(
  vsync: this,
  duration: Duration(seconds: 1),
  child: Container(
    width: _containerWidth,
    height: _containerWidth,
    color: Colors.blue,
  ),
)

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

double _containerWidth = 100.0;
TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 100.0, end: _containerWidth),
  duration: Duration(seconds: 1),
  builder: (BuildContext context, double value, Widget child) {
    return Container(
      width: value,
      height: value,
      color: Colors.blue,
    );
  },
)

Метод 4: AnimatedBuilder
Виджет AnimatedBuilder позволяет создавать собственные анимации, прослушивая значения контроллера анимации. Прослушивая значения, связанные с размером, вы можете добиться анимации изменения размера. Вот пример:

double _containerWidth = 100.0;
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
  _controller = AnimationController(
    vsync: this,
    duration: Duration(seconds: 1),
  );
  _animation = Tween<double>(begin: 100.0, end: _containerWidth)
      .animate(_controller);
  super.initState();
}
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}
@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _animation,
    builder: (BuildContext context, Widget child) {
      return Container(
        width: _animation.value,
        height: _animation.value,
        color: Colors.blue,
      );
    },
  );
}

Метод 5: LayoutBuilder с setState
Используя виджет LayoutBuilder, вы можете измерить ограничения размера виджета и запустить перестройку с помощью метода setState для анимации изменения размера. Вот пример:

double _containerWidth = 100.0;
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _containerWidth = constraints.maxWidth == 100.0 ? 200.0 : 100.0;
        });
      },
      child: Container(
        width: _containerWidth,
        height: _containerWidth,
        color: Colors.blue,
      ),
    );
  },
)

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

double _containerWidth = 100.0;
class SizeAnimationController extends AnimationController {
  SizeAnimationController({
    required TickerProvider vsync,
    required this.containerWidth,
    Duration duration,
  }) : super(vsync: vsync, duration: duration);
  final double containerWidth;
}
SizeAnimationController _controller;
@override
void initState() {
  _controller = SizeAnimationController(
    vsync: this,
    containerWidth: _containerWidth,
    duration: Duration(seconds: 1),
  );
  super.initState();
}
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}
@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _controller,
    builder: (BuildContext context, Widget child) {
      return Container(
        width: _controller.containerWidth,
        height: _controller.containerWidth,
        color: Colors.blue,
      );
    },
  );
Method 7: Custom AnimatedWidget
Lastly, you can create a custom AnimatedWidget to encapsulate the size change animation logic. This allows for cleaner and more reusable code. Here's an example:
```dart
double _containerWidth = 100.0;

class SizeAnimation extends AnimatedWidget {
  SizeAnimation({
    Key key,
    Animation<double> animation,
  }) : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    Animation<double> animation = listenable;
    return Container(
      width: animation.value,
      height: animation.value,
      color: Colors.blue,
    );
  }
}

AnimationController _controller;
Animation<double> _animation;

@override
void initState() {
  _controller = AnimationController(
    vsync: this,
    duration: Duration(seconds: 1),
  );
  _animation = Tween<double>(begin: 100.0, end: _containerWidth)
      .animate(_controller);
  super.initState();
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return SizeAnimation(animation: _animation);
}

Анимация изменения размера во Flutter добавляет визуальной привлекательности и интерактивности вашему пользовательскому интерфейсу. В этой статье мы рассмотрели семь различных методов создания анимации изменения размера, включая AnimatedContainer, AnimatedSize, TweenAnimationBuilder, AnimatedBuilder, LayoutBuilder с setState, Custom AnimationController и Custom AnimatedWidget. Используя эти методы, вы можете создать динамичный и привлекательный пользовательский интерфейс в своих приложениях Flutter.