Navigator.push और pop से स्क्रीनों को पुश और पॉप करें, कंस्ट्रक्टर के ज़रिए डेटा पास करें, और जब स्क्रीन बंद हो तो एक परिणाम प्राप्त करें।
इस पाठ को Kodokon में खोलेंFlutter आपकी स्क्रीनों को एक स्टैक के रूप में संभालता है: Navigator.push एक नई स्क्रीन को ऊपर रखता है, Navigator.pop सबसे ऊपर वाली को हटा देता है और पिछली को सामने ले आता है। हर स्क्रीन एक रूट है, और MaterialPageRoute प्लेटफ़ॉर्म का मूल ट्रांज़िशन प्रदान करता है। Android का बैक बटन आपके लिए pop कॉल करता है, बिना कोड की एक भी लाइन के।
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home')),
body: Center(
child: FilledButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return const DetailScreen(
productName: 'Headphones',
);
},
),
);
},
child: const Text('View product'),
),
),
);
}
}अगली स्क्रीन को डेटा पास करने के लिए कोई जादुई तंत्र नहीं है: गंतव्य स्क्रीन किसी भी अन्य विजेट की तरह ही एक विजेट है, और यह अपना डेटा अपने कंस्ट्रक्टर के ज़रिए प्राप्त करती है। यह टाइप्ड है, स्पष्ट है, और यदि कोई फ़ील्ड छूट जाती है तो कंपाइलर आपको पकड़ लेता है। ध्यान दें कि पुश की गई स्क्रीन का AppBar बिना आपके कुछ लिखे ही बैक बटन दिखाता है।
import 'package:flutter/material.dart';
class DetailScreen extends StatelessWidget {
const DetailScreen({
super.key,
required this.productName,
});
final String productName;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(productName)),
body: Center(
child: FilledButton(
onPressed: () {
Navigator.pop(context, true);
},
child: const Text('Add to cart'),
),
),
);
}
}Navigator.push एक Future लौटाता है जो स्क्रीन के बंद होने पर पूरा होता है, उस वैल्यू के साथ जो pop को पास की गई थी। इसलिए आप किसी स्क्रीन के परिणाम की प्रतीक्षा (await) कर सकते हैं: एक पुष्टि, सूची से चुना गया कोई आइटम, एक भरा हुआ फ़ॉर्म। जेनेरिक टाइप push<bool> यह दस्तावेज़ित करता है कि आप वापस क्या पाने की उम्मीद करते हैं।
import 'package:flutter/material.dart';
Future<void> openDetail(BuildContext context) async {
final added = await Navigator.push<bool>(
context,
MaterialPageRoute<bool>(
builder: (context) {
return const DetailScreen(
productName: 'Headphones',
);
},
),
);
if (!context.mounted) return;
final message = (added ?? false)
? 'Product added to cart'
: 'No product added';
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(message)),
);
}