Flutter’da Sayfalar Arası Geçiş – Flutter Navigation

Herkese merhaba bu yazımda Flutter’da sayfalar arası geçiş işlemini 3 adımda anlatacağım. Herhangi bir soru için yorum bırakabilir, öneri yönteminiz varsa başkaları için paylaşabilirsiniz. Adımlarımıza başlamadan önce temel mantığı kavramamız gerekiyor.

Flutter’da sayfalar arası geçiş yığın mantığına dayanır. Örneğin başlangıçta bir ana sayfamız olduğunu varsayalım. Bir “Kayıt Ol” ve “Giriş Yap” butonumuz olsun. Kullanıcı “Kayıt Ol” butonuna tıkladığında bizim ana sayfamızın üstüne yeni bir sayfa açılacak. Eğer kullanıcı geri tuşuna basarsa ana sayfaya geri gelmiş olacak. Tüm sayfalar birbiriyle bu ilişki üzerine çalışır. Bu nedenle işlemlerimizi dikkatli yapmamız gerekiyor.

Flutter’da sayfalar arası geçişi üç adımda yapacağız.

Flutter Navigation – Flutter’da Sayfalar Arası Geçiş

1- İki Rota Oluşturma

Rotalarımızı yani gideceğimiz sayfaları oluşturmadan önce bir Flutter dosyası oluşturup. “runApp” ile dosyayı çalışır duruma getirin.

<!-- HTML generated using hilite.me -->

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

Bu kodla ana sayfamızı “FirstRoute” olarak ayarlıyoruz.

Sonrasında ise iki adet “stateless widget” oluşturuyoruz. Bu widgetlar geçiş yapacağımız sayfalardır.

<!-- HTML generated using hilite.me -->

class FirstRoute extends StatelessWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

<!-- HTML generated using hilite.me -->

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

2 – Push Metoduyla İkinci Sayfaya Gitme

Yukarıdaki ilk “stateless widget” ana sayfa olarak tanımladığımız “FirstRoute” sayfası. Bu sayfanın başlığını ayarladık. Sonrasında ise bir “ElevatedButton” oluşturup bu butonun işlevini diğer sayfaya yönlendirme olarak ayarlamış olduk. Bunu

<!-- HTML generated using hilite.me -->

ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),

bu kodlarla yaptık. Gördüğünüz gibi öncelikle “ElevatedButton” oluşturduk. Bu butonda ne yazacağını “Text” widgetı ile ayarladık. Sonrasında ise “onpressed” ile butona tıkladığında hangi işlemin gerçekleştirildiğini tanımladık.

“push” uygulamayı metodu verdiğimiz sayfaya yönlendirmeyi sağlıyor. Kod üzerinde görüldüğü üzere ana sayfamızdaki butona basıldığı zaman uygulamamız “SecondRoute” isimli sayfaya yönlendirilecek.

3 – Pop Metoduyla İlk Sayfaya Geri Dönme

İkinci sayfamıza geri gittikten sonra telefonda yer alan geri tuşuna basarak ilk sayfaya dönebiliriz. İkinci “stateless widget” üzerinde yer alan

<!-- HTML generated using hilite.me -->

onPressed: () {
  Navigator.pop(context);
}

kodu sayesinde “Go Back!” butonuna tıkladığımızda ilk sayfaya dönmek üzere ayarlayacağız. O zaman devam edelim.

Kodların tamamı:

<!-- HTML generated using hilite.me -->

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

Belirttiğimiz 3 adım ile kolay bir şekilde Flutter’da Navigation yapısını yani sayfalar arası geçiş yapma yapabilirsiniz. Flutter ile ilgili daha fazla bilgiye ulaşmak adına sitemizi ziyaret edebilirsiniz. Birbirinden değerli yazılım bilgilerine ve ipuçlarına yer verdiğimiz web sitemizde, ücretsiz olarak eğitimler alabilirsiniz. Bir başka yazımızda siz değerli Kod10.com ziyaretçisi ile görüşmek üzere…