🧩AnimatedPositioned

Что такое AnimatedPositioned

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

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

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

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.

   • Пример:

     left: _isMoved ? 200 : 50

   • Применение: Используются для задания начального и конечного положения.

2. width и height

   • Описание: Определяют ширину и высоту виджета. Эти параметры также можно анимировать.

   • Пример:

     width: _isMoved ? 150 : 100,
     height: _isMoved ? 150 : 100,

   • Применение: Полезны, когда нужно изменить размеры виджета вместе с его позицией.

3. duration

   • Описание: Задает время, за которое виджет перемещается в новое положение.

   • Пример:

     duration: Duration(seconds: 1)

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

4. curve

   • Описание: Определяет кривую анимации, которая влияет на стиль движения (например, плавный или резкий переход).

   • Пример:

     curve: Curves.easeInOut

   • Применение: Делает анимацию более естественной за счет выбора разных эффектов, таких как линейный или ускоренный переход.

5. child

   • Описание: Виджет, который находится внутри AnimatedPositioned и для которого анимируется положение.

   • Пример:

     child: Container(
       width: 100,
       height: 100,
       color: Colors.blue,
     )

   • Применение: Это анимируемый элемент, будь то контейнер, изображение или другой виджет.

Итог

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