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

Ahmed Mahmoud

اخر تحديث :

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

النزول التلقائي اصبح موضه تستخدم في تطبيقات الجوال وليس كثير من المبرمجين قادرين على تنفيذ هذه العمليه بشكل صحيح ولهذا قام احد الاشخاص المبدعين في 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 سواء بشكل افقي ام عمودي .

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),
       ),
  ),

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