Flutter da bir önceki ekrana nasıl veri gönderilir? 💫 🌌 ✨

Bazı durumlarda bir ekrandaki verileri başka bir ekrana döndürmek isteyebilirsiniz. Örneğin, bir kullanıcıya iki seçenek sunan yeni bir ekranınızın olduğunu varsayalım. Kullanıcı bir seçeneğe tıkladığında, bu bilgi üzerinde hareket edebilmesi için kullanıcının seçimiyle ilgili ilk ekranını bilgilendirmek isteyebilirsiniz.

Bunu Navigator.pop() method'unu kullanarak yapabiliriz:

ÖRNEK

1. Ana ekranı tanımlayın

Bu örnekte:

Ana ekranda bir buton görüntülenir. Butona tıklanıldığında, SelectionScreen isimli ekran açılır.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Returning Data Demo'),
      ),
      body: const Center(
        child: SelectionButton(),
      ),
    );
  }
}

1. Tıklanıldığında SelectionScreen ekranını açan SelectionButton'unu oluşturun

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: const Text('Pick an option, any option!'),
    );
  }

  void _navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const SelectionScreen()),
    );
  }
}

1. İki buton içeren bir SelectionScreen ekranını oluşturun

Kullanıcı bir butona tıkladığında seçim ekranı kapanır ve ana ekrana kullanıcının hangi butona tıkladığının bilgisi iletilir.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Pick an option'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                },
                child: const Text('Yep!'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                },
                child: const Text('Nope.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

1. Yep butonuna tıklanıldığında SelectionScreen ekranını kapatın

Verileri ilk ekrana döndürmek için, result olarak adlandırılan isteğe bağlı ikinci bir bağımsız değişkeni kabul eden Navigator.pop() method'unu kullanabilirsiniz.

Yep button

Bu kod butona tıklanıldığında SelectionScreen ekranını kapatır ve HomeScreen ekranına 'Yep!' metnini gönderir.

ElevatedButton(
  onPressed: () {
    Navigator.pop(context, 'Yep!');
  },
  child: const Text('Yep!'),
)

Nope button

Bu kod butona tıklanıldığında SelectionScreen ekranını kapatır ve HomeScreen ekranına 'Nope.' metnini gönderir.

ElevatedButton(
  onPressed: () {
    Navigator.pop(context, 'Nope.');
  },
  child: const Text('Nope.'),
)

5. Seçimle birlikte ana ekranda bir snackbar gösterin

Değerlerimizi döndürdüğümüze göre artık, SelectionButton'da _navigateAndDisplaySelection() yöntemini kullanarak sonucu görüntüleyen bir snackbar gösterebiliriz:

SelectionScreen ekranını kapatırken gönderdiğimiz değerler aşağıdaki result değişkenine depolanır.

void _navigateAndDisplaySelection(BuildContext context) async {
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const SelectionScreen()),
  );

  ScaffoldMessenger.of(context)
    ..removeCurrentSnackBar()
    ..showSnackBar(SnackBar(content: Text('$result')));
}

reference