CachedNetworkImage: मुख्य अवधारणाएँ और ImageProvider विजेट

CachedNetworkImage क्या है?

CachedNetworkImage pub.dev पर इसी नाम के पैकेज से एक Flutter विजेट है जो स्वचालित कैशिंग के साथ नेटवर्क इमेज लोडिंग प्रदान करता है। यह मानक Image.network के चारों ओर एक आवरण है, जो फ़ाइल कैशिंग, प्रोग्रेस इंडिकेटर और कस्टम एरर हैंडलिंग जोड़ता है।

आंतरिक रूप से, CachedNetworkImage flutter_cache_manager — फ़ाइलों को ट्रैक करने के लिए SQLite डेटाबेस वाला कैश मैनेजर — का उपयोग करता है। पहले अनुरोध पर, इमेज नेटवर्क से डाउनलोड होती है, डिस्क पर सेव होती है, और बाद के अनुरोधों पर TTL (डिफ़ॉल्ट 7 दिन) को ध्यान में रखते हुए कैश से प्रदान की जाती है। इन-मेमोरी कैशिंग Flutter के मानक ImageCache द्वारा प्रबंधित की जाती है।

पैकेज के pub.dev पर 4,000 से अधिक लाइक हैं और इसका उपयोग हज़ारों Flutter प्रोजेक्ट्स में होता है। CachedNetworkImage सभी Flutter प्लेटफ़ॉर्म को सपोर्ट करता है: Android, iOS, Web, macOS, Windows और Linux। एकीकृत API की बदौलत, डेवलपर बिना प्लेटफ़ॉर्म-विशिष्ट कोड के क्रॉस-प्लेटफ़ॉर्म इमेज लोडिंग प्राप्त करते हैं।

Flutter में इमेज कैशिंग कैसे काम करती है

Flutter दो-स्तरीय कैशिंग सिस्टम का उपयोग करता है: ImageCache (मेमोरी) और flutter_cache_manager (डिस्क + SQLite)। ImageCache संख्या (डिफ़ॉल्ट 1000) और आकार (डिफ़ॉल्ट 100 MB) की सीमाओं के साथ डीकोड की गई इमेज का वैश्विक कैश है। flutter_cache_manager डिस्क पर फ़ाइलों और उनके मेटाडेटा का प्रबंधन करता है।

खोज क्रम

जब CachedNetworkImage को इमेज अनुरोध मिलता है, तो यह पहले Flutter के ImageCache की जाँच करता है — यदि इमेज पहले से मेमोरी में डीकोड है, तो यह तुरंत प्रदर्शित होती है। कैश मिस होने पर, flutter_cache_manager के माध्यम से डिस्क की जाँच की जाती है: SQLite क्वेरी जाँचती है कि फ़ाइल कैश में मौजूद है या नहीं और उसका TTL समाप्त हुआ है या नहीं। यदि फ़ाइल वर्तमान है — तो इसे डिस्क से पढ़ा जाता है, डीकोड किया जाता है और प्रदर्शित किया जाता है। यदि फ़ाइल गायब है या TTL समाप्त हो गया है — तो HTTP अनुरोध किया जाता है।

• ImageCache — वैश्विक Flutter कैश, डिफ़ॉल्ट रूप से 1000 आइटम / 100 MB
• flutter_cache_manager — SQLite + फ़ाइल सिस्टम, TTL 7 दिन
• HTTP डाउनलोड — http पैकेज या कस्टम HttpClient के माध्यम से किया जाता है

कैश सफाई

DefaultCacheManager विधियाँ प्रदान करता है emptyCache() (पूर्ण सफाई), cleanCache() (केवल समाप्त हटाना) और कस्टम तिथि के साथ clearCacheWithAge()। ImageCache मेमोरी दबाव पर स्वचालित रूप से या मैन्युअल रूप से imageCache.clear() के माध्यम से साफ़ होता है।

CachedNetworkImage विजेट की वास्तुकला

CachedNetworkImage मानक Flutter विजेट संयोजन पर बनाया गया है। आंतरिक कार्यान्वयन एसिंक्रोनस लोडिंग के लिए ImageProvider और जीवनचक्र प्रबंधन के लिए StatefulWidget का उपयोग करता है।

मुख्य पैरामीटर

imageUrl — अनिवार्य पैरामीटर, इमेज URL (String या Uri)। placeholder — लोडिंग के दौरान दिखाया जाने वाला विजेट। errorWidget — लोडिंग त्रुटि पर विजेट। progressIndicatorBuilder — builder जो कॉन्टेक्स्ट, URL और totalSize व downloadedSize फ़ील्ड वाला DownloadProgress प्राप्त करता है।

ImageProvider

CachedNetworkImageProvider — ImageProvider का कार्यान्वयन जो CachedNetworkStreamImage लौटाता है, जो डाउनलोडिंग और कैशिंग का प्रबंधन करता है। प्रदाता Flutter के ImageCache के साथ एकीकृत होता है और सभी मानक ImageProvider क्षमताओं का समर्थन करता है: स्केलिंग, सेंटरिंग और दोहराव।

flutter_cache_manager को कॉन्फ़िगर करना

flutter_cache_manager CachedNetworkImage की कैशिंग की अंतर्निहित लाइब्रेरी है। यह कॉन्फ़िगर SQLite डेटाबेस, TTL और फ़ाइल सीमा के साथ DefaultCacheManager प्रदान करता है। आवश्यकता होने पर, अद्वितीय पैरामीटर के साथ कस्टम CacheManager बनाया जा सकता है।

कस्टम CacheManager विधि ओवरराइड के साथ CacheManager से इनहेरिट करके बनाया जाता है। यह तब उपयोगी होता है जब इमेज को अलग निर्देशिका में संग्रहीत करने या भिन्न HTTP क्लाइंट का उपयोग करने की आवश्यकता होती है। प्रबंधक इंस्टेंस फिर CachedNetworkImage के cacheManager पैरामीटर में पास किया जाता है।

DefaultCacheManager का SQLite डेटाबेस ऐप्लिकेशन के temporaryDirectory में `{key}/CacheObjects.db` पथ पर स्थित होता है। इसमें cacheObjects तालिका है जिसमें फ़ील्ड हैं: key (URL), relativePath, url, creationDate, eTag, httpHeaders। समाप्त प्रविष्टियों की सफाई करते समय, maxAgeCacheObject पर शर्त के साथ SQL क्वेरी का उपयोग किया जाता है।

Dart में CachedNetworkImage उपयोग उदाहरण

CachedNetworkImage दो मुख्य लोडिंग दृष्टिकोण प्रदान करता है: CachedNetworkImage विजेट और कस्टम परिदृश्यों के लिए CachedNetworkImageProvider।

प्लेसहोल्डर के साथ बुनियादी लोडिंग

CachedNetworkImage — प्राथमिक दृष्टिकोण। बस imageUrl और placeholder पास करें। विजेट स्वचालित रूप से लोडिंग पूरी होने तक प्लेसहोल्डर प्रदर्शित करता है और फिर उसे इमेज से बदल देता है।

CachedNetworkImage(
    imageUrl: "https://example.com/photo.jpg",
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
    width: 200,
    height: 200,
    fit: BoxFit.cover,
)

placeholder और errorWidget builder फ़ंक्शन हैं जो कॉन्टेक्स्ट, URL और (errorWidget के लिए) एरर ऑब्जेक्ट स्वीकार करते हैं। यह दृष्टिकोण URL या एरर प्रकार के आधार पर अलग-अलग प्लेसहोल्डर दिखाने की अनुमति देता है।

प्रोग्रेस के साथ लोडिंग

progressIndicatorBuilder — एक पैरामीटर जो डाउनलोड प्रगति को प्रतिशत के रूप में प्रदर्शित करने की अनुमति देता है। DownloadProgress में totalSize (अज्ञात होने पर -1 हो सकता है) और downloadedSize होता है।

CachedNetworkImage(
    imageUrl: "https://example.com/large.jpg",
    progressIndicatorBuilder: (context, url, downloadProgress) {
        return Center(
            child: SizedBox(
                width: 50,
                height: 50,
                child: Stack(
                    alignment: Alignment.center,
                    children: [
                        CircularProgressIndicator(
                            value: downloadProgress.progress,
                        ),
                        Text(
                            "\(downloadProgress.downloadedSize ~/ 1024) KB",
                        ),
                    ],
                ),
            ),
        };
    },
    imageBuilder: (context, imageProvider) {
        return Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.cover,
                ),
            ),
        };
    },
)

imageBuilder — एक वैकल्पिक पैरामीटर जो इमेज प्रदर्शन को अनुकूलित करने की अनुमति देता है: गोल कोने, छाया, सजावट जोड़ना। उदाहरण गोल कोनों के लिए BorderRadius के साथ DecorationImage का उपयोग करता है।

CachedNetworkImageProvider का उपयोग

CachedNetworkImageProvider — CachedNetworkImage विजेट का उपयोग किए बिना Image या DecorationImage के लिए प्रदाता। BoxDecoration, FadeInImage या कस्टम Image विजेट के साथ काम करते समय उपयोगी।

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: CachedNetworkImageProvider(
                "https://example.com/bg.jpg",
                maxWidthBytes: 2048,
                maxHeightBytes: 2048,
            ),
            fit: BoxFit.cover,
        ),
    ),
)

ImageBuilder और कस्टम हैंडलिंग

CachedNetworkImage में imageBuilder पैरामीटर मानक Image विजेट को कस्टम कार्यान्वयन से ओवरराइड करने की अनुमति देता है। सीधे Image प्रदर्शित करने के बजाय, आप सजावट के साथ Container, क्रॉपिंग के लिए ClipRRect, या रिपल इफ़ेक्ट के लिए Ink.image का उपयोग कर सकते हैं। imageBuilder तैयार इमेज का कॉन्टेक्स्ट और ImageProvider प्राप्त करता है, जो रेंडरिंग पर पूर्ण नियंत्रण देता है।

अतिरिक्त पैरामीटर: memCacheWidth और memCacheHeight RAM में कैश की गई इमेज के आकार को सीमित करते हैं, Flutter के ImageCache पर लोड कम करते हैं। cacheKey URL के बजाय कस्टम कैश कुंजी सेट करने की अनुमति देता है, जो URL में प्राधिकरण टोकन वाली इमेज के लिए उपयोगी है (क्वेरी पैरामीटर हर अनुरोध पर बदलते हैं लेकिन सामग्री समान रहती है)।

CachedNetworkImage बनाम मानक Image.network

मानक Image.network विजेट डिस्क पर सहेजे बिना हर विजेट पुनर्निर्माण पर इमेज लोड करता है। CachedNetworkImage फ़ाइल कैशिंग, प्रोग्रेस इंडिकेटर और एरर हैंडलिंग जोड़ता है, लेकिन flutter_cache_manager और SQLite पर निर्भरता जोड़ता है।

उन प्रोजेक्ट्स के लिए जहाँ ऑफ़लाइन क्षमता और बैंडविड्थ बचत महत्वपूर्ण है, CachedNetworkImage स्पष्ट विकल्प है। सरल एक-बार स्क्रीन (जैसे ऑनबोर्डिंग या स्प्लैश) के लिए, Image.network को अतिरिक्त निर्भरता की आवश्यकता नहीं है।

Flutter प्रोजेक्ट में CachedNetworkImage सेटअप करना

CachedNetworkImage को एक मानक pub.dev निर्भरता के रूप में जोड़ा जाता है। इंस्टॉलेशन के बाद, विजेट उपयोग के लिए तैयार है। flutter_cache_manager एक ट्रांज़िटिव निर्भरता के रूप में शामिल है।

// pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.4.1

डिफ़ॉल्ट रूप से, DefaultCacheManager सेटिंग्स के साथ उपयोग किया जाता है: TTL = 7 दिन, अधिकतम 200 फ़ाइलें। वैश्विक पैरामीटर बदलने के लिए, Config के साथ कस्टम CacheManager इंस्टेंस बनाया जाता है, जहाँ maxAgeCacheObject, maxNrOfCacheObjects और repo ओवरराइड किए जाते हैं।

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';

final customCacheManager = CacheManager(
  Config(
    "custom_images",
    stalePeriod: Duration(days: 14),
    maxNrOfCacheObjects: 500,
    repo: JsonCacheInfoRepository(
      databaseName: "custom_images_cache.db",
    ),
  ),
);

// कस्टम मैनेजर का उपयोग:
CachedNetworkImage(
    cacheManager: customCacheManager,
    imageUrl: url,
    // ...
)

maxWidthBytes और maxHeightBytes — कैश की गई फ़ाइल के आकार को सीमित करने के लिए वैकल्पिक पैरामीटर। यह डिस्क स्थान बचाने के लिए उपयोगी है जब मूल इमेज आवश्यक स्क्रीन आकार से बड़ी हो।