# AnimatedPositioned

#### Что такое `AnimatedPositioned`

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

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

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

<div align="left"><figure><img src="https://i.postimg.cc/Vv619BKg/animated-positioned-ezgif-com-video-to-gif-converter.gif" alt="" width="188"><figcaption></figcaption></figure></div>

```dart
import 'package:flutter/material.dart';


class AnimatedPositionedExample extends StatefulWidget {
  const AnimatedPositionedExample({super.key});

  @override
  _AnimatedPositionedExampleState createState() => _AnimatedPositionedExampleState();
}

class _AnimatedPositionedExampleState extends State<AnimatedPositionedExample> {
  bool _isMoved = false;

  void _togglePosition() {
    setState(() {
      _isMoved = !_isMoved;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedPositioned Example')),
      body: Stack(
        children: [
          AnimatedPositioned(
            duration: const Duration(seconds: 1),        // Пример: длительность анимации
            curve: Curves.easeInOut,               // Пример: кривая анимации
            left: _isMoved ? 200 : 50,             // Положение слева
            top: _isMoved ? 400 : 100,             // Положение сверху
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePosition,
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}
            
```

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

1. **Создание состояния `_isMoved`** — переменная, которая определяет текущее положение контейнера. При нажатии кнопки состояние изменяется, и квадрат переходит на новую позицию.
2. **AnimatedPositioned** — размещен внутри `Stack` и использует `left` и `top` для задания положения контейнера. При изменении `_isMoved` значение этих параметров изменяется, вызывая анимацию перехода.
3. **duration и curve** — задают скорость и стиль анимации (в нашем случае 1 секунда и плавный переход с эффектом `easeInOut`).

#### Все настройки AnimatedPositioned

1. **left, right, top, bottom**
   * **Описание**: Определяют позицию виджета относительно краев контейнера `Stack`.
   *   **Пример**:

       ```dart
       left: _isMoved ? 200 : 50
       ```
   * **Применение**: Используются для задания начального и конечного положения.
2. **width и height**
   * **Описание**: Определяют ширину и высоту виджета. Эти параметры также можно анимировать.
   *   **Пример**:

       ```dart
       width: _isMoved ? 150 : 100,
       height: _isMoved ? 150 : 100,
       ```
   * **Применение**: Полезны, когда нужно изменить размеры виджета вместе с его позицией.
3. **duration**
   * **Описание**: Задает время, за которое виджет перемещается в новое положение.
   *   **Пример**:

       ```dart
       duration: Duration(seconds: 1)
       ```
   * **Применение**: Определяет длительность анимации, влияя на скорость перехода.
4. **curve**
   * **Описание**: Определяет кривую анимации, которая влияет на стиль движения (например, плавный или резкий переход).
   *   **Пример**:

       ```dart
       curve: Curves.easeInOut
       ```
   * **Применение**: Делает анимацию более естественной за счет выбора разных эффектов, таких как линейный или ускоренный переход.
5. **child**
   * **Описание**: Виджет, который находится внутри `AnimatedPositioned` и для которого анимируется положение.
   *   **Пример**:

       ```dart
       child: Container(
         width: 100,
         height: 100,
         color: Colors.blue,
       )
       ```
   * **Применение**: Это анимируемый элемент, будь то контейнер, изображение или другой виджет.

#### Итог

`AnimatedPositioned` — простой и мощный способ анимировать изменения позиции и размеров элементов в `Stack`. Это отличный способ добавить интерактивности, улучшив пользовательский опыт за счет плавных перемещений элементов.
