🧩AnimatedSwitcher

Что такое AnimatedSwitcher

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

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

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

import 'package:flutter/material.dart';

class AnimatedSwitcherExample extends StatefulWidget {
  @override
  _AnimatedSwitcherExampleState createState() => _AnimatedSwitcherExampleState();
}

class _AnimatedSwitcherExampleState extends State<AnimatedSwitcherExample> {
  bool _showFirstText = true;

  void _toggleText() {
    setState(() {
      _showFirstText = !_showFirstText; // Меняем состояние
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedSwitcher Example')),
      body: Center(
        child: AnimatedSwitcher(
          duration: Duration(seconds: 1),          // Пример: длительность анимации
          transitionBuilder: (Widget child, Animation<double> animation) {
            return FadeTransition(                   // Пример: анимация затухания
              opacity: animation,
              child: child,
            );
          },
          child: Text(
            _showFirstText ? 'Hello, World!' : 'Goodbye, World!', // Переключаемый текст
            key: ValueKey<bool>(_showFirstText),    // Уникальный ключ для каждого текста
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleText,
        child: Icon(Icons.swap_horiz),
      ),
    );
  }
}

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

1. Состояние _showFirstText — булевый флаг, который определяет, какой текст отображается в данный момент. При нажатии кнопки его значение меняется.

2. AnimatedSwitcher — оборачивает текстовый виджет и автоматически управляет анимацией при замене текста. Когда состояние меняется, новый виджет анимируется с помощью заданной длительности.

3. transitionBuilder — здесь мы определяем, как будет выглядеть анимация. В данном случае используется FadeTransition, который делает текст плавно появляющимся и исчезающим.

4. key — каждый текст имеет уникальный ключ, что позволяет AnimatedSwitcher корректно отслеживать, какой виджет был заменен.

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

1. duration

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

   • Пример:

     duration: Duration(seconds: 1)

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

2. transitionBuilder

   • Описание: Функция, которая позволяет задать собственный эффект анимации для переключения. Она принимает дочерний виджет и анимацию.

   • Пример:

     transitionBuilder: (Widget child, Animation<double> animation) {
       return FadeTransition(
         opacity: animation,
         child: child,
       );
     }

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

3. child

   • Описание: Виджет, который будет анимирован. Когда вы меняете его, AnimatedSwitcher запускает анимацию.

   • Пример:

     child: Text(
       _showFirstText ? 'Hello, World!' : 'Goodbye, World!',
       key: ValueKey<bool>(_showFirstText),
       style: TextStyle(fontSize: 24),
     )

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

4. layoutBuilder

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

   • Пример:

     layoutBuilder: (Widget currentChild, List<Widget> previousChildren) {
       return Stack(
         children: [
           ...previousChildren,
           currentChild,
         ],
       );
     }

   • Применение: Позволяет создавать более сложные анимации и эффекты при переключении виджетов.

Итог

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