Flutterdə animasiyalar | flutter_animate paketi

 Mobil tətbiqə gözəllik verən amillərdən birincisi onun dizaynıdırsa, ikincisi isə onda olan animasiyalardır. Hamı razlışalar ki, tətbiqdə bütün elementlər "quru-quru" qalmaqdansa hər hansı bir animasiya ilə gəlsə daha yaxşı görünər. 

Flutter ilə animasiyaları bir neçə qayda ilə paket yükləmədən qoşmaq olar, məsələn hazır widgetlər (AnimatedContainer, AnimatedCrossFade və s.). Animasiyaları rahat şəkildə qoşmaq üçün biz bu məqalədə flutter_animate paketindən danışacayıq. 

Aşağıda sadə Container blokunu göstərən səhifəni nəzərdə keçirək.

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),
		  ),
		);
	}
}

Daha ətraflı aşağıdakı videoda baxa bilərsiniz