شرح كيفية اضافة رسوم متحركه في 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),
),
),
],
)
);
}
}
مزيد من المقالات
