🧩AnimatedAlign

Что такое AnimatedAlign

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

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

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

import 'package:flutter/material.dart';

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

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

class _AnimatedAlignExampleState extends State<AnimatedAlignExample> {
  Alignment _alignment = Alignment.center;

  void _changeAlignment() {
    setState(() {
      _alignment = _alignment == Alignment.center
          ? Alignment.topRight
          : Alignment.center;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedAlign Example')),
      body: Stack(
        children: [
          AnimatedAlign(
            alignment: _alignment,               // Пример: выравнивание элемента
            duration: const Duration(seconds: 1),      // Пример: длительность анимации
            curve: Curves.easeInOut,             // Пример: кривая анимации
            child: Container(
              width: 50,
              height: 50,
              color: Colors.red,
            ),
          ),
          Positioned(
            bottom: 30,
            left: 20,
            child: ElevatedButton(
              onPressed: _changeAlignment,
              child: const Text('Move Square'),
            ),
          ),
        ],
      ),
    );
  }
}

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

1. Начальное выравнивание — _alignment установлено как Alignment.center, чтобы квадрат находился в центре экрана.

2. Функция _changeAlignment — срабатывает при нажатии на кнопку, и изменяет _alignment на Alignment.topRight, чтобы переместить квадрат в верхний правый угол.

3. AnimatedAlign — при изменении значения alignment виджет плавно перемещает квадрат из одного места в другое в течение времени, указанного в duration, с плавностью, заданной в curve.

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

1. alignment

   • Описание: Указывает положение элемента внутри контейнера. Например, Alignment.topRight переместит элемент в верхний правый угол.

   • Пример:

     alignment: Alignment.bottomLeft

   • Применение: Плавное изменение позиции элемента при изменении значения.

2. duration

   • Описание: Длительность анимации перемещения.

   • Пример:

     duration: Duration(seconds: 1)

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

3. curve

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

   • Пример:

     curve: Curves.easeInOut

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

Итог

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