navigation

tnrdll

Flutter – Navigation (veri gönderimi)

Flutter’da veri gönderimi, bir ekran veya sayfadan diğerine veri aktarmak için Navigator sınıfının kullanılmasıyla gerçekleştirilir. İşte Flutter’da veri gönderimi için genel bir yol:

  • İlk olarak, veri alıcı sayfanın yapısını oluşturun. Bu sayfada veriyi görüntüleyeceğiniz widget’ları yerleştirin.
  • Veri gönderen sayfada, kullanıcı etkileşimi veya diğer bir olay tetiklendiğinde veriyi alıcı sayfaya aktarın. Bunun için Navigator sınıfının push veya pushNamed yöntemlerini kullanabilirsiniz. Bu yöntemler, bir sonraki sayfaya geçmek için kullanılır ve birinci parametre olarak geçiş yapılacak sayfanın referansını alırken ikinci parametre olarak göndermek istediğiniz veriyi alır.

Örneğin, veriyi alıcı sayfaya aktarırken push yöntemini kullanabilirsiniz:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => AliciSayfa(veri: gonderilecekVeri),
  ),
);

Burada AliciSayfa veri alıcı sayfayı temsil ederken, veri parametresiyle veriyi aktarıyoruz.

Veri alıcı sayfada, AliciSayfa widget’ının yapısını tanımlayın ve veriyi almak için veri parametresini kullanın. Bu parametre, widget’ın yapıcı yöntemine veya başka bir yerde belirtilmiş olmalıdır.

class AliciSayfa extends StatelessWidget {
  final String veri;

  AliciSayfa({required this.veri});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alici Sayfa'),
      ),
      body: Center(
        child: Text(veri),
      ),
    );
  }
}

Burada veri parametresi AliciSayfa sınıfının bir özelliği olarak tanımlanır ve build yönteminde kullanılır.

Bu şekilde, bir sayfadan diğerine veri gönderebilir ve alabilirsiniz. Veriyi daha karmaşık veri türlerine veya nesnelere göndermek isterseniz, parametreleri buna göre ayarlamalısınız. Ayrıca, bu örnekte MaterialPageRoute ve push kullanıldı, ancak projenizin navigasyon yöntemlerine göre değişebilir.

tnrdll

Flutter – Navigation

Flutter, geliştiricilere birden çok sayfa veya ekranın kullanıcı arayüzünde gezinmesine olanak tanıyan bir navigasyon stack (yığın) sistemine sahiptir. Bu stack, bir sayfadan diğerine geçiş yapılmasını ve geri dönüşlerde önceki sayfaya geri dönülmesini sağlar.

En yaygın kullanılanlar:

  • Navigator.push(): Bu yöntem, mevcut sayfadan yeni bir sayfaya geçiş yapmak için kullanılır. Örneğin, bir düğmeye tıklandığında yeni bir sayfanın açılmasını istediğinizde kullanabilirsiniz.
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => YeniSayfa()),
);
  • Navigator.pop(): Bu yöntem, mevcut sayfayı kapatıp önceki sayfaya geri dönmek için kullanılır. Örneğin, bir “Geri” düğmesine tıklandığında veya işlem tamamlandığında kullanabilirsiniz.
Navigator.pop(context);
  • Navigator.pushReplacement(): Bu yöntem, mevcut sayfayı başka bir sayfa ile değiştirmek için kullanılır. Yeni sayfa açıldığında, önceki sayfa tamamen kapanır ve yerine yeni sayfa gelir.
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => YeniSayfa()),
);
  • Navigator.pushNamed(): Bu yöntem, adlandırılmış rotaları kullanarak sayfalar arasında geçiş yapmak için kullanılır. Önceden tanımlanan rotalara isim verilir ve bu isimler kullanılarak sayfalar açılır.
Navigator.pushNamed(context, '/yeniSayfa');
  • Navigator.pushNamedAndRemoveUntil(): Bu yöntem, belirli bir rotaya kadar olan tüm sayfaları kapatıp yeni bir sayfayı açmak için kullanılır. Yani, belirli bir sayfaya geçmek istediğinizde, tüm önceki sayfaları kapatıp yeni sayfayı açabilirsiniz.
Navigator.pushNamedAndRemoveUntil(
  context,
  '/yeniSayfa',
  ModalRoute.withName('/anaSayfa'),
);
tnrdll

Flutter – Navigation (pushNamed)

Flutter’da, uygulamanızdaki farklı sayfalar arasında gezinmek için Navigation kullanabilirsiniz.

İlk olarak, gezinmek istediğiniz sayfaları tanımlamanız gerekiyor. Bunu MaterialApp widget’ının içindeki MaterialApp.routes özelliği ile yapabilirsiniz. Örneğin:

MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/second': (context) => SecondPage(),
  },
)

Yukarıdaki örnekte, ‘/’ yolu ana sayfaya, ‘/second’ yolu ise ikinci sayfaya yönlendirir. Ana sayfada bir düğme olsun ve bu düğme ikinci sayfaya geçiş yapsın.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ana Sayfa'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('İkinci Sayfaya Git'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

Yukarıdaki kodda, ElevatedButton’un onPressed olayı tetiklendiğinde Navigator.pushNamed kullanılarak ‘/second’ yolu üzerinden ikinci sayfaya geçiş yapılır.

İkinci sayfada, bir geri düğmesi ekleyebilirsiniz. Bu düğme Navigator.pop kullanılarak önceki sayfaya döndürülür.

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