🧩AnimatedCrossFade

Что такое AnimatedCrossFade

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

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

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

import 'package:flutter/material.dart';

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

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

class _AnimatedCrossFadeExampleState extends State<AnimatedCrossFadeExample> {
  bool _showFirst = true;

  void _toggleFade() {
    setState(() {
      _showFirst = !_showFirst;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedCrossFade Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedCrossFade(
              firstChild: Image.network(               // Пример: первый элемент для показа
                'https://i.postimg.cc/nLqtWXht/1.png',
                width: 150,
              ),
              secondChild: Image.network(              // Пример: второй элемент для показа
                'https://i.postimg.cc/J0DxTkRN/2.png',
                width: 150,
              ),
              crossFadeState: _showFirst               // Пример: состояние кросс-фейда
                  ? CrossFadeState.showFirst
                  : CrossFadeState.showSecond,
              duration: const Duration(seconds: 1),          // Пример: длительность анимации
              layoutBuilder: (topChild, topKey, bottomChild, bottomKey) {
                return Stack(                          // Пример: кастомная компоновка
                  alignment: Alignment.center,
                  children: [
                    Positioned(key: bottomKey, child: bottomChild),
                    Positioned(key: topKey, child: topChild),
                  ],
                );
              },
              sizeCurve: Curves.easeInOut,             // Пример: кривая анимации изменения размера
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleFade,
              child: const Text('Toggle CrossFade'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  1. Начальное состояние — _showFirst установлено как true, что делает видимым первый элемент (firstChild).

  2. Функция _toggleFade — срабатывает при нажатии кнопки, меняет _showFirst на противоположное значение, переключая видимый элемент на другой.

  3. AnimatedCrossFade — отображает firstChild или secondChild в зависимости от состояния crossFadeState. Когда состояние меняется, анимация перекрестного затемнения плавно сменяет один элемент на другой, используя duration для продолжительности и sizeCurve для плавности изменения размера.

Все настройки AnimatedCrossFade

  1. firstChild

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

    • Пример:

      firstChild: Text('First Child')

    • Применение: Определяет, какой элемент показывается первым.

  2. secondChild

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

    • Пример:

      secondChild: Text('Second Child')

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

  3. crossFadeState

    • Описание: Указывает, какой виджет отображается: CrossFadeState.showFirst или CrossFadeState.showSecond.

    • Пример:

      crossFadeState: CrossFadeState.showFirst

    • Применение: Переключает видимость между firstChild и secondChild.

  4. duration

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

    • Пример:

      duration: Duration(seconds: 1)

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

  5. sizeCurve

    • Описание: Кривая анимации, определяющая плавность изменения размера виджета.

    • Пример:

      sizeCurve: Curves.easeInOut

    • Применение: Настраивает поведение изменения размера при переходе между элементами.

  6. layoutBuilder

    • Описание: Функция, определяющая, как оба элемента будут располагаться друг относительно друга.

    • Пример:

      layoutBuilder: (topChild, topKey, bottomChild, bottomKey) {
  return Stack(
    alignment: Alignment.center,
    children: [
      Positioned(key: bottomKey, child: bottomChild),
      Positioned(key: topKey, child: topChild),
    ],
  );
}

    • Применение: Используется для создания пользовательской компоновки, чтобы настроить поведение виджетов во время перехода.

Итог

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

PreviousAnimatedAlignNextHero

Last updated