Flutter'da Smooth Animasyon: State Değişimini Akıcı Geçişlerle Yönet
Flutter'da bir widget'ın durumu değiştiğinde, o değişimi anında uygulamak yerine akıcı bir animasyon ile göstermek kullanıcı deneyimini önemli ölçüde iyileştirir. Butona basıldığında rengin değişmesi, boyutun büyümesi veya opacity'nin azalması gibi işlemleri smooth hale getirmek için AnimationController ve Tween kombinasyonunu kullanıyoruz.
Temel yaklaşım şu: AnimationController'ı TickerProvider ile bağla, Tween ile başlangıç ve bitiş değerlerini tanımla, sonra AnimatedBuilder'ı kullanarak her frame'de widget'ı yeniden çiz.
1import 'package:flutter/material.dart';23void main() => runApp(const MyApp());45class MyApp extends StatelessWidget {6const MyApp({Key? key}): super(key: key);79Widget build(BuildContext context) {10return MaterialApp(11home: const AnimationDemo(),12);13}14}1516class AnimationDemo extends StatefulWidget {17const AnimationDemo({Key? key}): super(key: key);1820State<AnimationDemo> createState() => _AnimationDemoState();21}2223class _AnimationDemoState extends State<AnimationDemo>24with TickerProviderStateMixin {25late AnimationController _controller;26late Animation<double> _sizeAnimation;27late Animation<Color?> _colorAnimation;2830void initState() {31super.initState();32_controller = AnimationController(33duration: const Duration(milliseconds: 800),34vsync: this,35);3637_sizeAnimation = Tween<double>(begin: 50, end: 150).animate(38CurvedAnimation(parent: _controller, curve: Curves.easeInOut),39);4041_colorAnimation = ColorTween(42begin: Colors.blue,43end: Colors.red,44).animate(45CurvedAnimation(parent: _controller, curve: Curves.easeInOut),46);47}4849void _toggleAnimation() {50if (_controller.isCompleted) {51_controller.reverse();52} else {53_controller.forward();54}55}5658void dispose() {59_controller.dispose();60super.dispose();61}6264Widget build(BuildContext context) {65return Scaffold(66appBar: AppBar(title: const Text('Smooth Animasyon')),67body: Center(68child: AnimatedBuilder(69animation: _controller,70builder: (context, child) {71return GestureDetector(72onTap: _toggleAnimation,73child: Container(74width: _sizeAnimation.value,75height: _sizeAnimation.value,76decoration: BoxDecoration(77color: _colorAnimation.value,78borderRadius: BorderRadius.circular(20),79),80child: const Center(81child: Text(82'Dokunun',83style: TextStyle(color: Colors.white, fontSize: 16),84),85),86),87);88},89),90),91);92}93}Beklenen Çıktı: Uygulamayı çalıştırdığında ekranda mavi, 50×50 px'lik bir kutu görürsün. Dokunduğunda 800ms içinde kırmızıya renklenir ve 150×150 px'ye büyür. Tekrar dokunduğunda tersine dönüşür.
Önemli Noktalar:
- `TickerProviderStateMixin` kullanmak AnimationController'ın frame senkronizasyonunu sağlar.
- `CurvedAnimation` ile `Curves.easeInOut` gibi easing fonksiyonları animasyonu doğal kılar.
- `AnimatedBuilder` sadece animasyon değiştiğinde çizer, performansı korur.
- Dispose'da controller'ı temizlemezsen bellek sızıntısı oluşur.
Bu pattern'i kullanarak karmaşık state geçişlerini bile smooth hale getirebilirsin. Renkler, boyutlar, pozisyonlar, hepsi Tween ile kontrol edilebilir.
0 yorum