Flutter Sayfalar Arası Geçiş Yapma

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda sayfalar arası geçiş yapmayı anlatacağım. Hadi başlayalım !

Flutter, Google tarafından geliştirilen açık kaynaklı bir mobil uygulama geliştirme çerçevesidir. Flutter sayesinde, hızlı bir şekilde harika görünümlü ve performanslı mobil uygulamalar geliştirebilirsiniz. Flutter’da sayfalar arasında geçiş yapmak oldukça kolaydır. Bu makalede, Flutter’da sayfa geçişleri ile ilgili detayları ve örnek kodları paylaşacağız.

Öncelikle, Flutter’da sayfa geçişleri için Navigator adlı bir sınıf kullanılır. Navigator sınıfı, uygulamanızda birden fazla sayfa arasında geçiş yapmanıza olanak sağlar. Navigator.push() metodu kullanılarak bir sayfadan diğerine geçiş yapılabilir. Bu metot, geçiş yapılacak sayfanın Widget’ını alır ve ardından Navigator stack’ine bu sayfayı ekler.

Sayfa Tasarımları

Örnek olarak, uygulamanızda bir anasayfa ve bir detay sayfası olduğunu varsayalım. Anasayfada bir buton var ve bu butona tıklandığında detay sayfasına geçiş yapılması gerekiyor. Bu durumda, Navigator.push() metodunu kullanarak detay sayfasına geçiş yapabilirsiniz. Aşağıdaki örnek kodda, bu durumda kullanılabilecek bir örnek gösterilmiştir.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Anasayfa'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailPage()),
            );
          },
          child: Text('Detay sayfasına git'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detay Sayfası'),
      ),
      body: Center(
        child: Text('Burada detay sayfası içeriği yer alır.'),
      ),
    );
  }
}

Yukarıdaki kodda, HomePage ve DetailPage adında iki farklı sayfa bulunuyor. HomePage içinde bir buton var ve bu butona tıklandığında DetailPage’e geçiş yapılıyor. Navigator.push() metodu kullanılarak DetailPage’e geçiş yapılıyor. Bu metodun ilk parametresi BuildContext, ikinci parametresi ise gidilecek sayfanın Widget’ıdır.

Navigator.push() metodu kullanılarak yapılan geçişler, varsayılan olarak sağdan sola doğru bir slayt geçişi animasyonu ile gerçekleşir. Ancak, Navigator.push() metodu yerine Navigator.pushReplacement() metodu kullanılırsa, geçiş yapılacak sayfa ile mevcut sayfa arasında bir animasyon olmadan direk geçiş yapılır. Böylece, uygulama performansı arttırılabilir.

Animasyon Süresini Ayarlama

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage()),
  transitionDuration: Duration(milliseconds: 500),
  reverseTransitionDuration: Duration(milliseconds: 500),
);

Bu kodda, animasyon süresi 500 milisaniye olarak belirlenmiştir. Ayrıca, reverseTransitionDuration parametresi de belirlenerek geri dönüş animasyonunun süresi de ayarlanabilir.

Adlandırılmış Rotalama

Navigator sınıfı, sayfa geçişleri için kullanılan tek yöntem değildir. Navigator.of(context).pushNamed() metodu kullanarak, uygulamanızda tanımladığınız adlandırılmış rotalara göre sayfa geçişleri yapabilirsiniz. Bu yöntemle, uygulamanızın genel navigasyonunu daha kolay bir şekilde yönetebilirsiniz.

Örneğin, uygulamanızda anasayfa ve detay sayfası dışında bir de profil sayfası var. Bu durumda, adlandırılmış rotalar kullanarak sayfa geçişleri yapabilirsiniz. Aşağıdaki örnek kodda, bu duruma uygun bir örnek gösterilmiştir.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Anasayfa'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pushNamed('/detail');
          },
          child: Text('Detay sayfasına git'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detay Sayfası'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pushNamed('/profile');
          },
          child: Text('Profil sayfasına git'),
        ),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profil Sayfası'),
      ),
      body: Center(
        child: Text('Burada profil sayfası içeriği yer alır.'),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
        '/profile': (context) => ProfilePage(),
      },
    ),
  );
}

Yukarıdaki kodda, anasayfa, detay sayfası ve profil sayfası Widget’ları tanımlanmıştır. Daha sonra, MaterialApp widget’ı içinde initialRoute parametresi belirlenerek, uygulamanın açılış sayfası belirlenmiştir. Ayrıca routes parametresi kullanılarak da, uygulamanın adlandırılmış rotaları tanımlanmıştır. Örneğin, anasayfa Widget’ı ‘/” rotasıyla, detay sayfası ‘/detail’ rotasıyla ve profil sayfası ‘/profile’ rotasıyla eşleştirilmiştir.

HomePage ve DetailPage Widget’larında, Navigator.of(context).pushNamed() metodu kullanılarak sayfa geçişleri yapılmıştır. Profil sayfasına gitmek için de, DetailPage Widget’ında belirlenen bir butona tıklanarak aynı metot kullanılmıştır.

Bu örnekte, sayfa geçişleri için adlandırılmış rotalar kullanarak uygulamanın navigasyonunu daha kolay yönetmek mümkündür.

Özel Animasyonlu Geçiş

Ayrıca, MaterialPageRoute yerine özel bir sayfa geçiş animasyonu kullanmak isterseniz, Navigator.pushReplacement() metodu kullanarak da geçiş yapabilirsiniz.

Örneğin, aşağıdaki kodda SlideTransition sınıfı kullanılarak özel bir animasyon belirlenmiştir.

Navigator.pushReplacement(
  context,
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500),
    pageBuilder: (context, animation, secondaryAnimation) => DetailPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);

Bu kodda, SlideTransition sınıfı kullanılarak animasyon belirlenmiştir. transitionDuration parametresi kullanılarak animasyon süresi ayarlanmıştır. Ayrıca, pageBuilder parametresi belirtilerek, geçiş yapılacak sayfa Widget’ı tanımlanmıştır. transitionsBuilder parametresi kullanılarak da, animasyonun nasıl olacağı özelleştirilmiştir.

Sonuç

Sonuç olarak, Flutter’da sayfa geçişleri oldukça kolaydır ve Navigator sınıfı sayesinde birkaç satır kod ile sayfalar arasında geçiş yapabilirsiniz. Navigator sınıfı, Flutter’da sayfa geçişleri yapmak için kullanılan en temel sınıflardan biridir. Yapabileceğiniz sayfa geçişleri sayesinde, uygulamanızın navigasyonunu daha kolay bir şekilde yönetebilirsiniz. Ayrıca, animasyonları özelleştirerek de uygulamanızın görsel etkileşimlerini artırabilirsiniz.

Evet Flutter’da sayfalar arası geçiş yapma bu şekilde yapılmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.