Sobes.tech
Middle

Flutter'da bir uygulamaya uygun animasyon entegrasyon yöntemi nasıl seçilir?

sobes.tech yapay zeka

AI'dan gelen yanıt

Seçim, animasyonun karmaşıklığına, sıklığına ve kullanıcıyla etkileşim derecesine bağlıdır.

Ana yöntemler:

  • ImplicitlyAnimatedWidgets: Widget özelliklerini (boyut, renk, saydamlık) değiştirmek için basit durum geçiş animasyonları. Özellik değişikliklerini otomatik olarak animasyonlar.

    // AnimatedContainer örneği
    AnimatedContainer(
      duration: const Duration(seconds: 1),
      width: _size,
      height: _size,
      color: _color,
      alignment: Alignment.center,
      curve: Curves.fastOutSlowIn,
      child: const FlutterLogo(size: 75),
    );
    
  • AnimatedBuilder ve AnimationController: Daha karmaşık ve özelleştirilmiş animasyonlar için. AnimationController aracılığıyla açık kontrol ve AnimatedBuilder ile yeniden çizim gerektirir.

    // RotationTransition ve AnimationController örneği
    class RotatingSquare extends StatefulWidget {
      @override
      _RotatingSquareState createState() => _RotatingSquareState();
    }
    
    class _RotatingSquareState extends State<RotatingSquare> with SingleTickerProviderStateMixin {
      late AnimationController _controller;
      late Animation<double> _animation;
    
      @override
      void initState() {
        super.initState();
        _controller = AnimationController(
          duration: const Duration(seconds: 2),
          vsync: this,
        )..repeat(); // Animasyonu tekrar et
    
        _animation = CurvedAnimation(
          parent: _controller,
          curve: Curves.linear, // Doğrusal eğri
        );
      }
    
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return RotationTransition( // Döndürme widget'ı
          turns: _animation,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        );
      }
    }
    
  • AnimatedWidget: Yeniden kullanılabilir animasyonlu widget'lar oluşturmak için soyut sınıf. AnimationController'a bağlı widget'ların oluşturulmasını kolaylaştırır.

    // ScaleTransition örneği (AnimatedWidget'tan türemiş)
    ScaleTransition(
      scale: _animation,
      child: const FlutterLogo(size: 75),
    );
    
  • Hero animasyonları: Ekranlar arasında geçiş animasyonları, aynı widget'ın "uçuşu" bir ekrandan diğerine.

    // Birinci ekranda
    Hero(tag: 'logo', child: FlutterLogo(size: 50));
    
    // İkinci ekranda
    Hero(tag: 'logo', child: FlutterLogo(size: 200));
    
  • CustomPaint: Kullanıcı tarafından çizilen grafikler ve animasyonları için. Çizim konusunda derin bilgi gerektirir.

Karşılaştırmalı tablo:

Yöntem Karmaşıklık Animasyon kontrolü Kullanım
ImplicitlyAnimatedWidgets Düşük Sınırlı Basit özellik değişiklikleri
AnimatedBuilder/Controller Orta Tam Karmaşık/özelleştirilmiş animasyonlar
AnimatedWidget Orta Tam Yeniden kullanılabilir animasyonlu widget'lar
Hero animasyonları Düşük Sınırlı Ekranlar arası geçişler
CustomPaint Yüksek Tam Kullanıcı grafik çizimleri

En uygun ve basit yöntemi seçin. Basit durumlar için ImplicitlyAnimatedWidgets tercih edilir. Daha karmaşık ve özelleştirilmiş durumlar için AnimatedBuilder ve AnimationController kullanın. Geçişler için Hero, karmaşık grafikler için CustomPaint.