تكرار السؤال: …
الإجابة المختصرة
تنشئ Hero حركة انتقال سلسة لعنصر مشترك بين مسارين في الـ Navigator عبر نقله في طبقة الـ Overlay؛ ويتحكم flightShuttleBuilder في شكل العنصر أثناء الطيران بينما يحدد createRectTween مسار الحركة الفيزيائي.
الشرح
عند الانتقال بين شاشتين تحتويان على ويدجت Hero بنفس الـ tag، يقوم الـ HeroController بحساب إحداثيات ومقاسات العنصر في المسار الأصلي والمسار الجديد. بعد ذلك ينشئ العنصر في طبقة الـ Overlay المشتركة ويحركه عبر RectTween. يتيح flightShuttleBuilder تخصيص مظهر العنصر أثناء الطيران (مثلاً لإخفاء نصوص أو تغيير زوايا التدوير)، بينما يتيح createRectTween تغيير مسار الحركة من خط مستقيم إلى مسار منحني أو قوسي (مثل MaterialRectArcTween).
مثال بالكود
Hero(
tag: 'avatar-user-42',
createRectTween: (begin, end) => MaterialRectArcTween(begin: begin, end: end),
flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
return const CircleAvatar(radius: 40, backgroundColor: Colors.teal);
},
child: const CircleAvatar(radius: 40),
)أخطاء شائعة
- تكرار نفس الـ Hero tag في نفس الشاشة، مما يسبب استثناءً صريحاً وتوقف الـ Transition.
- استخدام Hero لعناصر ضخمة ومعقدة تحتوي على State داخلي معقد قد يفقد حالته أثناء الطيران في الـ Overlay.