شرح استخدام AnimatedPositioned في فلاتر

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

ما هو AnimatedPositioned في فلاتر؟

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

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

خصائص AnimatedPositioned

AnimatedPositioned يأتي مع العديد من الخصائص التي يمكن تخصيصها حسب الحاجة. فيما يلي شرح لجميع الخصائص المتاحة في AnimatedPositioned:

1. left

يحدد موقع العنصر من اليسار.

AnimatedPositioned(
  left: 50.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
),

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

2. top

يحدد موقع العنصر من الأعلى.

AnimatedPositioned(
  top: 50.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
),

3. right

يحدد موقع العنصر من اليمين.

AnimatedPositioned(
  right: 50.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
),

4. bottom

يحدد موقع العنصر من الأسفل.

AnimatedPositioned(
  bottom: 50.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
),

5. width

يحدد عرض العنصر.

AnimatedPositioned(
  width: 200.0,
  child: Container(
    height: 100.0,
    color: Colors.red,
  ),
),

6. height

يحدد ارتفاع العنصر.

AnimatedPositioned(
  height: 200.0,
  child: Container(
    width: 100.0,
    color: Colors.red,
  ),
),

7. duration

يحدد مدة التحريك.

AnimatedPositioned(
  duration: Duration(seconds: 1),
  left: 50.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
),

8. curve

يحدد نمط التحريك.

AnimatedPositioned(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  left: 50.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
),

9. onEnd

يحدد الدالة التي سيتم استدعاؤها عند انتهاء التحريك.

AnimatedPositioned(
  duration: Duration(seconds: 1),
 onEnd: () {
    print("Animation ended!");
  },
  left: 50.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
),

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

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