Animations in Flutter | flutter_animate package

 If one of the factors that makes a mobile application attractive is its design, then the second such factor is animations. Everyone will agree that if all elements in the application remain "dry", it looks better with some animation.

With Flutter, you can easily add animations without installing multiple packages, for example, using ready-made widgets (AnimatedContainer, AnimatedCrossFade, etc.). For the convenience of adding animations, we will discuss the flutter_animate package in this article.

First, let's look at a page that simply shows a container.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter_animate | Package blog'),
        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 | Package blog'),
		    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),
		  ),
		);
	}
}

For more detailed information, you can watch the video below.