Flutter Navigator Kullanımı: Sayfalar Arası Gezinme

Flutter, etkileyici ve kullanıcı dostu mobil uygulamalar oluşturmanıza yardımcı olan güçlü bir çerçevedir. Uygulamalar arasında gezinme, kullanıcı deneyimi açısından son derece önemlidir. Ayrıca Flutter’da Navigator sınıfı, uygulamalarınızda gezinmeyi kolaylaştırır ve sayfalar arasında geçiş yapmanızı sağlar. Bu yazıda, Flutter Navigator kullanımı adım adım açıklayacak ve örneklerle konuyu pekiştireceğiz.

Adım 1: Temel Sayfaları Oluşturma

Flutter’da gezinme işlemine başlamadan önce, gezinme yapısını oluşturmak için temel sayfaları hazırlamanız gerekmektedir. Örnek olarak, iki sayfa oluşturalım: AnaSayfa ve DetaySayfa.

// main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnaSayfa(),
    );
  }
}

class AnaSayfa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ana Sayfa'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetaySayfa()),
            );
          },
          child: Text('Detay Sayfaya Git'),
        ),
      ),
    );
  }
}

class DetaySayfa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detay Sayfa'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Geri Dön'),
        ),
      ),
    );
  }
}

Adım 2: Sayfalar Arasında Geçiş Yöntemleri

Navigator sınıfı, sayfalar arasında farklı geçiş yöntemleri sunar. Bunlar arasında push, pop, pushNamed, popAndPushNamed gibi yöntemler bulunurlar. Aşağıda bu yöntemlerin açıklamalarını ve örneklerini görelim:

2.1. Flutter Navigator push() ve pop() Yöntemleri:

push() yöntemi, mevcut sayfanın üzerine yeni bir sayfa ekler ve kullanıcının yeni sayfaya geçmesini sağlar. pop() yöntemi ise mevcut sayfadan çıkarak bir önceki sayfaya geri döner.

// AnaSayfa
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => DetaySayfa()),
    );
  },
  child: Text('Detay Sayfaya Git'),
),

// DetaySayfa
ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: Text('Geri Dön'),
),

2.2. Flutter Navigator pushNamed() ve popAndPushNamed Yöntemleri:

pushNamed() yöntemi, adlandırılmış bir rota üzerinden sayfa ekler ve kullanıcının yeni sayfaya geçmesini sağlar. Bu yöntem, genellikle MaterialApp içinde tanımlanan rotaları kullanır. Ayrıca popAndPushNamed() yöntemi ise mevcut sayfadan çıkarak yeni bir adlandırılmış rota üzerinden yeni sayfaya geçer.

// MaterialApp içinde rotaları tanımlama
MaterialApp(
  routes: {
    '/anasayfa': (context) => AnaSayfa(),
    '/detaysayfa': (context) => DetaySayfa(),
  },
)

// AnaSayfa
ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/detaysayfa');
  },
  child: Text('Detay Sayfaya Git'),
),

// DetaySayfa
ElevatedButton(
  onPressed: () {
    Navigator.popAndPushNamed(context, '/anasayfa');
  },
  child: Text('Geri Dön'),
),

Adım 3: Veri Geçişi Yapma

Navigator ile sayfalar arasında veri geçişi yapmak için push() veya pushNamed() yöntemlerine bir argüman eklememiz gerekmektedir. Örnek olarak, AnaSayfa’dan DetaySayfa’ya bir kullanıcı adı geçirelim:

// AnaSayfa
ElevatedButton(
  onPressed: () {
    String kullaniciAdi = 'JohnDoe';
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => DetaySayfa(kullaniciAdi: kullaniciAdi)),
    );
  },
  child: Text('Detay Sayfaya Git'),
),

// DetaySayfa
DetaySayfa({required this.kullaniciAdi});
// ... diğer kodlar ...

// DetaySayfa'da kullanıcı adını kullanma
Text('Hoşgeldin, $kullaniciAdi'),

Sonuç Olarak Flutter Navigator kullanımı

Flutter’da Navigator kullanarak uygulamanızda sayfalar arasında gezinme işlemlerini kolaylıkla gerçekleştirebilirsiniz. Bu yazıda, Navigator sınıfının farklı yöntemlerini ve veri geçişi yapma yöntemlerini detaylı olarak ele aldık. Ayrıca Örneklerle konuyu pekiştirerek, sayfalar arasında geçiş yapmanın ve veri geçişini nasıl gerçekleştireceğinizin temellerini öğrendiniz. Umarım bu rehber, Flutter geliştiricilere Navigator kullanımı konusunda yardımcı olur!

Daha fazla flutter ile ilgili blog yazılarımıza buradan ulaşabilirsiniz.