Анимации во Flutter | пакет flutter_animate

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

С помощью Flutter вы можете легко добавить анимации без установки нескольких пакетов, например, с использованием готовых виджетов (AnimatedContainer, AnimatedCrossFade и т. д.). Для удобства добавления анимаций мы рассмотрим пакет flutter_animate в этой статье.

Давайте сначала рассмотрим страницу, которая просто показывает контейнер.

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter_animate | Пакет блога'),
        centerTitle: true,
      ),
      body: Center(
        child: Container(
          width: 150,
          height: 150,
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(14)
          ),
        ),
      ),
    );
  }
}

flutter pub add flutter_animate

class MyPage extends StatelessWidget {
	const MyPage({super.key});

	@override
	Widget build(BuildContext context) {
		return Scaffold(
		  appBar: AppBar(
		    title: const Text('flutter_animate | Пакет блога'),
		    centerTitle: true,
		  ),
		  body: Center(
		    child: Container(
		      width: 150,
		      height: 150,
		      decoration: BoxDecoration(
		        color: Colors.red,
		        borderRadius: BorderRadius.circular(14)
		      ),
		    ).animate().fadeIn(duration: 500.ms).slideX(duration: 700.ms, curve: Curves.easeInCubic),
		  ),
		);
	}
}

Для более подробного ознакомления вы можете посмотреть видео ниже.