Flutter Animasyonlar: Rotation Transition kullanımı

Flutter’da bir widget’ı nasıl döndürürüz veya tekrarlayan bir şekilde nasıl hareket ettiririz diye soruyorsanız doğru başlığa denk geldiniz. 🙂 Flutter’da havalı animasyonlar yapacağımız serinin bu yazısında Rotation Transition nasıl uygulanır bunu anlatmaya çalışacağım.

Öncelikle initState’imizi ve değişkenlerimizi tanımlayalım:

  late AnimationController _controller;
  late Animation<double> _animation;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      lowerBound: 0.0,
      upperBound: 0.3,
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.bounceInOut,
    );
  }

AnimatedContainer ve RotationTransition widget’larını kullanacağımız bu işlemde animasyonumuz 0.0 ile 0.3 sınırları arasında devamlı tekrar edecek şekilde kurguladık. Bu şekilde hareketli widget’lar oluşturabilirsiniz. Tıklanmayı bekleyen bir bildirimi veya açılmayı bekleyen bir sürpriz kutusunu bu şekilde hareket ettirerek UX konusunda geliştirmeler yapabilirsiniz.

                AnimatedContainer(
                  width: 50.0,
                  height: 50.0,
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Color.fromARGB(255, 27, 34, 64),
                        Color.fromARGB(255, 58, 66, 99),
                      ],
                    ),
                    shape: BoxShape.circle,
                  ),
                  duration: const Duration(milliseconds: 200),
                  child: RotationTransition(
                    turns: _animation,
                    child: Transform.rotate(
                      angle: 0,
                      child: const Icon(Icons.lock,
                          color: Colors.white, size: 24.0),
                    ),
                  ),
                ),

Flutter uygulamalarında Rotation Transition kullanımı işte bu kadar kolay! Bu animasyon çeşidi ile siz de uygulamalarınıza farklılıklar katabilirsiniz. 🙂 Örnek proje için Github linkini ziyaret edebilirsiniz.


Okuyucuya Not

Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.

Sağlıcakla kalın!