ادفع الشاشات وأزلها باستخدام Navigator.push وpop، ومرِّر البيانات عبر البواني، واسترجع نتيجة عند إغلاق الشاشة.
افتح هذا الدرس في Kodokonيدير Flutter شاشاتك على شكل مكدّس (stack): يضع Navigator.push شاشة جديدة في الأعلى، ويزيل Navigator.pop الشاشة العليا ويكشف الشاشة السابقة. كل شاشة هي مسار (route)، ويوفر MaterialPageRoute الانتقال الأصلي للمنصّة. ويستدعي زر الرجوع في أندرويد 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. لذا يمكنك انتظار نتيجة شاشة: تأكيد، أو عنصر مُختار من قائمة، أو نموذج مملوء. ويوثّق النوع العام 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)),
);
}