كيفية حفظ الصور داخل الcache وعرض الصور من الانترنت بشكل اوفلاين داخل Flutter
اغلب التطبيقات الكبيره التي تنافس في السوق تحاول دائما ان تقوم بتخزين البيانات اثناء وجود انترنت في جهاز المستخدم وعرض البيانات المخزنة في حالة عدم توفر الانترنت وفي مقالة اليوم نشارك معكم كيف تقوم بتخزين الصور داخل الكاش في تطبيقك بإستخدام تقنية فلاتر والمميز في فلاتر انها تحتوي على عدد كبير جدا من المكتبات التي تسهل على المبرمجين انجاز الاعمال باسرع وقت ممكن ونحن نشارك معكم دائما الكثير من المكتبات التي تساعدكم في انجاز الاعمال بشكل اسرع .
Flutter عبارة عن حزمة تطوير Google SDK مخصصة لبرمجة تطبيقات الهواتف الذكية التي تعمل بنظام Android و iOS ، بالإضافة إلى Fuchsia (نظام تشغيل جديد من Google). يوفر Flutter إطارًا شاملاً بلغة Dart مخصصًا لرسم واجهات تطبيقات عالية الجودة وعالية الأداء مع تزويد المطور بمجموعة من الأدوات الجاهزة التي تتيح له إنشاء تطبيقات احترافية في أقصر وقت وبأقل قدر من مجهود. Dart هي لغة برمجة تم تطويرها وتصميمها بواسطة Google وتهدف إلى إنشاء برامج وتطبيقات سريعة تعمل في مجموعة متنوعة من السياقات ، بما في ذلك بيئات Windows و Linux على أجهزة سطح المكتب وبيئات Android و IOS على الأجهزة المحمولة ، وحتى أنظمة السيارات الرقمية.
اضافة مكتبة cached network image
dependencies:
cached_network_image: ^3.2.0
شرح كيفية حفظ الصور في ذاكرة الهاتف المؤقته
هذه المكتبة لا غنى عنها في مشاريعك بكل بساطة يمكنك استخدام الامر 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'),
],
),
)
);
}
}
مزيد من المقالات
