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
- 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(),
),
);
}
}
- Tıklanıldığında
SelectionScreenekranını açanSelectionButton'unuoluş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()),
);
}
}
- İ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.'),
),
)
],
),
),
);
}
}
- 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')));
}
Top comments (0)