Flutter'da animasyonlar nasıl çalışır?

Question

Accepted Answer

Flutter'da güçlü, esnek **animasyon** desteği vardır — basit örtük animasyonlardan tam kontrollü açık animasyonlara kadar. Animasyonlar, düzgün geçişler ve hareket ile UX'i geliştirerek, Flutter'ın widget tabanlı sistemi onları erişilebilir kılar. ## Örtük animasyonlar (kolay yol) ```dart // implicitly-animated widgets animate AUTOMATICALLY when their properties change AnimatedContainer( duration: Duration(milliseconds: 300), width: _expanded ? 200 : 100, // change width → it animates smoothly height: _expanded ? 200 : 100, color: _expanded ? Colors.blue : Colors.red, ) // just change the value (with setState) → Flutter animates the transition // others: AnimatedOpacity, AnimatedPadding, AnimatedPositioned, etc. ``` Örtük animasyonlar (`AnimatedContainer`, `AnimatedOpacity`, vb.) özellikleri değiştiğinde otomatik olarak animasyon uygularlar — animasyon eklemenin en kolay yoludur. ## Açık animasyonlar (tam kontrol) ```dart // explicit animations use an AnimationController for full control class _MyState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(duration: Duration(seconds: 1), vsync: this); _animation = Tween(begin: 0, end: 1).animate(_controller); _controller.forward(); // start the animation } @override void dispose() { _controller.dispose(); super.dispose(); } // CLEAN UP the controller! } ``` Açık animasyonlar, kesin kontrol için bir **AnimationController** (oynatma kontrolü) ve **Tween** (değer aralığını tanımlama) kullanırlar — özel, karmaşık veya koordineli animasyonlar için gereklidir. ## Diğer animasyon araçları ```text ✓ Hero animations → shared-element transitions between screens (an image flies/grows) ✓ AnimatedBuilder / AnimatedWidget → build UI from an animation efficiently ✓ Page route transitions; staggered animations; physics-based animations ✓ Packages (Rive, Lottie) for complex/designer animations ``` ## Neden önemli Flutter'da animasyonları anlamak değerlidir çünkü **animasyonlar kullanıcı deneyimini** düzgün geçişler ve hareket ile geliştirerek uygulamaları cilalı ve duyarlı hissettirirler, bu nedenle pratik bilgi açısından yararlıdır. Flutter'ın animasyon sistemi güçlü ve esnektir, iki ana yaklaşımı anlamak anahtardır. **Örtük animasyonlar** (özellikleri değiştiğinde otomatik olarak animasyon uygulayan `AnimatedContainer` ve `AnimatedOpacity` gibi örtülü olarak animasyonlanan widget'lar) **kolay, erişilebilir yol**dur animasyon eklemek için — değeri değiştirin ve Flutter geçişi düzgün bir şekilde animasyon uygular, minimal kod gerektirir, çoğu ortak animasyon ihtiyacı için uygun. **Açık animasyonlar** (oynatma kontrol için **AnimationController** ve değer aralıkları için **Tween** kullanılır) **tam kontrol** sağlarlar özel, karmaşık veya koordineli animasyonlar için — örtük animasyonlar yeterli olmadığında gereklidir. Her ikisini anlamak — ve her birini ne zaman kullanacağını bilmek (basit özellik animasyonları için örtük, kesin kontrol için açık) — animasyon ihtiyaçlarının spektrumunu kapsar. **Diğer araçları** bilmek (paylaşılan öğe ekran geçişleri için Hero animasyonları, animasyon tarafından yönlendirilen UI için AnimatedBuilder ve karmaşık tasarımcı animasyonları için Rive/Lottie gibi paketler) araç setini genişletir. Akılda tutmaya değer pratik bir not **AnimationController'ları elden çıkarmak**tır (sızıntıları önlemek için, yaşam döngüsü bilgisine bağlanır). Cilalı animasyonlar kullanıcı deneyimini (düzgün geçişler, hareket, geri bildirim) anlamlı şekilde iyileştirdğinden ve Flutter güçlü animasyon desteği sağladığından, ve örtük ve açık yaklaşımları anlama uygun animasyonlar ekleyebildiğinden, Flutter'da animasyonları anlamak değerli, pratik olarak ilgili bilgidir cilalı uygulamalar oluşturmak için — basit örtük animasyonlardan (yaygın durum) tam kontrol açık animasyonlara kadar hareket ile UX'i geliştirmek için kullanışlı, ilgi çekici ve profesyonel hissettiren Flutter uygulamaları oluşturmak için değerli bir beceridir.