---
# System prepended metadata

title: Flutter Image
tags: [Flutter]

---

---
title: 'Flutter Image'
tags: Flutter
disqus: hackmd
---

Flutter Image
===

## Table of Contents

[TOC]

## 載入APP圖片

先在專案根目錄下，新增一個 「assets」 目錄，在該目錄下在新增一個 「images」 資料夾，將圖片放到此目錄下：

![](https://imgur.com/nY5vnck.png)

開啟 「pubspec.yaml」，註冊圖片 。
```Flutter=
# To add assets to your application, add an assets section, like this:
assets:
    - assets/image/46b9568828d8ae7d5fd00c2c9305127f.png
```

實際修改範例：

![](https://hackmd.io/_uploads/SyRCSzPhh.png)

當 「pubspec.yaml」有變化時，記得要按下重新獲取相依檔，否則無法正確載入圖片。

![](https://hackmd.io/_uploads/S1qbUzw2h.png)

使用方法：

```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功能
:::