5 лучших пакетов анимации Flutter для улучшения вашего UI в 2025

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Создание красивых, плавных и осмысленных анимаций в Flutter стало проще, чем когда-либо — особенно с помощью библиотек анимаций…

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

Вот 10 лучших пакетов анимаций Flutter в 2025 года, которые вам обязательно нужно знать.

1. flutter_animate – Мощные, цепочечные анимации

📦 Установка:

flutter_animate: ^4.2.0

Text('Hello')
  .animate()
  .fadeIn()
  .slide()
  .scale()
  .then(delay: 500.ms)
  .shake();

Вывод :

просмотр

2. animations – Официальные анимации Flutter

Пакет команды Flutter, который предоставляет готовые к использованию анимированные виджеты, такие как затухание, масштабирование и переходы контейнеров.

📦 Установка:

animations: ^2.0.8

🔧 Пример:

FadeThroughTransition(
  animation: animation,
  secondaryAnimation: secondaryAnimation,
  child: YourWidget(),
)

Вывод :

анимация

3. animated_text_kit – Текстовые анимации, сделанные простыми

📦 Установка:

animated_text_kit: ^4.2.2

🔧 Пример:

TyperAnimatedTextKit(
  text: ['Design', 'Code'],
)

Вывод:

вывод

3. animated_toggle_switch –Красивые анимированные переключатели

Добавляет полностью настраиваемые анимированные переключатели с плавными переходами.

📦 Установка:

animated_toggle_switch: ^0.5.2

🔧 Пример:

AnimatedToggleSwitch<bool>.dual(
  current: isDark,
  first: false,
  second: true,
  onChanged: (val) => setState(() => isDark = val),
)

Вывод:

4.smooth_page_indicator – Анимированные индикаторы страниц

Элегантный и настраиваемый виджет индикатора страниц для PageView.

smooth_page_indicator: ^1.1.0

🔧 Пример:

SmoothPageIndicator(
  controller: pageController,
  count: 4,
  effect: ExpandingDotsEffect(),
)

Вывод :

5. flutter_spinkit– Готовые анимации загрузки

Быстро добавьте спиннеры загрузки, точки, волны и другие анимации загрузки.

📦 Установка:

flutter_spinkit: ^5.2.0

🔧 Пример:

SpinKitWave(
  color: Colors.blue,
  size: 50.0,
)

Вывод :

Вывод

Какие пакеты анимаций вы чаще всего используете в Flutter? Есть любимый? Оставьте комментарий ниже!