كيفية تحريك الحوارات في الرفرفة؟ هنا هو الجواب

الصورة من قبل ماركوس سبيس على Unsplash

مرحبا ، أنا مايور. هذه هي المادة الأولى في حياتي وعلى المتوسط ​​أيضا.

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

هناك الكثير من المقالات الرائعة للبدء في استخدام الرسوم المتحركة في Flutter. لكن لسوء الحظ ، لا تغطي الرسوم المتحركة للحوار.

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

حوار بسيط

يحتوي Flutter على showDialog () لإظهار الحوارات الأساسية مع الرسوم المتحركة الأساسية. تتبع GIF يظهر مربع حوار أساسي في Flutter.

showDialog ()

لذلك ، دعنا نحفزها.

Internally Flutter المكالمات showGeneralDialog () عبر showDialog ().

دعنا الغوص في showGeneralDialog (). وهنا بعض المعلمات.

المستقبل showGeneralDialog ({
 @ سياق BuildContext ،
 @ طلب RoutePageBuilder pageBuilder ،
 حاجز منطقي
 حاجز السلسلة Label ،
 حاجز اللوناللون
 مدة الانتقالالمدة ،
 RouteTransitionsBuilder extensionBuilder ،
})

ملاحظة: جميع الوسائط مطلوبة وإلا سيحدث بعض الأخطاء.

بعض الوسائط الرئيسية في showGeneralDialog هي

  1. barrierDismissible -> يحدد ما إذا كان الحوار يمكن رفضه أم لا.
  2. barrierColor -> لون خلفية الحوار.
  3. transferDuration -> مدة الرسوم المتحركة عندما يظهر مربع الحوار ويختفي.
  4. transferBuilder -> يأخذ RouteTransitionsBuilder وظيفة منشئ ، تسمى مع قيم الرسوم المتحركة كلما احتاج الحوار إلى إعادة إنشاء. يظهر التنفيذ أدناه.
typedef RouteTransitionsBuilder = وظيفة القطعة (سياق BuildContext ، الرسوم المتحركة الرسوم المتحركة ، الرسوم المتحركة الثانوية ، الرسوم المتحركة ، عنصر واجهة المستخدم) ؛
المعلمة الرئيسية ل RouteTransitionsBuilder هي الرسوم المتحركة. يمكنك استخدامه لتحريك الأشياء في مربع الحوار.

لذلك ، دعونا نقوم ببعض الإجراءات العملية

  1. استدارة
استدارة
استيراد "الحزمة: vector_math / vector_math.dart" كـ math؛
showGeneralDialog (
    السياق: السياق ،
    pageBuilder: (السياق ، anim1 ، anim2) {} ،
    حاجز غير مقبول: صحيح ،
    barrierColor: Colors.black.withOpacity (0.4) ،
    barrierLabel: ''،
    transferBuilder: (السياق ، anim1 ، anim2 ، الطفل) {
      إرجاع Transform.rotate (
        الزاوية: الرياضيات.الراديان (anim1.value * 360) ،
        الطفل: AlertDialog (
          شكل:
              OutlineInputBorder (borderRadius: BorderRadius.circular (16.0)) ،
          العنوان: نص ("Hello !!") ،
          المحتوى: النص ("كيف حالك؟") ،
        )،
      )؛
    }،
    انتقال المدة: المدة (ميلي ثانية: 300)) ؛

2. تدوير مع التعتيم

تدوير مع التعتيم
استيراد "الحزمة: vector_math / vector_math.dart" كـ math؛
showGeneralDialog (
    السياق: السياق ،
    pageBuilder: (السياق ، anim1 ، anim2) {} ،
    حاجز غير مقبول: صحيح ،
    barrierColor: Colors.black.withOpacity (0.4) ،
    barrierLabel: ''،
    transferBuilder: (السياق ، anim1 ، anim2 ، الطفل) {
      إرجاع Transform.rotate (
        الزاوية: الرياضيات.الراديان (anim1.value * 360) ،
        الطفل: التعتيم (
          التعتيم: anim1.value ،
          الطفل: AlertDialog (
            شكل:
                OutlineInputBorder (borderRadius: BorderRadius.circular (16.0)) ،
            العنوان: نص ("Hello !!") ،
            المحتوى: النص ("كيف حالك؟") ،
          )،
        )،
      )؛
    }،
    انتقال المدة: المدة (ميلي ثانية: 300)) ؛
آه ، هذه بعض الرسوم المتحركة البسيطة دعنا نقوم ببعضها. هيا نستخدم المنحنيات.

3. المنحنيات

باستخدام منحنى easyInutBack
showGeneralDialog (
    barrierColor: Colors.black.withOpacity (0.5) ،
    transferBuilder: (السياق ، a1 ، a2 ، القطعة) {
      final curvedValue = Curves.easeInOutBack.transform (a1.value) - 1.0؛
      تحويل العائد (
        convert: Matrix4.translationValues ​​(0.0، curvedValue * 200، 0.0)،
        الطفل: التعتيم (
          التعتيم: a1.value ،
          الطفل: AlertDialog (
            الشكل: OutlineInputBorder (
                borderRadius: BorderRadius.circular (16.0)) ،
            العنوان: نص ("Hello !!") ،
            المحتوى: النص ("كيف حالك؟") ،
          )،
        )،
      )؛
    }،
    انتقال المدة: المدة (ميلي ثانية: 200) ،
    حاجز غير مقبول: صحيح ،
    barrierLabel: ''،
    السياق: السياق ،
    pageBuilder: (context، animation1، animation2) {})؛

4. مقياس

مقياس
showGeneralDialog (
    barrierColor: Colors.black.withOpacity (0.5) ،
    transferBuilder: (السياق ، a1 ، a2 ، القطعة) {
      إرجاع Transform.scale (
        مقياس: a1.value ،
        الطفل: التعتيم (
          التعتيم: a1.value ،
          الطفل: AlertDialog (
            الشكل: OutlineInputBorder (
                borderRadius: BorderRadius.circular (16.0)) ،
            العنوان: نص ("Hello !!") ،
            المحتوى: النص ("كيف حالك؟") ،
          )،
        )،
      )؛
    }،
    انتقال المدة: المدة (ميلي ثانية: 200) ،
    حاجز غير مقبول: صحيح ،
    barrierLabel: ''،
    السياق: السياق ،
    pageBuilder: (context، animation1، animation2) {})؛
إذا كنت بحاجة إلى مزيد من التخصيص ، يمكنك زيارة دليل Flutter Animations ويمكنك تطبيق المنطق الخاص بالبرنامج على Animations. من هذه الطريقة يمكنك استخدام أي منحنى ، أي نوع من الرسوم المتحركة.
تحتاج فقط للعب مع القيم .

إذا أعجبك المقال ، فما عليك سوى النقر فوق . معدل من أصل 50. وداعا.