前言
大家好，我是 KKBOX 開放平台部門的小小實習生 Raymond，今天想分享一下自己學習 Flutter 並使用 KKBOX Open API 做出一個簡單的 App 的心路歷程，這篇文章首先會簡單的介紹一下 Flutter，我取得 Flutter 資源的方式，再來就是實作 KKBOX 報報的部分以及學習感想，希望能讓大家有所收穫。
Flutter 是什麼?
Flutter 是由 Google 所開發出的跨平台開發套件，可同時運行於 iOS 與 Android，跨平台，高效能（跟 React Native 比起來），以及開發效率極高的特性讓許多人一試成主顧。在 Stack Overflow Developer Survey 2019 的調查結果中，Flutter 是 Most Loved Other Frameworks, Libraries, and Tools 中的第三名，甚至高於 React Native，而 Flutter team 在今年的 Google I/O 大會上釋出了 Flutter for web 的 technical preview，未來也將會支援 Desktop 與 Embedding system，可以說是極具發展潛力的開發套件。
Flutter 的哪些特點吸引了我？
為何 Flutter 如此受歡迎，大家都一用就愛上它？他與同是跨平台開發的 React Native 有什麼不一樣？經過了一番搜尋與研究，我整理出了一些大家喜愛的點（在等下的實作中你也會體驗到）
- 快速的開發：寫過 Android 就知道 Gradle build 會花上很多時間，而在開發時我們常常需要重複的 build 而拖慢開發速度，Flutter 的 hot reload 只要在一開始啟動時進行一次 Gradle build，之後的任何對程式碼的更改只要按下 Ctrl + S，Flutter 就會自動進行 UI 的重構，讓你可以快速的檢視所做的改變，跟 Android 原生開發比其來真的是天壤之別。
- Layout 與邏輯使用同一種語言：不像 Android 使用分別的 XML 檔來設計Layout，Flutter 使用同一種語言（Dart）來設計 Layout 與邏輯。
- 真.跨平台:相比於同是跨平台的 React Native 使用的是原生平台元件，Flutter 不使用原生平台元件而使用自己的元件（叫做 Widget），因此 Flutter 可以真正做到在任何平台都長得一樣的 UI，且 Flutter 所提供的Widget 都非常的漂亮、有很高的擴充性與可以高度客製化。
- 效能:因為使用自己的 Widget，Flutter 不需要與原生平台上的元件溝通，只需要一張可以畫畫的 Canvas，因此比起 React Native 在效能上會有較好的表現，尤其是動畫或是使用者做出手勢時，Flutter 可以達到 60fps 的表現。
關於其他 Flutter 的特色，我推薦這一篇 What’s Revolutionary about Flutter，裡面很深入的探討了 Flutter 為何如此讓人興奮，以及 Flutter 使用Dart 的好處。
如果以上這些引起了你的興趣，接下來我將會分享我如何使用 Flutter 串接 KKBOX Open API 豐富的歌曲資源來做出一個簡單卻漂亮的科科歌單 App，將KKBOX 的各式歌單與排行榜展示出來。
學習的資源
以下是我學習 Flutter 時走過的資源，大家可以當作參考
Flutter 官方文件— 不得不說 Flutter 的官方 tutorial 與 doc 真的寫得詳細易懂
Flutter for Android developer — 如果你學過 Android，這一篇文章可以讓你快速上手
A tour of Dart language — 有學過物件導向語言的話 Dart 應該是蠻好上手的
Flutter Youtube 頻道— 官方開辦的頻道，我有兩個推薦的清單，一個是 Flutter widget of the week，一個是 Flutter in Focus
不過 先讓我們來聊聊 KKBOX Open API
KKBOX Open API 是快速整合 KKBOX 平台的高品質音樂資料的主要管道，您可利用各種程式語言透過 HTTP API 取得歌手、專輯、歌曲、排行榜等資訊，方便實作音樂應用於網頁、Mobile App 之中。
— KKBOX developer site
簡單來說，KKBOX 提供了許多歌曲資訊讓大家取用，而運用這些豐富的歌曲資源，我們就可以做出許多有趣的應用，例如 KUBE 酷播歌單，使用 KKBOX 的歌單資源並可以選擇用 KKBOX、Spotify 或是 Youtube 播放，讓你永遠不會有缺歌期。
除此之外，也有像是 Line Bot 放音樂或是智慧音箱使用語音控制的應用，如果你對如何運用 KKBOX 開放平台的應用有了興趣，或是想知道更多它有趣的應用，可以到 KKBOX developer site 的 API doc 逛逛，或許你會發現一些意想不到的靈感！
事前準備
- 如果你還沒在 KKBOX developer site 註冊並新增 App，快去註冊一個吧。
- 確認你安裝好了 Android Studio， Flutter SDK 與 Flutter plugin for android studio（你也可以使用 VS code )，如果你還沒安裝，這份官方文件有著詳盡的安裝步驟，安裝完成後可以在 terminal 輸入
flutter doctor確認安裝完成。
- 這篇文章假設你至少完成了 Flutter 官方的 Get started tutorial，並且知道什麼是 Web API。
先從 Dependency 開始
打開 <project dir>/pubspec.yaml，在 dependencies 下方加入 http 與url_launcher 兩個套件。http 是用於向 Web API 抓取資料的套件，url_launcher 則是用於開啟歌單連結的套件。
從 KKBOX Open API 抓取資料
使用 Dart http 套件
Dart team 提供了非常方便的 http 套件，讓我們能輕鬆的從網路抓取資料，下面是一個簡單的 Get 與 Post 的程式碼。
fetchGet與fetchPost傳回一個 Future<Response> 物件，Future 物件是 Dart 內建的物件，用於表示預期未來才會出現的值，像是 Response 就是要等到 server 方做出了回覆才會拿到獲得的物件。
async與await是兩個 Dart 的關鍵字，這兩個方便的關鍵字讓我們用看起來同步的方式寫非同步的method，避免了可怕的 callback hell 。
KKBOX client credential flow
想要從 KKBOX Open API 獲取資料，需要先透過 client credential flow 取得access token，可以將 access token 想成 server 給予你的臨時識別證。我們使用之前記錄下來的 ID 與 Secret 來向 Token API 索取 access token，如果 ID 與Secret 都正確，API 會回覆以下三個欄位，記得將取得的 access token 儲存起來。
{
"access_token": "fCVTwABPlcO6Qxc7Ll23rsdsf", //用來獲取其他API的資料
"expires_in": 1492982700, //access＿token過期時間
"token_type": "Bearer"
}使用 Access Token 向 Open API 抓取特色歌單
有了 token 後，就可以開始使用 KKBOX Open API 的資料，方法是在每個HTTP request 的 header 中放入Authorization: Bearer my_access_token這個欄位，我們以 featured playlists 這個 endpoint 為例：
以下是 response body：
將 Json Response 轉換為專屬 Dart 物件
我們當然可以使用好用的 json.decode(response)來解析json 字串，但是當你有個肥大的 json 檔案，將 response 轉化為 dart 內的自訂物件會讓你的人生更加輕鬆。除了自己手動建立 model class，也可以用這個非常好用的轉換工具 quicktype 幫你生成 Class code。自動生成後再做一些命名的微調後就成為我們的 model class 拉！
現在我們可以輕鬆地使用下面這行程式碼將 JSON response 轉換成 Dart 物件了
playlistsFromJson(response.body)而我們將與 API 連線的功能包在一個 Class 放進 service.dart 裡:
這樣與 API 連線獲取資料的部分就大功告成拉！
探索 Flutter 的內建 Widget
Flutter 最吸引我的地方就是可以用非常快的速度打造出非常漂亮的 UI，來看看這個 App 所用到的 widget 們。
創建空白 App
我們先在 main.dart 加入以下程式碼來創建一個空白的 App。
Home 是一個 StatefulWidget ，這代表 Home 的內容會有不同的狀態（不同的 UI），Home 的 createState() 會回傳 _HomeState 這個 State object，裡面有建構 UI 的 build method。我們先讓build method 回傳一個空的 Scaffold Widget，Scaffod 是一個實作了基本的 material design 的 layout widget（如 bottom navigation bar，app bar，drawer 等等）。
Bottom Navigation
我們用 bottom navigation bar 分出 Open API 的三個 endpoints，Charts，Featured Playlists 與 NewHits Playlists。
在 Scaffold 加入 appBar、body、bottomNavigationBar三個引數，在 BottomNavigationBar 中的 items 參數放入 BottonNavigationBarItem 的 list，list 裡包含了希望出現在 bottom bar 的選項，我們先將 currentindex 預設為 1，currentindex 告訴 bottom bar 目前所選中的選項是哪一個。我們在 onTap內實作 bottom bar 切換時進行setState讓 widget tree 重新做 build，而 build 時我們會在_bodyBuilder內依據 _currentIndex 回傳不同的 body，完成後的成果如下。
ListView
我們使用 ListView 來將從 API 拿到的資料顯示在 App 上，而 Flutter 內建的ListView.Builder 讓我們可以輕鬆的製作出獨一無二的 ListView widget。先來看看 Scaffold 內 body 的設置。
body 內放入 FutureBuilder 這個 Widget 會與 future 參數互動並根據 snapshot 的狀態進行 build，在這裡 FutureBuilder 在需要較長時間的_bodyBuilder() 還未完成前會回傳 CircularProgressIndicator 表示資料還沒準備好，而 _bodyBuilder 完成後所回傳的物件（此例為 Playlists 物件）會放在 snapshot 裡面。
完成連線後我們將資料存入 class 內的變數 playlists 內，然後寫一個_listItemBuilder製作客製化的 list item。
我們的 list item主要由使用 stack widget 在一張圖片上疊加文字組成，再用GestureDetector 包起來，而當使用者點擊了這個 item(onTap)，會呼叫showDialog method 跳出一個詳細資訊的對話方塊。ListItem.Builder 會依據參數 itemCount 來呼叫 _listItemBuilder(context,index) ，而_listemItemBuilder 再依據index向playlist拿取歌單的資料來建造 widget。
現在讓我們來完成最後一哩路，製作_dialogBuilder 。
Flutter 除了內建了漂亮的 material design widget，我們也可以很輕鬆地製作客製化 Widget，_dailogBuilder 回傳一個 SimpleDialog，我們在 SimpleDialog 內放入圖片、歌單標題、歌單描述，與一個 Listen 的按鈕，按下之後會打開 KKBOX 的 App 並播放歌單。
以下是最後 main.dart 的內容
大功告成，完成了一個簡單小巧的 Flutter App，如果你需要完整的程式碼，我把它放在了 Github 上了。
結語
幾天下來學習 Flutter 就會感覺出為何它如此受大家愛戴了，豐富而且好看的 Widget、Ctrl+S 就會將改變顯示出來的 hot reload 還有好上手卻強大的 Dart語言（尤其是 async/await），寫起來會讓人很開心。而除了特色歌單之外，KKBOX 的開放平台也提供了歌曲搜尋，歌曲電台等其他資源，如果有什麼 Idea，只要有一個開發者帳號就可以用任何程式語言開始打造你的 App了，希望大家看在實習生的份上多多參觀（鞠躬)，謝謝大家。