شرح استخدام ويدجت Hero في فلاتر

يعتبر تأثير الانتقال السلس بين الشاشات من العوامل المهمة لتحسين تجربة المستخدم في تطبيقات الهواتف الذكية. في Flutter، يتم تحقيق هذا التأثير باستخدام عنصر Hero. في هذه المقالة، سنتحدث عن عنصر Hero في Flutter وجميع خصائصه التي يمكن استخدامها لإضافة تأثيرات الانتقال السلس بين الشاشات.

ما هو عنصر Hero في Flutter؟

يعتبر عنصر Hero في Flutter عبارة عن عنصر يستخدم لإنشاء تأثير الانتقال السلس بين الشاشات. يتم تحريك العنصر Hero من شاشة إلى أخرى بينما يتم تكبير الحجم بشكل تدريجي، ويعطي هذا التأثير الانتقال بين الشاشات مظهرًا سلسًا وجميلًا. يستخدم عادةً في تطبيقات الهواتف الذكية لإضافة تأثيرات الانتقال السلس بين صفحات التطبيق.

“اقرأ أيضاً: شرح استخدام ويدجت Wrap في فلاتر“

خصائص عنصر Hero في Flutter

يحتوي عنصر Hero في Flutter على العديد من الخصائص التي يمكن استخدامها لتخصيص سلوك العنصر. سنتحدث بالتفصيل عن كل خاصية من هذه الخصائص ونوضحها بالأكواد الكاملة المناسبة.

الخاصية tag

تحدد عنصر tag الذي يتم استخدامه لتحديد عنصر Hero الذي سيتم الانتقال إليه بين الشاشات. يمكن تعيين هذه الخاصية عبر الكود التالي:

Hero(
  tag: 'food-image',
  child: Image.asset('assets/images/food.jpg'),
)

“اقرأ أيضاً: شرح استخدام ويدجت Positioned في فلاتر“

الخاصية flightShuttleBuilder

تحدد عنصر flightShuttleBuilder الذي يتم استخدامه لتخصيص العنصر الذي يتم عرضه خلال عملية الانتقال بين الشاشات. يمكن تعيين هذه الخاصية عبر الكود التالي:

Hero(
  tag: 'food-image',
  flightShuttleBuilder: (BuildContext flightContext, Animation<double> animation, HeroFlightDirection flightDirection, BuildContext fromHeroContext, BuildContext toHeroContext) {
    return Image.asset('assets/images/food.jpg');
  },
  child: Image.asset('assets/images/food.jpg'),
);

الخاصية placeholderBuilder

تحدد عنصر placeholderBuilder الذي يتم استخدامه لتخصيص العنصر الذي يتم عرضه أثناء تحميل الصفحة الجديدة. يمكن تعيين هذه الخاصية عبر الكود التالي:

Hero(
  tag: 'food-image',
  placeholderBuilder: (BuildContext context, Size size, Widget child) {
    return CircularProgressIndicator();
  },
  child: Image.asset('assets/images/food.jpg'),
);

“اقرأ أيضاً: شرح استخدام ويدجت PositionedTransition في فلاتر“

عنصر Hero في Flutter يتيح إضافة تأثيرات الانتقال السلس بين الشاشات وتحسين تجربة المستخدم في تطبيقات الهواتف الذكية. يمكن استخدام العديد من الخصائص المتاحة في عنصر Hero لتخصيص سلوك العنصر وتحقيق التأثير المطلوب. من خلال شرح جميع الخصائص المتاحة في عنصر Hero، يمكن للمطورين في Flutter البدء في استخدام هذا العنصر وتحسين تجربة المستخدم في تطبيقاتهم.