🧩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. Это отличный способ добавить интерактивности, улучшив пользовательский опыт за счет плавных перемещений элементов.

PreviousAnimatedBuilderNextAnimatedSwitcher

Last updated