CachedNetworkImage: bu nima, asosiy tushunchalar va ImageProvider vidjeti

CachedNetworkImage nima?

CachedNetworkImage — xuddi shu nomdagi pub.dev paketidan Flutter vidjeti, avtomatik keshlashtirish bilan tarmoqdan rasmlarni yuklashni ta‘minlaydi. U standart Image.network ustiga qo‘shimcha bo‘lib, fayl keshlashtirish, taraqqiyot ko‘rsatkichlari va shaxsiy xatolarni boshqarishni qo‘shadi.

Ichki tarzda, CachedNetworkImage flutter_cache_manager dan foydalanadi — fayllarni kuzatish uchun SQLite ma‘lumotlar bazasiga ega kesh menejeri. Birinchi so‘rovda rasm tarmoqdan yuklanadi, diskda saqlanadi va keyingi so‘rovlarda TTL (standart 7 kun) hisobga olingan holda keshdan beriladi. In-memory kesh Flutter-ning standart ImageCache tomonidan boshqariladi.

Paket pub.dev da 4 000 dan ortiq yoqtirishga ega va minglab Flutter loyihalarida ishlatiladi. CachedNetworkImage barcha Flutter platformalarini qo‘llab-quvvatlaydi: Android, iOS, Web, macOS, Windows va Linux. Yagona API tufayli dasturchi platformaga xos kodsiz cross-platform rasm yuklashni oladi.

Flutter-da rasm keshlashtirish qanday ishlaydi

Flutter ikki darajali keshlashtirish tizimidan foydalanadi: ImageCache (xotira) va flutter_cache_manager (disk + SQLite). ImageCache — son (standart 1000) va hajm (standart 100 MB) chegarasi bilan dekodlangan rasmlarning global keshi. flutter_cache_manager diskdagi fayllar va ularning metama‘lumotlarini boshqaradi.

Tekshirish tartibi

CachedNetworkImage rasm so‘rovini olganda, avval Flutter ImageCache ini tekshiradi — agar rasm allaqachon xotirada dekodlangan bo‘lsa, darhol ko‘rsatiladi. Agar topilmasa, disk flutter_cache_manager orqali tekshiriladi: SQLite so‘rovi faylning keshda mavjudligini va TTL muddati tugamaganligini tekshiradi. Agar fayl dolzarb bo‘lsa — diskdan o‘qiladi, dekodlanadi va ko‘rsatiladi. Agar fayl mavjud bo‘lmasa yoki TTL muddati tugagan bo‘lsa — HTTP so‘rovi amalga oshiriladi.

• ImageCache — Flutter global keshi, standart 1000 element / 100 MB
• flutter_cache_manager — SQLite + fayl tizimi, TTL 7 kun
• HTTP yuklash — http paketi yoki shaxsiy HttpClient orqali amalga oshiriladi

Keshni tozalash

DefaultCacheManager emptyCache() (to‘liq tozalash), cleanCache() (faqat eskirganlarni o‘chirish) va clearCacheWithAge() (shaxsiy sana bilan) metodlarini taqdim etadi. ImageCache xotira bosilganda avtomatik yoki imageCache.clear() orqali qo‘lda tozalanadi.

CachedNetworkImage vidjetining arxitekturasi

CachedNetworkImage standart Flutter vidjetlari kompozitsiyasi asosida qurilgan. Ichki implementatsiya asinxron yuklash uchun ImageProvider va hayotiy tsiklni kuzatish uchun StatefulWidget dan foydalanadi.

Asosiy parametrlar

imageUrl — majburiy parametr, rasm URL-i (String yoki Uri). placeholder — yuklash vaqtida ko‘rsatiladigan vidjet. errorWidget — yuklash xatosida ko‘rsatiladigan vidjet. progressIndicatorBuilder — kontekst, URL va totalSize va downloadedSize maydonlari bilan DownloadProgress ni qabul qiladigan builder.

ImageProvider

CachedNetworkImageProvider — yuklash va keshlashtirishni boshqaradigan CachedNetworkStreamImage ni qaytaradigan ImageProvider implementatsiyasi. Provayder Flutter ImageCache bilan integratsiyalanadi va standart ImageProvider ning barcha imkoniyatlarini qo‘llab-quvvatlaydi: masshtablash, markazlashtirish va takrorlash.

flutter_cache_manager sozlamalari

flutter_cache_manager — CachedNetworkImage keshlashtirishining asosidagi kutubxona. U sozlangan SQLite ma‘lumotlar bazasi, TTL va fayl chegarasi bilan DefaultCacheManager ni taqdim etadi. Zarur bo‘lganda noyob parametrlar bilan shaxsiy CacheManager yaratilishi mumkin.

Shaxsiy CacheManager CacheManager dan meros olish va metodlarni qayta yozish orqali yaratiladi. Bu rasmlarni alohida katalogda saqlash yoki boshqa HTTP mijozidan foydalanish kerak bo‘lganda foydali. Keyin menejer nusxasi CachedNetworkImage ning cacheManager parametriga uzatiladi.

DefaultCacheManager ning SQLite ma‘lumotlar bazasi ilovaning temporaryDirectory katalogida `{key}/CacheObjects.db` yo‘lida joylashgan. Unda key (URL), relativePath, url, creationDate, eTag, httpHeaders maydonlari bilan cacheObjects jadvali mavjud. Eskirgan yozuvlarni tozalashda maxAgeCacheObject bo‘yicha shart bilan SQL so‘rovi ishlatiladi.

Dart-da CachedNetworkImage dan foydalanish misollari

CachedNetworkImage ikkita asosiy yuklash usulini taqdim etadi: CachedNetworkImage vidjeti va shaxsiy ssenariylar uchun CachedNetworkImageProvider provayderi.

Placeholder bilan asosiy yuklash

CachedNetworkImage — asosiy usul. Faqat imageUrl va placeholder ni uzatish kifoya. Vidjet avtomatik ravishda yuklash tugaguncha placeholder ni ko‘rsatadi va keyin rasm bilan almashtiradi.

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 va errorWidget — kontekst, URL va (errorWidget uchun) xato obyektini qabul qiluvchi builder funksiyalar. Bu yondashuv URL yoki xato turiga qarab turli xil almashtirishlarni ko‘rsatishga imkon beradi.

Taraqqiyot bilan yuklash

progressIndicatorBuilder — yuklash taraqqiyotini foizda ko‘rsatishga imkon beruvchi parametr. DownloadProgress totalSize (agar hajm noma‘lum bo‘lsa -1 bo‘lishi mumkin) va downloadedSize ni o‘z ichiga oladi.

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 — rasm ko‘rinishini sozlash imkonini beruvchi ixtiyoriy parametr: yaxlitlash, soya, bezak qo‘shish. Misolda yumaloq burchaklar uchun BorderRadius bilan DecorationImage ishlatilgan.

CachedNetworkImageProvider dan foydalanish

CachedNetworkImageProvider — CachedNetworkImage vidjetisiz Image yoki DecorationImage uchun provayder. BoxDecoration, FadeInImage yoki shaxsiy Image vidjetlari bilan ishlashda foydali.

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

ImageBuilder va shaxsiy ishlov berish

CachedNetworkImage dagi imageBuilder parametri standart Image vidjetini shaxsiy implementatsiya bilan almashtirishga imkon beradi. To‘g‘ridan-to‘g‘ri Image ko‘rsatish o‘rniga bezakli Container, qirqilgan ClipRRect yoki to‘lqin effekti uchun Ink.image ishlatilishi mumkin. imageBuilder tayyor rasmning konteksti va ImageProvider ini olib, render ustidan to‘liq nazorat beradi.

Qo‘shimcha parametrlar: memCacheWidth va memCacheHeight operativ xotirada keshlangan rasm hajmini cheklab, Flutter ImageCache yukini kamaytiradi. cacheKey URL o‘rniga shaxsiy kesh kalitini o‘rnatishga imkon beradi, bu URL da avtorizatsiya tokenlari bo‘lgan rasmlar uchun foydali (so‘rov parametrlari har safar o‘zgaradi, lekin mazmun bir xil qoladi).

CachedNetworkImage vs standart Image.network

Standart Image.network vidjeti har bir vidjet qayta qurilishida rasmni diskda saqlamasdan yuklaydi. CachedNetworkImage fayl keshlashtirish, taraqqiyot va xatolarni boshqarishni qo‘shadi, lekin flutter_cache_manager va SQLite ga bog‘liqlikni qo‘shadi.

Offline ish va trafikni tejash muhim bo‘lgan loyihalar uchun CachedNetworkImage aniq tanlovdir. Oddiy bir martalik ekranlar uchun (masalan, onboarding yoki splash) Image.network qo‘shimcha bog‘liqliklarni talab qilmaydi.

Flutter loyihasida CachedNetworkImage sozlamalari

CachedNetworkImage standart pub.dev bog‘liqligi sifatida qo‘shiladi. O‘rnatishdan so‘ng vidjet foydalanishga tayyor. flutter_cache_manager tranzitiv bog‘liqlik sifatida kiradi.

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

Standart sifatida DefaultCacheManager sozlamalar bilan ishlatiladi: TTL = 7 kun, maks 200 fayl. Global parametrlarni o‘zgartirish uchun Config bilan shaxsiy CacheManager nusxasi yaratiladi, unda maxAgeCacheObject, maxNrOfCacheObjects va repo qayta yoziladi.

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",
    ),
  ),
);

// Shaxsiy menejerdan foydalanish:
CachedNetworkImage(
    cacheManager: customCacheManager,
    imageUrl: url,
    // ...
)

maxWidthBytes va maxHeightBytes — keshlangan fayl hajmini cheklash uchun ixtiyoriy parametrlar. Asl rasm kerakli ekran o‘lchamidan katta bo‘lganda disk joyini tejash uchun foydali.