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

Flutter هي إطار عمل مفتوح المصدر تم إنشاؤها بواسطة شركة Google وتستخدم لتطوير تطبيقات الهواتف المحمولة والويب. توفر Flutter العديد من العناصر الواجهة المستخدمة لبناء واجهات مستخدم جميلة وديناميكية. واحدة من هذه العناصر هي AnimatedSwitcher، والتي تستخدم لتحويل بين عناصر مختلفة في واجهة المستخدم.

ما هو AnimatedSwitcher؟

AnimatedSwitcher هو عنصر واجهة Flutter يتيح للمطورين إضافة تحويرات إلى العناصر التي تتغير في واجهة المستخدم. يتم استخدام AnimatedSwitcher عادةً لتغيير بين العناصر المختلفة في واجهة المستخدم، مثل الصور والنصوص.

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

خصائص AnimatedSwitcher

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

duration

تحدد هذه الخاصية مدة التحوير، أي الوقت الذي يستغرقه AnimatedSwitcher لإكمال التحوير. يمكن تعيين هذه الخاصية عبر الكود التالي:

duration: Duration(milliseconds: 500),

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

reverseDuration

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

reverseDuration: Duration(milliseconds: 500),

switchInCurve

تحدد الانحناء (curvature) للتحوير عند تحويل العنصر إلى الوضع الظاهر. يمكن تعيين هذه الخاصية عبر الكود التالي:

switchInCurve: Curves.easeIn,

switchOutCurve

تحدد الانحناء (curvature) للتحوير عند تحويل العنصر إلى الوضع المخفي. يمكن تعيين هذه الخاصية عبر الكود التالي:

switchOutCurve: Curves.easeOut,

transitionBuilder

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

transitionBuilder: (Widget child, Animation<double> animation) {
  return ScaleTransition(
    scale: animation,
    child: child,
  );
},

layoutBuilder

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

layoutBuilder: (context, List<Widget> children) {
  return SizedBox(
    height: 200.0,
    child: Stack(
      children: children,
    ),
  );
},

استخدام AnimatedSwitcher في Flutter

لإستخدام AnimatedSwitcher في تطبيقك، يجب أولاً استيراد العنصر من حزمة Flutter الرسمية. يمكنك القيام بذلك عن طريق إضافة السطر التالي إلى ملف الـdart الخاص بالشاشة التي تريد استخدام AnimatedSwitcher فيها:

import 'package:flutter/material.dart';

بعد ذلك، يمكن إنشاء AnimatedSwitcher وتعيين الخصائص اللازمة للعنصر. يمكن استخدام الكود التالي كنموذج لإستخدام AnimatedSwitcher:

AnimatedSwitcher(
  duration: Duration(milliseconds: 500),
  child: Container(
    key: UniqueKey(),
    height: 100,
    width: 100,
    color: Colors.blue,
  ),
),

في هذا المثال، يتم إنشاء AnimatedSwitcher ويتم تعيين الخاصية duration لتحديد مدة التحوير. ثم، يتم إنشاء Container وتعيين الخاصية key لتحديد مفتاح فريد للعنصر. يتم استخدام هذا المفتاح لتعريف العنصر المختلف المحرك. يتم تعيين الخصائص الأخرى لتحديد مظهر العنصر.

عند تشغيل التطبيق، يتم عرض العنصر المحرك الأول. عند تغيير العنصر المحرك، يتم تشغيل التحوير بواسطة AnimatedSwitcher بتطبيق الخصائص المحددة.

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

AnimatedSwitcher هو عنصر واجهة رائع في Flutter يتيح للمطورين إضافة تحويرات إلى العناصر التي تتغير في واجهة المستخدم. يحتوي AnimatedSwitcher على عدة خصائص يمكن تعيينها لتحديد سلوك العنصر المحرك. يمكن استخدام AnimatedSwitcher بسهولة في تطبيقات Flutter لإضافة تحويرات ديناميكية.