如何打造可控且穩定的 Flutter 圖片快取(附實作心得)

更新 發佈閱讀 4 分鐘
那又是一個趕專案的晚上,幾經實驗,我真的被 cached_network_image 和 flutter_cache_manager 搞瘋,它的清除Cache機制實在太隨緣

嘗試多抓了幾個其他的套件來試,有些是清Cache不符需求;有些是dependency的問題,讓我解了幾步後決定revert;有些更扯,在ListView載入圖片就卡頓。

真的太崩潰,不就是個Image + Cache?
我決定自己來,順便因應專案需求,加上Batch download cache

核心思路

  • 檔案直接利用Cache資料夾儲存
  • 記憶體中儲存目錄檔,依靠目錄檔來記錄有哪些檔案有Cache、及進階功能
  • 若目錄標示檔案存在,直接使用Image.file
  • 若不存在,顯示Image.network,同時後台下載備用快取(對…重複下載,我知道)
  • 記憶體目錄檔更新的同時,同步存一份文件進Cache同資料夾,方便下次載入

實作流程

  1. 先定義好我的各種需求:高可控的Cache管理、批次url圖片載入Cache、清理過期檔案、能定義Cache檔案上限、放GridView裡頭也不卡頓
  2. 定義檔案結構,規劃就存在Cahce/{CacheManagerName}裡頭,以達到Cache分區
  3. 定義目錄檔,就是要把上限、保存期限、單檔資訊格式都給他定好,之後才能用
  4. 接下來就是實作階段,其實相對簡單,大概就三部份:開放的API介面、檔案管理系統、並行下載管理機制

應用程式碼

void main() async {
WidgetsFlutterBinding.ensureInitialized();

final cacheManager = QSImageCacheManager(name: 'demo', maxCount: 200, retainDays: 7);
await cacheManager.initial();

runApp(MyApp(cacheManager: cacheManager));
}

QSCachedImage(
url: 'https://example.com/pic.jpg',
cacheManager: cacheManager,
placeholder: const CircularProgressIndicator(),
errorWidget: const Icon(Icons.error),
);

Source:qs_cached_image

後續 & 展望

最後,還好這專案不枉我花幾小時重造輪子,算是順利解掉這最後的圖片問題(能自訂背景載全頁Cache、想刪就刪、想留多久留多久;重點是:順 + 穩);可喜可賀。
也因為快取圖片問題搞得我火大,配上這專案的一些,偏特殊但勉強算常規的需求,我決定把它元件化。就又花了幾小時搞定這一切。

目前版本算是個達到了我的初衷:極簡可用依賴少,載圖顯示順還能滿足那些偏門需求。

有興趣的朋友歡迎一起優化、提 issue、或分享使用心得~



留言
avatar-img
留言分享你的想法!
avatar-img
青石觀點
0會員
5內容數
各式心得分享
你可能也想看
Thumbnail
蝦皮分潤計畫讓我在分享旅遊文章時,也能透過推薦好物累積被動收入,貼補旅行基金。這篇文章,除了介紹計畫的操作亮點與心得,也分享我最常應用的案例:「旅行必備小物 TOP5」,包含行李鎖、免洗內衣褲、分裝瓶、折疊衣架與真空壓縮袋,幫助出國打包更輕鬆。想同時記錄旅行、分享好物又創造額外收入的你,千萬別錯過!
Thumbnail
蝦皮分潤計畫讓我在分享旅遊文章時,也能透過推薦好物累積被動收入,貼補旅行基金。這篇文章,除了介紹計畫的操作亮點與心得,也分享我最常應用的案例:「旅行必備小物 TOP5」,包含行李鎖、免洗內衣褲、分裝瓶、折疊衣架與真空壓縮袋,幫助出國打包更輕鬆。想同時記錄旅行、分享好物又創造額外收入的你,千萬別錯過!
Thumbnail
想增加被動收入?加入蝦皮分潤計畫是輕鬆上手的好方法!本文提供完整教學,包含申請流程、賺取分潤技巧,以及實際使用心得分享,助你輕鬆獲得額外收入。
Thumbnail
想增加被動收入?加入蝦皮分潤計畫是輕鬆上手的好方法!本文提供完整教學,包含申請流程、賺取分潤技巧,以及實際使用心得分享,助你輕鬆獲得額外收入。
Thumbnail
自由接案好像很自由、容易,卻需要點方向的指引,希望這篇的分享能給予你一些幫助。
Thumbnail
自由接案好像很自由、容易,卻需要點方向的指引,希望這篇的分享能給予你一些幫助。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
這是一個簡單的工作流,可以對輸入的圖片進行3D重建
Thumbnail
這是一個簡單的工作流,可以對輸入的圖片進行3D重建
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News