🧩AnimatedContainer

Анимированное изменение размера, цвета и положения.

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

Пример использования AnimatedContainer

Допустим, мы создаем квадратный контейнер, который при нажатии увеличивается в размерах, меняет цвет и закругляется. В исходном состоянии он синий, а при нажатии становится зеленым, увеличивается и получает закругленные углы.

import 'package:flutter/material.dart';

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  double _width = 100;
  double _height = 100;
  Color _color = Colors.blue;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  void _changeContainer() {
    setState(() {
      _width = _width == 100 ? 200 : 100;
      _height = _height == 100 ? 200 : 100;
      _color = _color == Colors.blue ? Colors.green : Colors.blue;
      _borderRadius = _borderRadius == BorderRadius.circular(8)
          ? BorderRadius.circular(50)
          : BorderRadius.circular(8);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedContainer Example')),
      body: Center(
        child: GestureDetector(
          onTap: _changeContainer,
          child: AnimatedContainer(
            duration: Duration(seconds: 1), // Пример: длительность анимации
            curve: Curves.easeInOut,       // Пример: кривая анимации
            width: _width,                 // Пример: ширина контейнера
            height: _height,               // Пример: высота контейнера
            decoration: BoxDecoration(
              color: _color,               // Пример: цвет контейнера
              borderRadius: _borderRadius, // Пример: радиус границ
            ),
          ),
        ),
      ),
    );
  }
}

Как работает код

1. Начальные значения — заданы для ширины, высоты, цвета и закругленных углов контейнера.

2. Функция _changeContainer — срабатывает при нажатии и изменяет ширину, высоту, цвет и радиус границ.

3. AnimatedContainer — при изменении любого из свойств (width, height, color, borderRadius) контейнер анимируется, плавно переходя к новым значениям. Параметры duration и curve управляют длительностью и характером этой анимации.

Основные настройки AnimatedContainer

1. duration

   • Описание: Время, за которое произойдет анимация.

   • Пример:

     duration: Duration(seconds: 1)

   • Применение: Обязательный параметр, определяющий длительность перехода между состояниями.

2. curve

   • Описание: Тип или стиль анимации (плавное начало и конец, быстрое начало и т. д.).

   • Пример:

     curve: Curves.easeInOut

   • Применение: Определяет плавность или резкость анимации.

3. width и height

   • Описание: Устанавливают размеры контейнера.

   • Пример:

     width: 100,
     height: 100

   • Применение: Плавное изменение размера контейнера при обновлении значений.

4. color

   • Описание: Задает цвет контейнера.

   • Пример:

     color: Colors.blue

   • Применение: Позволяет плавно переходить от одного цвета к другому.

5. alignment

   • Описание: Выравнивает содержимое внутри контейнера.

   • Пример:

     alignment: Alignment.center

   • Применение: При изменении выравнивания содержимое перемещается плавно.

6. padding

   • Описание: Отступ внутри контейнера вокруг содержимого.

   • Пример:

     padding: EdgeInsets.all(10)

   • Применение: Плавное добавление или изменение отступов внутри контейнера.

7. margin

   • Описание: Внешний отступ контейнера.

   • Пример:

     margin: EdgeInsets.symmetric(horizontal: 10)

   • Применение: Меняет расстояние между контейнером и другими элементами.

8. decoration

   • Описание: Позволяет настроить фон, границы, закругление и тени.

   • Пример:

     decoration: BoxDecoration(
       color: Colors.green,
       borderRadius: BorderRadius.circular(20),
     )

   • Применение: Меняет фон, границы и тени контейнера, анимация применяется ко всем изменениям.

9. constraints

   • Описание: Минимальные и максимальные размеры контейнера.

   • Пример:

     constraints: BoxConstraints(minWidth: 50, maxWidth: 150)

   • Применение: Контейнер анимирует переход в пределах указанных размеров.

10. transform

    • Описание: Поворот, масштаб или смещение контейнера.

    • Пример:

      transform: Matrix4.rotationZ(0.1)

    • Применение: Создание простых эффектов поворота или изменения масштаба с анимацией.

Итог

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