---
title: 'Flutter Image'
tags: Flutter
disqus: hackmd
---
Flutter Image
===
## Table of Contents
[TOC]
## 載入APP圖片
先在專案根目錄下，新增一個 「assets」 目錄，在該目錄下在新增一個 「images」 資料夾，將圖片放到此目錄下：
開啟 「pubspec.yaml」，註冊圖片 。
```Flutter=
# To add assets to your application, add an assets section, like this:
assets:
- assets/image/46b9568828d8ae7d5fd00c2c9305127f.png
```
實際修改範例：
當 「pubspec.yaml」有變化時，記得要按下重新獲取相依檔，否則無法正確載入圖片。
使用方法：
```dart=
Image.asset('assets/images/logo.png')
```
## 載入網路圖片
使用方法
```dart=
Image.network('https://i.imgur.com/ZX0PtRb.png')
```
## cached_network_image
使用cached_network_image套件
```dart=
CachedNetworkImage(
imageUrl: imagePath,
placeholder: (context, url) => const CircularProgressIndicator(),
errorWidget: (context, url, error) => const Icon(Icons.error),
)
```
設定配置
```dart=
// for CachedNetworkImage 配置
class CustomCacheManager {
CustomCacheManager._internal();
factory CustomCacheManager() => _instance;
static final CustomCacheManager _instance = CustomCacheManager._internal();
final CacheManager cacheManager = CacheManager(
Config(
'images_Key',
maxNrOfCacheObjects: 20, // 允許快取的大小，若超過就從最久未被使用的cache開始移除
stalePeriod: const Duration(days: 3), // cache檔案在超過3天都沒有開啟過就移除
),
);
}
```
清除cache
```dart=
void clearCache({int? index}) {
imageCache.clear();
imageCache.clearLiveImages();
if (index != null) {
customCacheManager.cacheManager
.removeFile(index == 0 ? 'first_image' : 'second_image'); // 對檔案清除
} else {
customCacheManager.cacheManager.emptyCache(); // 全部清除
}
setState(() {});
}
```
1. imageCache.clear()：
- 這個方法可以清除Flutter記憶體中的圖片快取。這意味著記憶體中快取的圖片將被刪除，但磁碟上的快取不會受到影響。這對於釋放記憶體非常有用，但不會到磁碟上的永久儲存。
2. imageCache.clearLiveImages()：
- 這個方法可以清除Flutter的內存中的圖片內存，但實際上clear()，它只能清除當前顯示在屏幕上的圖片。這個對於釋放當前屏幕上不再可見的圖片內存很有用，但不會影響磁碟存儲。
3. DefaultCacheManager().emptyCache()：
- 這個方法是cached_network_image庫的方法之一，用於清除磁碟磁碟。它會刪除所有已下載的映像文件，可以用於釋放磁碟空間。這是一個相對比較重要的操作，因為磁碟上的磁碟會佔用大量磁碟空間空間。使用這個方法可以清除整個緩存，而不僅僅是某些特定的圖像。
:::warning
Web自身有Cache功能
:::
Sign in with Wallet
Connect another wallet