🧩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 — это удобный способ добавить анимацию к базовым изменениям свойств контейнера, таким как размер, цвет и границы. Он полезен для создания простых и плавных переходов, не требующих сложных анимационных контроллеров, и делает интерфейс приложения более живым и интерактивным.

PreviousАнимацииNextAnimatedOpacity

Last updated