شرح كيفية اضافة رسوم متحركه في flutter وامكانية الضغط عليها للايقاف والتشغيل

 شرح كيفية اضافة رسوم متحركه في flutter وامكانية الضغط عليها للايقاف والتشغيل

كما نعلم ان مكتبة lottie من اقوى المكتبات المخصصه في التعامل مع الرسوم المتحركه بصيغة json وهذا الامر يفيد المطورين بشكل كبير ويحسن من التطبيقات الخاصه بهم ولهذا في مقالة اليوم سوف نشارك معكم كيفية التعامل بشكل متقدم مع مكتبة lottie وكيفية عرض الصور منها سواء من الانترنت من الملفات الموجوده بداخل الflutter وكيفية التحكم في العنصر ومدى التشغيل والايقاف وكل شيئ بإذن الله ولهذا تابع المقالة للنهايه لكي تستفاد وحاول ان تشاركها لتفيد الغير .

ظهرت لغة دارت في سنة 2011 و فلاتر ظهر في سنة 2017 وهذا يعني انهاومن بيئات العمل الجديده وللمعلومية flutter من تطوير العملاق جوجل والتي تطور الكثير من اللغات وتهتم بعالم البرمجه بشكل كبير جدا وهي ايضا من قامت بتطوير كوتلن والمختصه بتطوير تطبيقات الاندرويد واصبحت المنافسه للجافا وذلك بعد المشاكل التي واجهتها جوجل بسبب التطبيقات المطوره باستخدام جافا على Google play واصبحت تقدم الكثير من libraries التي تسهل على المطورين العمل وتسهل عليهم الكثير من الوقت في انشاء وتطوير تطبيقات الجوال بشكل سريع .

Flutter كغيرها من بيئات العمل سوف تواجه مشاكل مع التطبيقات التي تظهر بواسطتها ولكن لا تقلق فقد لا تشاهد مشاكل سوا في المشاريع الكبيره جدا ولكن كتطبيقات بسيطه او متوسطه فلا تقلق منها اطلاقا ودائما نجد استمراريه في التطوير من قبل جوجل لحل المشاكل التي تواجه المستخدمين بشكل كبير ، وهذا ما يجعل المبرمجين ينتقلون الى هذه اللغه والتعامل معها في الفترات الاخيره وترك باقي اللغات ، ونحن سنشارك معكم شروحات في تطوير  التطبيقات بشكل مبسط لكم .

اضافة مكتبة Lottie

dependencies:

  lottie: ^1.2.1

كيفية تشغيل الرسوم المتحركه بشكل مستمر وايقاف التشغيل عن طريق النقر عليها

ببساطة سوف تشاهد في الكود صورتين الاولى وهي تتحرك بشكل ثابت وعند الانتهاء تبدء من اول وجديد والاخرى سوف نجري عليها بعض التعديلات لكي تعمل عندما نضغط عليها ولهذا سوف نجعل التصميم بداخل الstateFulWudget لكي نستطيع التعامل مع هذه العناصر ومدة الانتهاء سوف تكون ثانيتين يمكنك تغيير المده وهذا سوف يكون للcontroller , بعدها قمنا بعمل متغير من نوع bool باسم isPlay وسوف نقوم بتغيير قيمته عند النقر , لان عند النقر على العنصر الثاني سوف يختبر هل القيمة صحيحه ام لا اذا كانت صحيحه سوف يبدء من البدايه للنهايه واذا لم تكن صحيحه سوف يبدء من النهايه للبداية بشكل عكسي يظهر يظهر للمستخدم تفاصيل الانميشن بشكل افضل .

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

Lottie.dart

class CodeLess extends StatefulWidget {
  const CodeLess({Key? key}) : super(key: key);

  @override
  State<CodeLess> createState() => _CodeLessState();
}

class _CodeLessState extends State<CodeLess> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    // don't forgot with SingleTickerProviderStateMixin after class _CodeLessState
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 2),
        vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  bool isPlay = false;

  @override
  Widget build(BuildContext context){
      return Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Lottie don't edit
              Center(
	child:Lottie.network('https://assets3.lottiefiles.com/private_files/lf30_yW6wWo.json' ,
                  height: 200 ,
                  width: 150), ),

              Center(
                child:GestureDetector(
                  onTap: (){
                      if (isPlay == false) {
                        isPlay = true;
                        _controller.forward();
                      } else {
                        isPlay = false;
                        _controller.reverse();
                      }
                  },
                  // Lottie clickable
                  child: Lottie.network
                    ('https://assets1.lottiefiles.com/packages/lf20_3zkmdxkq.json' ,
                      height: 200 ,
                       width: 150 ,
                        controller: _controller),
                ),
              ),
            ],

          )
      );
  }
}

مزيد من المقالات

1. حل مشكلة no connected devices found flutter
2. كيفية عمل تأثير تاخير ظهور بعض العناصر لبضع ثواني في Flutter
3. اضافة toast لتطبيقك وكيفية التعامل معه داخل ملف components
4. اضافة عداد للعناصر badges الموجوده في السلة Flutter
5. شرح إنشاء صفحة onBoarding في flutter تظهر في البدايه