Flutter İle Sayfa Geçiş Animasyonu Nasıl Yapılır?

Mobil uygulama geliştirme dünyasında kullanıcı deneyimi (UX), bir uygulamanın başarısını belirleyen en kritik unsurlardan biridir. Kullanıcılar, sayfalar arasında gezinirken sert ve kesintili geçişler yerine, akıcı ve doğal hissettiren görsel geçişler görmek isterler. Bu makalede, modern mobil uygulama geliştirme çerçevesi olan Flutter kullanarak profesyonel düzeyde geçiş efektlerinin nasıl tasarlanacağını inceleyeceğiz. Arama motorlarında sıkça aratılan Flutter İle Sayfa Geçiş Animasyonu Nasıl Yapılır? sorusuna, en güncel standartlar ve performans optimizasyonları eşliğinde yanıt vereceğiz.

Flutter, varsayılan olarak hedef platformun (Android için Material Design, iOS için Cupertino) standart geçiş animasyonlarını sunar. Ancak, markanızın kimliğini yansıtmak veya daha dinamik bir kullanıcı arayüzü sunmak için özel (custom) animasyonlara ihtiyaç duyarsınız. Bu rehberde, temel düzeyden ileri düzeye kadar farklı animasyon türlerini adım adım kodlayarak öğreneceğiz. Yazılım geliştirme sürecinde bu animasyonları doğru yapılandırmak, uygulamanızın performansını doğrudan etkiler.

Bu eğitim makalesi, Flutter ve Dart dillerine temel düzeyde hakim, orta ve ileri seviye mobil uygulama geliştiricileri için hazırlanmıştır. Makale sonunda; kendi özel geçiş animasyonlarınızı yazabilecek, popüler yönlendirme (routing) kütüphaneleriyle bu animasyonları entegre edebilecek ve düşük donanımlı cihazlarda bile 60 FPS akıcılığında çalışan geçişler tasarlayabileceksiniz.

Ön Hazırlık ve Gereksinimler

Uygulamamıza geçiş animasyonlarını eklemeden önce, geliştirme ortamımızın güncel ve hazır olduğundan emin olmalıyız. 2026 yılı standartlarında, Flutter'ın en son kararlı (stable) sürümünü ve Dart 3.x+ özelliklerini kullanacağız. Bu sayede hem bellek yönetiminde hem de asenkron işlemlerde en yüksek performansı elde edeceğiz.

Projenizde özel sayfa geçişleri uygulayabilmek için aşağıdaki bileşenlerin kurulu ve yapılandırılmış olması gerekmektedir:

• Flutter SDK: Sürüm 3.22 veya üzeri (2026 standartlarına uyumluluk için).
• IDE: Visual Studio Code veya Android Studio (Güncel Flutter ve Dart eklentileri kurulu olmalıdır).
• Simülatör/Emülatör veya Fiziksel Cihaz: Animasyon performansını test etmek için fiziksel bir Android veya iOS cihazı tercih edilmelidir.

Önemli Not: Emülatörler, bilgisayarınızın donanım kaynaklarını paylaştığı için animasyonlarda anlık takılmalara (jank) neden olabilir. Gerçekçi bir performans analizi için testlerinizi her zaman "Profile" veya "Release" modunda, fiziksel bir cihaz üzerinde gerçekleştirin.

Flutter'da Sayfa Geçiş Mekanizması Nasıl Çalışır?

Flutter'da her sayfa birer Route nesnesidir. Sayfalar arası geçişleri yöneten yapı ise Navigator veya modern projelerde tercih edilen Router API'sidir. Varsayılan olarak kullanılan MaterialPageRoute, platforma özgü animasyonları otomatik olarak uygular. Ancak özel bir animasyon tasarlamak istediğimizde, Flutter'ın bize sunduğu PageRouteBuilder sınıfını kullanırız.

PageRouteBuilder, iki temel parametre alır: pageBuilder ve transitionsBuilder. pageBuilder, hedef sayfanın kendisini oluştururken; transitionsBuilder, bu sayfaya geçiş esnasında uygulanacak animasyon şablonunu tanımlar. Bu şablon bize bir Animation nesnesi sağlar. Bu nesne, geçiş başladığında 0.0 değerinden başlar ve geçiş tamamlandığında 1.0 değerine ulaşır.

Animasyonların matematiksel eğrisini (hızlanma, yavaşlama vb.) kontrol etmek için CurvedAnimation sınıfını kullanırız. Bu sınıf, doğrusal (linear) olan animasyon değerini, örneğin Curves.easeOut veya Curves.elasticInOut gibi daha doğal hareket eden eğrilere dönüştürür. Şimdi, bu teorik altyapıyı pratiğe dökerek ilk animasyonumuzu yazalım.

Adım Adım Slayt (Slide) Geçiş Animasyonu Oluşturma

Slayt geçişi, yeni sayfanın ekranın dışından (genellikle sağdan, soldan veya aşağıdan) kayarak gelmesini sağlayan, mobil uygulamalarda en sık kullanılan animasyon türüdür. Bu adımda, sağdan sola doğru kayarak gelen bir sayfa geçişini adım adım nasıl yapacağımızı öğreneceğiz.

İlk olarak, özel geçişimizi yönetecek olan ve her yerde tekrar kullanılabilir (reusable) bir fonksiyon veya sınıf tasarlayalım. Aşağıdaki örnek kod, PageRouteBuilder kullanarak sağdan sola kayma efektini gerçekleştiren bir rota oluşturur.

import 'package:flutter/material.dart';

Route createSlideRoute(Widget destinationPage) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => destinationPage,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // Animasyonun başlangıç ve bitiş noktalarını tanımlıyoruz.
      // Offset(1.0, 0.0) ekranın tamamen sağ dışını, Offset(0.0, 0.0) ise ekranın merkezini temsil eder.
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      
      // Animasyonun hız eğrisini belirliyoruz.
      const curve = Curves.easeInOutCubic;

      // Tween, iki değer arasında geçiş köprüsü kurar.
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      
      // Animasyonu tanımlanan eğri ile sürüyoruz.
      var offsetAnimation = animation.drive(tween);

      return SlideTransition(
        position: offsetAnimation,
        child: child,
      );
    },
    transitionDuration: const Duration(milliseconds: 400),
  );
}

Yukarıdaki kod bloğunda, Tween sınıfını kullanarak sayfanın koordinatlarını değiştirdik. Offset(1.0, 0.0) değeri, sayfanın X ekseninde kendi genişliği kadar sağda konumlanacağını belirtir. animation.drive(tween) ifadesi ise gelen ham animasyon değerini bizim tanımladığımız koordinat aralığına dönüştürür. Son olarak, SlideTransition widget'ı bu koordinatları kullanarak hedef sayfayı ekranda kaydırır.

Şimdi bu fonksiyonu projemizde nasıl tetikleyeceğimizi görelim. Aşağıdaki örnek kod, bir buton aracılığıyla bu özel rotayı nasıl başlatacağınızı göstermektedir.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Ana Sayfa')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Özel slayt rotamızı çağırarak detay sayfasına geçiş yapıyoruz.
            Navigator.of(context).push(createSlideRoute(const DetailScreen()));
          },
          child: const Text('Detay Sayfasına Git (Slayt)'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Detay Sayfası')),
      body: const Center(
        child: Text('Detay Sayfasına Hoş Geldiniz!'),
      ),
    );
  }
}

Bu kod yapısı sayesinde, ana sayfadaki butona tıklandığında detay sayfası sağ taraftan pürüzsüz bir şekilde kayarak ekrana gelecektir. Geri tuşuna basıldığında ise Flutter bu animasyonu otomatik olarak tersine çalıştırarak sayfayı sağa doğru kaydırıp kapatacaktır.

Adım Adım Opaklık (Fade) Geçiş Animasyonu Uygulaması

Opaklık (Fade) geçişi, mevcut sayfanın yavaşça şeffaflaşarak kaybolduğu ve yeni sayfanın yavaşça belirginleştiği daha minimal ve şık bir geçiş türüdür. Özellikle e-ticaret veya galeri uygulamalarında estetik bir görünüm sağlamak için tercih edilir.

Opaklık animasyonunu gerçekleştirmek için Flutter'ın hazır sunduğu FadeTransition widget'ını kullanacağız. Bu widget, doğrudan 0.0 (tamamen şeffaf) ile 1.0 (tamamen görünür) arasındaki değerleri kabul eder. Aşağıdaki örnek kodda bu yapının nasıl kurulduğunu inceleyebilirsiniz.

import 'package:flutter/material.dart';

Route createFadeRoute(Widget destinationPage) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => destinationPage,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // Yumuşak bir geçiş için Curve tanımlıyoruz.
      var curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeIn,
      );

      return FadeTransition(
        opacity: curvedAnimation,
        child: child,
      );
    },
    transitionDuration: const Duration(milliseconds: 500),
  );
}

Bu kodda, CurvedAnimation kullanarak geçişin başlangıçta yavaş, sonlara doğru ise daha belirgin olmasını sağladık. transitionDuration parametresini 500 milisaniye olarak ayarlayarak animasyonun gözle rahatça takip edilmesini sağladık. Bu süreyi uygulamanızın genel tasarım diline göre kısaltıp uzatabilirsiniz.

Ölçeklendirme (Scale) ve Döndürme (Rotate) Kombinasyon Animasyonları

Bazen tek bir animasyon türü yeterli olmayabilir. Daha yaratıcı ve dikkat çekici geçişler elde etmek için birden fazla animasyon widget'ını iç içe sararak (nesting) kombine edebiliriz. Bu adımda, yeni sayfanın hem büyüyerek (scale) hem de hafifçe dönerek (rotate) ekrana gelmesini sağlayan ileri düzey bir örnek kod hazırlayacağız.

Aşağıdaki kod bloğunda, ScaleTransition ve RotationTransition sınıflarını bir arada kullanarak sinematik bir geçiş efekti elde ediyoruz.

import 'package:flutter/material.dart';

Route createScaleAndRotateRoute(Widget destinationPage) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => destinationPage,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // Hızlı başlayıp yavaşlayan bir eğri seçiyoruz.
      final curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.fastOutSlowIn,
      );

      // Ölçeklendirme animasyonu: 0.0'dan (hiç görünmez) 1.0'a (orijinal boyut)
      final scaleTween = Tween(begin: 0.0, end: 1.0).animate(curvedAnimation);
      
      // Döndürme animasyonu: -0.1 turdan (hafif sol eğik) 0.0 tura (düz)
      final rotateTween = Tween(begin: -0.1, end: 0.0).animate(curvedAnimation);

      return RotationTransition(
        turns: rotateTween,
        child: ScaleTransition(
          scale: scaleTween,
          child: child,
        ),
      );
    },
    transitionDuration: const Duration(milliseconds: 600),
  );
}

Bu kombinasyon, özellikle oyun benzeri arayüzlerde veya başarı ekranı (success screen) gibi kullanıcının dikkatini çekmek istediğiniz özel anlarda mükemmel sonuçlar verir. Ancak, bu tür yoğun matematiksel hesaplama gerektiren animasyonları uygulamanın her sayfasında kullanmak kullanıcıyı yorabilir. Bu nedenle dengeli kullanım kritik öneme sahiptir.

GoRouter ile Gelişmiş Sayfa Geçiş Animasyonları Nasıl Yapılır?

Büyük ölçekli Flutter projelerinde, yerleşik Navigator yerine genellikle deklaratif (declarative) yönlendirme kütüphaneleri tercih edilir. Flutter ekibi tarafından da resmi olarak desteklenen go_router paketi, modern projelerin vazgeçilmezidir. Peki, go_router kullanırken özel sayfa geçiş animasyonları nasıl entegre edilir?

go_router, rota tanımlamaları içerisinde CustomTransitionPage sınıfını barındırır. Bu sınıf sayesinde, her bir rota için ayrı ayrı geçiş animasyonları tanımlayabiliriz. Aşağıdaki örnek kodda, GoRouter konfigürasyonuna özel bir geçiş animasyonunun nasıl ekleneceğini adım adım görebilirsiniz.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

// GoRouter konfigürasyonunu tanımlıyoruz.
final GoRouter appRouter = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
    ),
    GoRoute(
      path: '/details',
      pageBuilder: (context, state) {
        return CustomTransitionPage(
          key: state.pageKey,
          child: const DetailScreen(),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            // GoRouter içinde yukarı doğru kayma (Slide-up) animasyonu uyguluyoruz.
            const begin = Offset(0.0, 1.0);
            const end = Offset.zero;
            final tween = Tween(begin: begin, end: end).chain(
              CurveTween(curve: Curves.easeOutQuad),
            );
            
            return SlideTransition(
              position: animation.drive(tween),
              child: child,
            );
          },
          transitionDuration: const Duration(milliseconds: 350),
        );
      },
    ),
  ],
);

GoRouter entegrasyonu sayesinde, uygulama genelindeki yönlendirme mimarisini bozmadan, sadece ilgili sayfa tanımlaması üzerinde animasyon özelleştirmesi yapabilmiş olduk. Bu yaklaşım, kodun okunabilirliğini ve bakımını (maintainability) ciddi oranda artırır.

Sayfa Geçişlerinde Performans Optimizasyonu ve Dikkat Edilmesi Gerekenler

Animasyonlar görsel olarak ne kadar etkileyici olursa olsun, eğer saniyede 60 (veya 120) kare hızına ulaşamıyor ve takılıyorsa, kullanıcı deneyimine zarar verir. Flutter'ın render mimarisi oldukça güçlüdür ancak yanlış kodlama pratikleri performans darboğazlarına yol açabilir.

Sayfa geçiş animasyonlarında performansı en üst düzeyde tutmak için aşağıdaki teknikleri mutlaka uygulamalısınız:

• Const Constructor Kullanımı: Animasyon esnasında yeniden oluşturulması gerekmeyen tüm widget'ları const anahtar kelimesiyle tanımlayın. Bu, Flutter'ın gereksiz yere "rebuild" (yeniden çizim) işlemi yapmasını engeller.
• RepaintBoundary Kullanımı: Geçiş esnasında karmaşık çizimler barındıran (örneğin büyük görseller, gölgeler veya özel grafikler) widget'ları RepaintBoundary ile sarmalayın. Bu sayede Flutter, bu widget'ı bellekte bir kere çizip animasyon boyunca bir resim gibi kaydırır.
• Ağır İşlemleri Erteleyin: Yeni açılan sayfadaki API isteklerini veya veritabanı sorgularını sayfa geçiş animasyonu tamamlandıktan sonra başlatın. Bunun için WidgetsBinding.instance.addPostFrameCallback veya animasyon durumunu dinleyen mekanizmalar kullanabilirsiniz.

Aşağıdaki örnek kodda, geçiş esnasında gereksiz rebuild işlemlerini önlemek amacıyla optimize edilmiş bir widget yapısı gösterilmiştir.

import 'package:flutter/material.dart';

class OptimizedDetailScreen extends StatelessWidget {
  const OptimizedDetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // RepaintBoundary kullanarak bu sayfanın çizim maliyet