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

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

ما هو AnimatedIcon؟

AnimatedIcon هو عنصر واجهة مستخدم في Flutter يُستخدم لإنشاء رموز رسومية متحركة. يحتوي AnimatedIcon على عدة تأثيرات وخصائص متعددة تسمح بتخصيص الرمز المتحرك بشكل كامل.

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

خصائص AnimatedIcon

يحتوي AnimatedIcon على العديد من الخصائص التي يمكن تعيينها لتخصيص الرمز المتحرك. يتم تفصيل الخصائص في الأسفل:

icon

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

icon: AnimatedIcons.play_pause,

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

progress

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

late AnimationController _controller;
progress: controller,

color

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

color: Colors.blue,

size

تحدد حجم الرمز الرسومي. يمكن تعيين هذه الخاصية عبر الكود التالي:

size: 50.0,

semanticLabel

تحدد وصفًا وصفيًا للرمز الرسومي. يمكن تعيين هذه الخاصية عبر الكود التالي:

semanticLabel: 'Play Button',

استخدام AnimatedIcon في Flutter

يمكن استخدام AnimatedIcon في تطبيقك عن طريق إنشاء عنصر Icon وتحويله إلى AnimatedIcon. في المثال التالي، يتم إنشاء AnimatedIcon لرمز الرسومي PlayArrow:

AnimatedIcon(
  icon: AnimatedIcons.play_pause,
  progress: _animationController,
),

يتم تحديد الرمز الرسومي المستخدم في AnimatedIcon عن طريق خاصية icon. ويتم تحديد لون وحجم الرمز الرسومي عن طريق الخصائص color و size على التوالي. ويتم تحديد لوحة التحكم المستخدمة في AnimatedIcon عن طريق خاصية progress.

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

AnimatedIcon هو عنصر واجهة مستخدم رائع في Flutter يُسهل إنشاء رموز رسومية متحركة وجذابة. تتيح لك العديد من الخصائص المتاحة في AnimatedIcon تخصيص الرمز المتحرك بشكل كامل. يمكنك استخدام AnimatedIcon في تطبيقك عن طريق إنشاء عنصر Icon وتحويله إلى AnimatedIcon.