شارك المقالة

كيفية اضافة خاصية النزول التلقائي في فلاتر || how to add auto scroll in flutter


كيفية اضافة خاصية النزول التلقائي في فلاتر

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


الفلاتر عبارة عن مجموعة تطوير تطبيقات الهاتف المحمول (SDK) تسمح لك بكتابة تطبيق في قاعدة بيانات واحدة وترجمته لكل من Android و iOS. وفقًا لتعريف إطار العمل الرسمي لـ Wikipedia ، فإن مرشحات Flutter هي إطار عمل.

تم إنشاء Flutter Framework من الألف إلى الياء ، مع استخدام Dart و C ++ لكتابته وبنائه. لا يزال في مرحلة تجريبية ، وبالتالي تم إصدار إطار عمل المرشحات رسميًا ولكنه لا يزال في المراحل الأولى من النجاح. هل ستعمل أم لا؟ هذا هو الموقف الذي يجد فيه إطار عمل المرشحات نفسه حاليًا ، ويبدو أنه ينجح.

يتفاعل إطار عمل المرشحات مع لغة برمجة Dart ويستخدم في الغالب لتطوير واجهة المستخدم.


add package

scroll_loop_auto_scroll: ^0.0.5


how to add auto scroll in flutter


في الكود التالي قمنا بعمل appbar فارغ يحتوي على نفس لون الصفحة التي نعمل عليها وبعدها قمنا باستخدام المكتبة لتنفيذ عملية النزول التلقائي في التطبيق وذلك يكون عن طريق استخدام الامر ScrollLoopAutoScroll وهو الذي يسمح لنا بامكانية النزول التلقائي بشكل سليم ومن هذه المكتبة تستطيع تخصيص الوقت الذي ترغب به في سرعة النزول التلقائيه وايضا تحديد العناصر التي ترغب بان تقوم بالنزول لها وهنا قمنا بعمل List تحتوي على مجموعه من الارقام تم تكرارها 50 مره وايضا تسمح لك المكتبة بامكانية تحديد اتجاة الscroll سواء بشكل افقي ام عمودي . 


how to add auto scroll in flutter

ui.dart


ScrollLoopAutoScroll(
  scrollDirection: Axis.vertical,
  duration: Duration(seconds: 250),
     child: Column(
        children: [
          for (int i=0;i<50;i++)
        Container(
         height: 80,
         width: MediaQuery.of(context).size.width - 40,
         color: Colors.green,
         alignment: Alignment.center,
         child: const Text(
         'ONE',
         style: TextStyle(
         color: Colors.white,
         fontSize: 20,
         fontWeight: FontWeight.bold),
       ),
  ),
  


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

  1. حل مشكلة minCompileSdk (31) specified in a dependency’s AAR
  2. عمل مؤشر لتتبع الخطوات في فلاتر | flutter stepper
  3.  كود منع تدوير الشاشه في التطبيقات بإستخدام فلاتر
  4.  شرح كيفية عمل post للبيانات من نوع params داخل الapi في flutter
  5. شرح كيفية استخدام الapi مع repostery في Flutter وتنظيم الكود


شاهد أيضًا
مقالات ذات صلة
اضافة امكانية اختيار الصور مثل الموجوده في تطبيق انستقرام داخل تطبيقات فلاتر

اضافة امكانية اختيار الصور مثل الموجوده في تطبيق انستقرام داخل تطبيقات فلاتر في هذا المقال…

التاكد من وجود doc في Flutter بإستخدام الفايربيز

التاكد من وجود doc في Flutter بإستخدام الفايربيز هذا الدرس يعتبر قريب جدا من الدرس…

تخصيص شكل side menu في flutter بدون مكتبات مع تصميم مختلف

تخصيص شكل side menu في flutter بدون مكتبات مع تصميم مختلف الاسباب التي تجعل موقعك…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع