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

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

class RoundContainerAnimation extends StatefulWidget {
  @override
  _RoundContainerAnimationState createState() => _RoundContainerAnimationState();
}
class _RoundContainerAnimationState extends State<RoundContainerAnimation> {
  bool isExpanded = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isExpanded = !isExpanded;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        width: isExpanded ? 200 : 100,
        height: isExpanded ? 200 : 100,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: isExpanded ? BorderRadius.circular(100) : BorderRadius.circular(50),
        ),
      ),
    );
  }
}

Метод 2: пользовательская анимация с помощью AnimationController
Если вам требуется больший контроль над анимацией, вы можете использовать AnimationController для определения пользовательских анимаций. Этот метод позволяет создавать уникальные эффекты анимации, изменяя свойства контейнера с течением времени.

class RoundContainerAnimation extends StatefulWidget {
  @override
  _RoundContainerAnimationState createState() => _RoundContainerAnimationState();
}
class _RoundContainerAnimationState extends State<RoundContainerAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _sizeAnimation;
  bool isExpanded = false;
  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _sizeAnimation = Tween<double>(begin: 100, end: 200).animate(_animationController);
    super.initState();
  }
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (isExpanded) {
          _animationController.reverse();
        } else {
          _animationController.forward();
        }
        setState(() {
          isExpanded = !isExpanded;
        });
      },
      child: AnimatedBuilder(
        animation: _sizeAnimation,
        builder: (context, child) {
          return Container(
            width: _sizeAnimation.value,
            height: _sizeAnimation.value,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(_sizeAnimation.value / 2),
            ),
          );
        },
      ),
    );
  }
}

Метод 3: Flare-анимация
Другой способ добиться анимации круглого контейнера во Flutter — использовать Flare-анимацию. Flare — мощный инструмент векторной анимации, который позволяет создавать сложные анимации и легко интегрировать их в ваше приложение Flutter.

Сначала импортируйте пакет Flare_flutter в файл pubspec.yaml. Затем создайте FlareAnimationController для управления анимацией и используйте виджет FlareActor для ее отображения.

import 'package:flare_flutter/flare_actor.dart';
import 'package:flare_flutter/flare_controls.dart';
class RoundContainerAnimation extends StatefulWidget {
  @override
  _RoundContainerAnimationState createState() => _RoundContainerAnimationState();
}
class _RoundContainerAnimationState extends State<RoundContainerAnimation> {
  final FlareControls _flareControls = FlareControls();
  bool isExpanded = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isExpanded = !isExpanded;
          isExpanded ? _flareControls.play("expand") : _flareControls.play("collapse");
        });
      },
      child: FlareActor(
        "assets/container_animation.flr",
        controller: _flareControls,
        animation: "collapse",
      ),
    );
  }
}

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

Не забудьте поэкспериментировать с различными свойствами и методами анимации, чтобы создать уникальный и увлекательный пользовательский опыт!