# [Flutter] Freezed 安裝及基礎使用

##### 2023-09-18 post by sean.
##### 2023-09-19 edit by sean.

:::info
:bulb: 此篇文章為 Freezed 套件的基本安裝及使用,非詳細教學
:::
:::info
:bulb: My Setting
MacBook Pro 2020 (M1) 13"
MacOS Ventura 13.4.1
Visual Studio Code 1.82.2
:::

## 📦 安裝 flutter 套件
### 1. [freezed🔗](https://pub.dev/packages/freezed)
### 2. [freezed_annotation🔗](https://pub.dev/packages/freezed_annotation/install)
#### 在 pubspec.yaml 內找到 dependencies 加入.

dependencies:
  freezed: ^2.4.2
  freezed_annotation: ^2.4.1

:::success
建議直接在 dependencies 這邊直接引用最新版本就好, 否則報錯也是要再去更新版本.
:::
### 3. [build_runner🔗](https://pub.dev/packages/build_runner)
#### 在 pubspec.yaml 內找到 dev_dependencies 加入.

dev_dependencies:
  build_runner: ^2.4.6

:::success
記得加在 dev_dependencies 底下.
:::
#### ⚙️以下兩個套件非必要, 有要用 freezed 類別去解 json 再加入

### 4. [json_annotation🔗](https://pub.dev/packages/json_annotation/install)
### 5. [json_serializable🔗](https://pub.dev/packages/json_serializable/install)

dependencies:
  json_annotation: ^4.8.1
dev_dependencies:
  json_serializable: ^6.7.1

:::success
一個加在 dependencies 底下.
一個加在 dev_dependencies 底下.
:::

:::info
:bulb: 若使用 terminal 安裝 freezed, 在後續使用過程會發現引用的套件都需要再次更新, 不如一開始就直接使用 dependencies 安裝需要引用的套件.
:::

## 📦 安裝 VS Code 套件
:::info
:bulb: 在 VS Code 按下 shift+cmd+p 打開 commands,
   輸入 install extension 打開 模組搜尋.
:::

### 1. [Freezed🔗](https://marketplace.visualstudio.com/items?itemName=blaxou.freezed)

### 2. [Build Runner🔗](https://marketplace.visualstudio.com/items?itemName=GaetSchwartz.build-runner)
#### 恭喜~到這裡安裝的步驟就結束了!
## 🔧 基礎使用
#### 在 VS Code 按下 cmd+shift+p, 打開 commands.
#### 選擇 Generate a new Freezed class.
#### 這裡輸入我們要創建的 class 名稱後點擊 Enter 確認.
#### 選擇是否需要加入 toJson/fromJson 函式.
#### 選擇文件存放的資料夾.
#### 完成後, VS Code 會跳出錯誤提示, 不用擔心.
#### 開啟剛剛創建的 freezed 文件, 會看到錯誤.
#### 此時藍色框框內的檔案還尚未創建.
#### 按下 cmd+shift+b, 啟動 build_runner.
#### 完成後會自動生成剛剛缺少的檔案.


:::info
:bulb: g.dart 的檔案為有使用 json 功能才會產生.
:::
:::info
:bulb: cmd+shift+p/b 的快速功能皆為安裝 VS Code extension 才能使用, 若無安裝 extension 可能需要使用 terminal 手動輸入指令完成.
:::

#### freezed 安裝及基礎使用到這裡結束, 之後有用到此套件功能的話再來看看需不需要寫文件.

### 🔗 參考資料
#### [freezed Github](https://github.com/rrousselGit/freezed/tree/master)
#### [freezed pub.dev](https://pub.dev/packages/freezed)