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