كيفية انتظار الصوره الى ان يتم تحميلها في Flutter وعرضها عند اكتمال التحميل وتغيير علامة التحميل

Ahmed Mahmoud

اخر تحديث :

كيفية انتظار الصوره الى ان يتم تحميلها في Flutter وعرضها عند اكتمال التحميل وتغيير علامة التحميل

عند التعامل مع بيانات من الانترنت سواء api او حتى firebase تاتي احيانا الصور بشكل ابطأ من باقي البيانات وذلك لانها تحتوي على تفاصيل وتحتاج الى ان تقوم بتحمليها وهذه العمليه تستغرق وقت حسب سرعة الانترنت لديك وليس من المنطقي ان تترك الصورة كما هيا الى ان يتم تحميلها بل تستطيع بكل سهوله من خلال هذا الدرس ان تقوم بوضع اي animation او تصميم تريده الى ان يتم تحميل الصورة وعند الانتهاء من التحميل سوف يكون هناك fade animation لظهور الصورة وهذا يعطي لتصميمك شكل جمالي اكثر .

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

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

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

نحتاج الى استخدام مكتبة transparent_image

dependencies:
transparent_image: ^2.0.0

عرض الصور من الانترنت والانتظار الى ان يتم تحميل الصوره

في هذا التصميم قمنا بعمل stack بداخله تصميم لشكل الصورة وعلامة التحميل حيث ان علامة التحميل تكون فوق الصورة واسفلها مباشرة الصورة التي نحصل عليها من الانترنت باستخدام المكتبة وعند حدوث اي مشكلة سوف نقوم بعرض صورة من الصور الموجوده لدينا في التطبيق بشكل Local واذا لم يكن هناك اي مشكلة سوف يتم عرض الصورة من الانترنت فوق ايقونة التحميل وبهذا سوف تختفي ايقونة التحميل يمكنك عمل ايقونة التحميل بمدة معينه مثل timer وبعدها تختفي او تركها كما هو موجود في الدرس .

تثبيت flutter تحميل flutter dartsdk شركة تطبيقات الجوال

loadImage.dart

 return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            const Center(child: CircularProgressIndicator(),),
            FadeInImage.memoryNetwork(
              alignment: Alignment.center,
              // you can replace kTransparentImage to 'assets/loading.gif and remove CircularProgressIndicator from above
              // if used FadeInImage.assetNetwork
              placeholder: kTransparentImage,
              // load error (not network , fail utl ...etc) display local image.
              imageErrorBuilder: (context , url , error)=>Image.asset(images[0]) ,
              image: 'https://images.unsplash.com/photo-1640622656891
              -04960a7aa678?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWd
              lfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',
            ),
          ],
        ),
      ) 
    );