Flutter هي إطار عمل مفتوح المصدر تم إنشاؤها بواسطة شركة Google وتستخدم لتطوير تطبيقات الهواتف المحمولة والويب. توفر Flutter العديد من العناصر الواجهة المستخدمة لبناء واجهات مستخدم جميلة وديناميكية. واحدة من هذه العناصر هي AnimatedSize، والتي تستخدم لتحريك عنصر الواجهة التي تتغير حجمها.
ما هو AnimatedSize؟
يمثل AnimatedSize عنصر واجهة Flutter يتيح للمطورين إضافة تحريكات إلى العناصر التي تتغير حجمها. يتم استخدام AnimatedSize عادةً لتحريك عناصر الواجهة التي تتغير حجمها، مثل الصور والنصوص.
“اقرأ أيضاً: شرح استخدام ويدجت ClipRect في فلاتر“
خصائص AnimatedSize
تحتوي AnimatedSize على مجموعة من الخصائص التي يمكن تعيينها لتحديد سلوك العنصر المحرك. يتم تفصيل الخصائص في الأسفل:
duration
تحدد هذه الخاصية مدة التحريك، أي الوقت الذي يستغرقه AnimatedSize لإكمال التحريك. يمكن تعيين هذه الخاصية عبر الكود التالي:
duration: Duration(milliseconds: 500),
“اقرأ أيضاً: شرح استخدام ويدجت Offstage في فلاتر“
curve
يتيح لك هذا الخيار تحديد الانحناء (curvature) للحركة، أي مدى تسارع وتباطؤ العنصر المحرك. يمكن تعيين هذه الخاصية عبر الكود التالي:
curve: Curves.fastOutSlowIn,
alignment
يحدد موضع وضع العنصر المحرك في الأصل. يمكن تعيين هذه الخاصية عبر الكود التالي:
alignment: Alignment.center,
reverseDuration
تحدد مدة التحريك عند عكس العنصر المحرك. يمكن تعيين هذه الخاصية عبر الكود التالي:
reverseDuration: Duration(milliseconds: 500),
clipBehavior
تحدد ما إذا كان AnimatedSize يجب أن يقص العنصر المحرك إذا كان خارج حدود العنصر الأصلي. يمكن تعيين هذه الخاصية عبر الكود التالي:
clipBehavior: Clip.hardEdge,
كيفية استخدام AnimatedSize
يمكن استخدام AnimatedSize بسهولة في Flutter. يمكن استخدام AnimatedSize داخل أي عنصر الواجهة وتحديد العنصر الذي يتم تحريكه. يمكن استخدام الخصائص المذكورة أعلاه لتعديل سلوك العنصر المحرك.
هذا هو مثال بسيط لاستخدام AnimatedSize:
double _height = 100;
double _width = 100;
AnimatedSize(
duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn,
vsync: this,
alignment: Alignment.center,
reverseDuration: Duration(milliseconds: 500),
reverseCurve: Curves.fastOutSlowIn,
clipBehavior: Clip.hardEdge,
child: Container(
height: _height,
width: _width,
),
)
في هذا المثال، تم تعيين AnimatedSize لتحريك عنصر الواجهة Container عند تغيير حجمه. تم تعيين الخصائص المختلفة المذكورة أعلاه لتحديد سلوك العنصر المحرك وتحسين تجربة المستخدم.
“اقرأ أيضاً: شرح استخدام ويدجت TextButton في فلاتر“
AnimatedSize هو عنصر واجهة رائع في Flutter يسمح للمطورين بإضافة تحريكات رائعة إلى العناصر التي تتغير حجمها. يمكن تعيين الخصائص المختلفة المذكورة أعلاه لتحديد سلوك العنصر المحرك وتحسين تجربة المستخدم. استخدام AnimatedSize سهل وبسيط، ويمكن استخدامه لتحريك العديد من العناصر الواجهة المختلفة، مثل الصور والنصوص والأيقونات. بإضافة AnimatedSize إلى تطبيق Flutter الخاص بك، يمكنك جعل واجهة المستخدم الخاصة بك أكثر جاذبية وديناميكية.
