如何使用 Chopper 來製作迷因 Flutter APP？

Charles Chien

Published in

Flutter Formosa

8 min readFeb 9, 2023

Chopper 是一款處理 Http 請求的 Package，並受到 Retrofit 的啟發，借助 Dart Team 提供的 build 與 source_gen 來自動生成需要的程式碼。

本文將使用 Chopper 來串接 Imgflip API，取得熱門迷因圖片

chopper | Dart Package

Chopper is an http client generator for Dart and Flutter using source_gen and inspired by Retrofit. Documentation In…

pub.dev

讓我們開始吧！

取得 API

首先 Imgflip API 網站，這裡提供了一些免費的 API，這次要使用的是 /get_memes ，取得熱門的迷因資訊！

網站上可以看到說明與返回的 Response 結構

專案設置

安裝 Chopper 與所依賴的 Packages

chopper：本次的主角，用來串接 REST API

build_runner 與 chopper_generator：透過指令自動生成所需的程式碼

json_serializable 與 json_annotation：處理 Json 解析，也可以使用 freezed 喔！

建立 Model

根據 API Response 的結構建立所需要的物件，我們會需要處理最核心的 Meme 以及外層的 MemeData，另外這部分會用到 json_serializable 與 json_annotation

需要先引入 json_annotation ，才能夠使用接下來的宣告語法

part 'meme.g.dart';：將是自動生成的檔案，目前尚未產生
@JsonSerializable : 宣告這個類將會使用 json_serializable 生成meme.g.dart檔案
@JsonKey ：定義 json response 的 key name
_$MemeFromJson(json) ：用來解析 json 的類，位於生成的檔案中
_$MemeToJson(json) ：用於轉換成 json 的類，同上屬於生成的檔案中

接下來也是類似的做法：

建造完成！接下來只需要施一點小魔法，就可以將檔案變出來啦～

打開 terminal 進到專案路徑下，輸入指令：

flutter pub run build_runner build

執行結束後，就可以看到多了 .g.dart 檔案，裡面包含我們需要用來處理 json 的相關程式碼

Chopper API Service

透過這一個步驟，建立起與 HTTP 溝通的橋樑！接下來的內容會很像剛剛看到的生成語法，可以很快進入狀況

需同樣要先引入 chopper ，才能夠使用接下來的宣告語法

part 'meme_service.chopper.dart：將是 chopper_generator 自動生成的檔案，目前尚未產生
@ChopperApi()：宣告這個類將會使用 chopper 生成meme_service.chopper 檔案
定義一個名為 MemeService 的抽象類，並繼承 ChopperService ，才能使用相關功能
@Get：宣告 HTTP 請求方法，帶入路徑 (還有其他方法：@Post 、

@Put 、 @Patch 、 @Delete 、 @Head )

getPopularMemes ：用來取得熱門電影列表的方法
_$MemeService(client) ：將於稍後生成的 chopper 實作類

定義完成後，同樣透過 flutter pub run build_runner build 指令，就能夠將檔案生出來囉！

解析 JSON

由於 API 回傳的是 JsonString，需要解析並轉換成物件才能夠供我們正常使用，這時候就會需要 Chopper 提供的 Converter 來幫助我們！

詳細範例：https://github.com/lejard-h/chopper/blob/master/example/bin/main_json_serializable.dart

建立 JsonSerializableConverter 類，並繼承 Chopper 提供的 JsonConverter

factories ：物件型別的轉換工廠列表
tryDecodeJson ：複寫方法，解析 JsonString
_decodeMap ：根據目前物件型別的 factories 來解析 Map 物件
_decode ：解析 Chopper Response 的 body
convertResponse ：覆寫方法，處理 Chopper Response 與物件型別的轉換
convertError ：覆寫方法，處理錯誤的轉換

使用 Chopper

使用時需要初始化 ChopperClient ，傳入所需參數

baseUrl ：API 的 base url endpoint
services ：初始化 Chopper Service，根據需求可傳入多個
converter ：轉換器，可處理回傳與物件型別的轉換
memeService ：使用 ChopperClient 提供的 getService 取得 MemeService

加上 UI

使用 FutureBuilder 來達成異步取得資料的需求

大功告成！

來看看成果吧！

Source Code

GitHub - CharlesChien7996/chopper_meme_example

A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…

github.com

總結

Chopper 提供了方便的 chopper_generator ，只要將提供宣告語法，就能夠自動生成檔案，開發起來更有效率，程式碼也更加簡潔！

如果你也有串接API的需求，不仿嘗試看看 Chopper 吧！

另外 Chopper 還有其他進階應用，可以參考官方文件喔！

參考連結

感謝您花時間看完這篇文章，歡迎留言交流

如果對您有幫助，請不要吝嗇給我鼓勵或關注我，您的鼓勵將成為支持我前進的動力 : )