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 — ক্যাশ করা ফাইলের আকার সীমিত করার জন্য ঐচ্ছিক প্যারামিটার। এটি ডিস্ক স্থান বাঁচানোর জন্য উপযোগী যখন মূল ইমেজ প্রয়োজনীয় স্ক্রিন আকারের চেয়ে বড় হয়।