Flutter Image Caching: Network Resimlerinde Bellek Tüketimini Azaltma
Flutter uygulamalarında network resimlerini yönetmek başlangıçta kolay görünse de, bellek tüketimi hızla kontrol dışına çıkabilir. Özellikle liste veya grid yapılarında çok sayıda resim yüklendiğinde, varsayılan Image.network yeterli optimize değildir. Bu yazıda gerçek bir çözüm göstereceğiz.
Flutter'ın built-in image caching mekanizması vardır ancak sınırlıdır. Bellek boyutu, disk cache stratejisi ve resim boyutu kontrolü için kütüphane kullanmak gerekir. Sektördeki en güvenilir çözüm cached_network_image paketidir.
Önce pubspec.yaml'a ekleyin:
1dependencies:2cached_network_image: ^3.3.03flutter_cache_manager: ^3.3.0Temel kullanım şöyle:
1import 'package:cached_network_image/cached_network_image.dart';23CachedNetworkImage(4imageUrl: 'https://example.com/image.jpg',5placeholder: (context, url) => CircularProgressIndicator(),6errorWidget: (context, url, error) => Icon(Icons.error),7width: 200,8height: 200,9fit: BoxFit.cover,10)Ancak gerçek optimizasyon custom cache manager ile gelir. Bellek sınırını ve disk boyutunu kontrol etmek kritiktir:
1import 'package:flutter_cache_manager/flutter_cache_manager.dart';23final cacheManager = CacheManager(4Config(5'custom_cache',6stalePeriod: Duration(days: 30),7maxNrOfCacheObjects: 100,8repo: JsonCacheInfoRepository(databasePath: 'cache'),9),10);1112CachedNetworkImage(13imageUrl: imageUrl,14cacheManager: cacheManager,15memCacheWidth: 400,16memCacheHeight: 300,17fit: BoxFit.cover,18)Burada maxNrOfCacheObjects maksimum 100 resim tutar, memCacheWidth/Height bellek içi resim boyutunu sınırlar. Resim büyük olsa bile 400×300 olarak bellekte depolanır.
Listelerde aggressive caching için:
1ListView.builder(2itemCount: items.length,3itemBuilder: (context, index) => CachedNetworkImage(4imageUrl: items[index].imageUrl,5cacheManager: cacheManager,6memCacheWidth: 200,7memCacheHeight: 150,8placeholder: (_, __) => Container(color: Colors.grey[300]),9),10)Bellek sızıntısını izlemek için:
1print('Cache size: ${await cacheManager.cacheSize()}');2await cacheManager.emptyCache();Sık yapılan hata: memCacheWidth/Height belirtmemek. Bu durumda orijinal boyutta bellek tutuluyor ve 50 resim yüklense 500 MB+ bellek gider. Her zaman ekran boyutuna göre sınırlayın.
5 yorum
çok sevdim bu yazıyı özellikle de liste ve gridde resim yüklenirken bellek patladığı için cached_network_imagei ben de kullanıyorum ve gerçekten fark
eh işte liste açtığında kaç resim yüklense de hiç takılmıyor cached_network_image olmadan
aynen ben de başta fark etmemiştim ama sonra bir projede liste kaydırırken telefon
telefon donuyor mu diye mi dedin yoksa ne oldu ben de başlarda cached_network_image
evet telefon donuyordu kaydırırken gecikme oluyordu özellikle internet yavaşken cached_network_image ekledikten sonra o sorun tamamen gitti şimdi