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

Flutter عبارة عن حزمة تطوير Google SDK مخصصة لبرمجة تطبيقات الهواتف الذكية التي تعمل بنظام Android و iOS ، بالإضافة إلى Fuchsia (نظام تشغيل جديد من Google). يوفر Flutter إطارًا شاملاً بلغة Dart مخصصًا لرسم واجهات تطبيقات عالية الجودة وعالية الأداء مع تزويد المطور بمجموعة من الأدوات الجاهزة التي تتيح له إنشاء تطبيقات احترافية في أقصر وقت وبأقل قدر من مجهود. Dart هي لغة برمجة تم تطويرها وتصميمها بواسطة Google وتهدف إلى إنشاء برامج وتطبيقات سريعة تعمل في مجموعة متنوعة من السياقات ، بما في ذلك بيئات Windows و Linux على أجهزة سطح المكتب وبيئات Android و IOS على الأجهزة المحمولة ، وحتى أنظمة السيارات الرقمية.

اضافة مكتبة cached network image

هذه المكتبة لا غنى عنها في مشاريعك بكل بساطة يمكنك استخدام الامر CachedNetworkImage وهو الامر الذي نحصل عليه من المكتبة وبعدها يمكنك استخدام الامر  placeholder لوضع شكل يظهر عندما تكون الصورة في مرحلة التحميل ولم تكتمل بعد , والامر errorWidget وهو لوضع صورة او تنبية اذا حدث خطأ خلال عملية التحميل او كانت الصورة لا تعمل و اخيرا الامر   imageUrl وهو لوضع رابط الصورة التي تريد حفظها داخل جهازك كما هو موضح .

cached.dart

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

  @override
  State<GeeCoders> createState() => _GeeCodersState();
}

class _GeeCodersState extends State<GeeCoders> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            const Center(child: CircularProgressIndicator(),),
            CachedNetworkImage(
              placeholder: (context , url)=> const Center(child: CircularProgressIndicator(),),
                errorWidget: (context , url , error)=>Image.asset(images[0]),
                imageUrl: 'https://images.unsplash.com/photo-1640622656891-04960a7aa678?ixlib=rb-1.2.'
                    '1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80'),
          ],
        ),
      )
    );
  }
}

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