跳到主要內容

用 Flutter 與 KKBOX API 做出科科歌單

用 Flutter 與 KKBOX API 做出科科歌單

前言

大家好,我是 KKBOX 開放平台部門的小小實習生 Raymond,今天想分享一下自己學習 Flutter 並使用 KKBOX Open API 做出一個簡單的 App 的心路歷程,這篇文章首先會簡單的介紹一下 Flutter,我取得 Flutter 資源的方式,再來就是實作 KKBOX 報報的部分以及學習感想,希望能讓大家有所收穫。

Flutter 是什麼?

Flutter 是由 Google 所開發出的跨平台開發套件,可同時運行於 iOS 與 Android,跨平台,高效能(跟 React Native 比起來),以及開發效率極高的特性讓許多人一試成主顧。在 StackOverflow 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 有什麼不一樣?經過了一番搜尋與研究,我整理出了一些大家喜愛的點(在等下的實作中你也會體驗到)

  1. 快速的開發:寫過 Android 就知道 Gradle build 會花上很多時間,而在開發時我們常常需要重複的 build 而拖慢開發速度,Flutter 的 hot reload 只要在一開始啟動時進行一次 Gradle build,之後的任何對程式碼的更改只要按下 Ctrl + S,Flutter 就會自動進行 UI 的重構,讓你可以快速的檢視所做的改變,跟 Android 原生開發比其來真的是天壤之別。
  2. Layout 與邏輯使用同一種語言:不像 Android 使用分別的 XML 檔來設計 Layout,Flutter 使用同一種語言(Dart)來設計 Layout 與邏輯。
  3. 真.跨平台:相比於同是跨平台的 React Native 使用的是原生平台元件,Flutter 不使用原生平台元件而使用自己的元件(叫做 Widget),因此 Flutter 可以真正做到在任何平台都長得一樣得 UI,且 Flutter 所提供的 Widget 都非常的漂亮、有很高的擴充性與可以高度客製化。
  4. 效能:因為使用自己的 Widget,Flutter 不需要與原生平台上的元件溝通,只需要一張可以畫畫的 Canvas,因此比起 React Native 在效能上會有較好的表現,尤其是動畫或是使用者做出手勢時,Flutter 可以達到 60fps 的表現。

關於其他 Flutter 的特色,我推薦這一篇 What’s Revolutionary about Flutter,裡面很深入的探討了 Flutter 為何如此讓人興奮,以及 Flutter 使用 Dart 的好處。

如果以上這些引起了你的興趣,接下來我將會分享我如何使用 Flutter 串接 KKBOX Open API 豐富的歌曲資源來做出一個簡單卻漂亮的科科歌單 App,將 KKBOX 的各式歌單與排行榜展示出來。


如果想要動手玩玩看,我把它上架到 Google Play Store 了。

學習的資源

以下是我學習 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,快去註冊一個吧。


到 KKBOX for developers 註冊後點擊 my apps -> create new app 並填上你的 app 資料


創建完成後,將你的 ID 與 Secret 記錄下來,之後在向 Open API 要資料時會使用到

  • 確認你安裝好了 Android Studio, Flutter SDK 與 Flutter plugin for android studio(你也可以使用 VS code),如果你還沒安裝,這份官方文件有著詳盡的安裝步驟,安裝完成後可以在 terminal 輸入 flutter doctor 確認安裝完成。


確認第 1,2,5 項都有勾勾

先從 Dependency 開始

打開 <project dir>/pubspec.yaml,在 dependencies 下方加入 http 與 url_launcher 兩個套件。http 是用於向 Web API 抓取資料的套件,url_launcher 則是用於開啟歌單連結的套件。


確認 http 與 url_launcher 已經加入了 dependencies 內

從 KKBOX Open API 抓取資料

使用 Dart http 套件

Dart team 提供了非常方便的 http 套件,讓我們能輕鬆地從網路抓取資料,下面是一個簡單的 Get 與 Post 的程式碼。

import 'package:http/http.dart' as http;
Future<http.Response> fetchGet()async {
  String url = 'http://....';
  Map<String,String> headers{
    'Header-name':'header-content'
  };
  return await http.get(url,headers);
}

Future<http.Response> fetchPost()async {
  String url = 'http://....';
  Map<String,String> headers{
    'Header-name':'header-content'
  };
  Map<String,String> body{
    'body-name':'body-content'
  };
  return await http.post(url,headers,body);
}

fetchGetfetchPost 傳回一個 Future<Response> 物件,Future 物件是 Dart 內建的物件,用於表示預期未來才會出現的值,像是 Response 就是要等到 server 方做出了回覆才會拿到獲得的物件。

asyncawait 是兩個 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"
}
getAccessToken() async {
    Static const String credentialFLowUrl = 'https://account.kkbox.com/oauth2/token';
    Map<String,String> requestBody = {
      'grant_type':'client_credentials',
      'client_id':YOUR_CLIENT_ID,
      'client_secret':YOUR_CLIENT_SECRET
    };
    Map<String,String> header = {
      'Content-type':'application/x-www-form-urlencoded'
    };
    final response = await http.post(credentialFlowUrl, headers:header, body:requestBody);
    return json.decode(response.body)['access_token'];
  }

使用 Access Token 向 Open API 抓取特色歌單

有了 token 後,就可以開始使用 KKBOX Open API 的資料,方法是在每個 HTTP request 的 header 中放入 Authorization: Bearer my_access_token 這個欄位,我們以 featured playlists 這個 endpoint 為例:

getFeaturedPlaylists()async{
  String endpoint = 'https://api.kkbox.com/v1.1/featured-playlists?territory=TW'
  Map<String,String> headers = {'Authorization':'Bearer '+ await getAccessToken()};
  var response = await http.get(endPoint,headers);
  print(response.body);
}

以下是 response body:

{
  "data": [
    {
      "id": "Wt95My35CqR9hB_FW1",
      "title": "一起複習少女時代的十年輝煌時刻!",
      "description": "2007年8月,少女時代以同名專輯於韓國出道,可人的少女形象深入人心,十年來靠著努力與實力獲得人氣,也在樂壇創造不少紀錄,膾炙人口的歌曲更是不計其數。",
      "url": "https://event.kkbox.com/content/playlist/Wt95My35CqR9hB_FW1",
      "images": [
        {
          "height": 300,
          "width": 300,
          "url": "https://i.kfs.io/playlist/global/11264817v2/cropresize/300x300.jpg"
        },
        {
          "height": 600,
          "width": 600,
          "url": "https://i.kfs.io/playlist/global/11264817v2/cropresize/600x600.jpg"
        },
        {
          "height": 1000,
          "width": 1000,
          "url": "https://i.kfs.io/playlist/global/11264817v2/cropresize/1000x1000.jpg"
        }
      ],
      "updated_at": "2017-08-01T03:59:31+00:00",
      "owner": {
        "id": "D-gh_8TEudW64tRSCs",
        "name": "KKBOX 韓語小編"
      }
    },
    {
      "//":"省略~"
    }
   ],
  "paging": {
    "offset": 0,
    "limit": 5,
    "previous": null,
    "next": "https://api.kkbox.com/v1.1/featured-playlists?limit=5&territory=TW&offset=5"
  },
  "summary": {
    "total": 30
  }
}

將 Json Response 轉換為專屬 Dart 物件

我們當然可以使用好用的 json.decode(response) 來解析 json 字串,但是當你有個肥大的 json 檔案,將 response 轉化為 dart 內的自訂物件會讓你的人生更加輕鬆。除了自己手動建立 model class,也可以用這個非常好用的轉換工具 quicktype 幫你生成 Class code。自動生成後再做一些命名的微調後就成為我們的 model.dart 拉!

import 'dart:convert';

Playlists playlistsFromJson(String str) => Playlists.fromJson(json.decode(str));

String playlistsToJson(Playlists data) => json.encode(data.toJson());

class Playlists {
  List<Datum> data;
  Paging paging;
  Summary summary;

  Playlists({
    this.data,
    this.paging,
    this.summary,
  });

  factory Playlists.fromJson(Map<String, dynamic> json) => new Playlists(
    data: new List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
    paging: Paging.fromJson(json["paging"]),
    summary: Summary.fromJson(json["summary"]),
  );

  Map<String, dynamic> toJson() => {
    "data": new List<dynamic>.from(data.map((x) => x.toJson())),
    "paging": paging.toJson(),
    "summary": summary.toJson(),
  };
}

class Datum {
  String id;
  String title;
  String description;
  String url;
  List<ImageUrl> imageUrls;
  DateTime updatedAt;
  Owner owner;

  Datum({
    this.id,
    this.title,
    this.description,
    this.url,
    this.imageUrls,
    this.updatedAt,
    this.owner,
  });

  factory Datum.fromJson(Map<String, dynamic> json) => new Datum(
    id: json["id"],
    title: json["title"],
    description: json["description"],
    url: json["url"],
    imageUrls: new List<ImageUrl>.from(json["images"].map((x) => ImageUrl.fromJson(x))),
    updatedAt: DateTime.parse(json["updated_at"]),
    owner: Owner.fromJson(json["owner"]),
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "title": title,
    "description": description,
    "url": url,
    "images": new List<dynamic>.from(imageUrls.map((x) => x.toJson())),
    "updated_at": updatedAt.toIso8601String(),
    "owner": owner.toJson(),
  };
}

class ImageUrl {
  int height;
  int width;
  String url;

  ImageUrl({
    this.height,
    this.width,
    this.url,
  });

  factory ImageUrl.fromJson(Map<String, dynamic> json) => new ImageUrl(
    height: json["height"],
    width: json["width"],
    url: json["url"],
  );

  Map<String, dynamic> toJson() => {
    "height": height,
    "width": width,
    "url": url,
  };
}

class Owner {
  String id;
  String name;

  Owner({
    this.id,
    this.name,
  });

  factory Owner.fromJson(Map<String, dynamic> json) => new Owner(
    id: json["id"],
    name: json["name"],
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "name": name,
  };
}

class Paging {
  int offset;
  int limit;
  dynamic previous;
  String next;

  Paging({
    this.offset,
    this.limit,
    this.previous,
    this.next,
  });

  factory Paging.fromJson(Map<String, dynamic> json) => new Paging(
    offset: json["offset"],
    limit: json["limit"],
    previous: json["previous"],
    next: json["next"],
  );

  Map<String, dynamic> toJson() => {
    "offset": offset,
    "limit": limit,
    "previous": previous,
    "next": next,
  };
}

class Summary {
  int total;

  Summary({
    this.total,
  });

  factory Summary.fromJson(Map<String, dynamic> json) => new Summary(
    total: json["total"],
  );

  Map<String, dynamic> toJson() => {
    "total": total,
  };
}

現在我們可以輕鬆地使用下面這行程式碼將 JSON response 轉換成 Dart 物件了

playlistsFromJson(response.body)

而我們將與 API 連線的功能包在一個 Class 放進 service.dart 裡:

import 'package:flutter_material/model.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class KKBOXOpenAPI{
  static const String oauthTokenUrl='https://account.kkbox.com/oauth2/token';
  static const String openApiBase= 'https://api.kkbox.com/v1.1/';
  String _clientID;
  String _clientSecret;
  String _accessToken;
  KKBOXOpenAPI(String clientID, String clientSecret){
    this._clientID = clientID;
    this._clientSecret = clientSecret;
  }

  Future<Playlists>getFeaturedPlaylist() async{
    String endPoint = openApiBase + 'featured-playlists?territory=TW';
    Map<String,String> headers = {
      'Authorization':'Bearer '+ await _getAccessToken()
    };
    var response = await this._get(endPoint,headers);
    return playlistsFromJson(response.body);
  }

  Future<Playlists> getNewHitsPlaylist() async {
    String endPoint  = openApiBase + 'new-hits-playlists?territory=TW';
    Map<String,String> headers = {
      'Authorization':'Bearer '+ await _getAccessToken()
    };
    var response = await this._get(endPoint, headers);
    return playlistsFromJson(response.body);
  }

  Future<Playlists> getChart() async {
    String endPoint = openApiBase + 'charts?territory=TW';
    Map<String,String> headers = {
      'Authorization':'Bearer '+ await _getAccessToken()
    };
    var response = await this._get(endPoint, headers);
    return playlistsFromJson(response.body);
  }

  _get(url,headers) async{
    final response = await http.get(url,headers: headers);
    return response;
  }

  _post(url,headers,bodyParameters)async{
    final response = await  http.post(url,headers: headers,body: bodyParameters);
    return response;
  }


  _getAccessToken()async {
    if(this._accessToken != null){
      return this._accessToken;
    }
    Map<String,String> requestBody = {
      'grant_type':'client_credentials',
      'client_id':_clientID,
      'client_secret':_clientSecret
    };
    Map<String,String> header = {
      'Content-type':'application/x-www-form-urlencoded'
    };
    final response = await this._post(oauthTokenUrl, header, requestBody);
    this._accessToken = json.decode(response.body)['access_token'];
    return this._accessToken;
  }
}

這樣與 API 連線獲取資料的部分就大功告成拉!

探索 Flutter 的內建 Widget

Flutter 最吸引我的地方就是可以用非常快的速度打造出非常漂亮的 UI,來看看這個 App 所用到的 widget 們。

創建空白 App

我們先在 main.dart 加入以下程式碼來創建一個空白的 App。

import 'package:flutter/material.dart';
import 'package:flutter_material/model.dart';
import 'package:flutter_material/service.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter/rendering.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        buttonColor: Colors.lightBlue,
        buttonTheme: ButtonThemeData(
          textTheme: ButtonTextTheme.primary,
        )
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }

}


class _HomeState extends  State<Home>{

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

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:ChartsFeatured PlaylistsNewHits Playlists

//inside _HomeState
  _bodyBuilder(){
    switch(_currentIndex){
      case 0:
        return Center(child: Text("速報新歌"),);
      case 1:
        return Center(child: Text("主題歌單"),);
      case 2:
        return Center(child: Text("排行榜"),);
    }
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "科科歌單",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: _bodyBuilder(),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: new Icon(Icons.whatshot),
              title: new Text("速爆新歌"),
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.apps),
              title: new Text("主題歌單",),
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.list),
              title: new Text("排行榜")
            )
          ],
        onTap: (int index){
            setState(() { this._currentIndex =index;});
        },
      ),
    );
  }

在 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 的設置。

//inside Scaffold
body: FutureBuilder<Playlists>(
          future: _bodyBuilder(),
          builder: (context,snapshot){
            if(snapshot.connectionState == ConnectionState.done) {
              this.playlist = snapshot.data;
              return ListView.builder(
                  itemCount: this.playlist.data.length,
                  itemBuilder: _listItemBuilder
              );
            }
            else{
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          }
      ),

body 內放入 FutureBuilder 這個 Widget 會與 future 參數互動並根據 snapshot 的狀態進行 build,在這裡 FutureBuilder 在需要較長時間的 _bodyBuilder() 還未完成前會回傳 CircularProgressIndicator 表示資料還沒準備好,而 _bodyBuilder 完成後所回傳的物件(此例為 Playlists 物件)會放在 snapshot 裡面。

KKBOXOpenAPI kkboxOpenAPI = new KKBOXOpenAPI('YOUR_CLIENT_ID', 'YOUR_CLIENT_SECRET');
Future<Playlists> _bodyBuilder() async{
    switch(_currentIndex){
      case 0:
        return await kkboxOpenAPI.getNewHitsPlaylist();
      case 1:
        return await kkboxOpenAPI.getFeaturedPlaylist();
      case 2:
        return await kkboxOpenAPI.getChart();
    }
  }

完成連線後我們將資料存入 class 內的變數 playlists 內,然後寫一個 _listItemBuilder 製作客製化的 list item。

//inside _HomeState
Widget _listItemBuilder(BuildContext context,int index){
    return Padding(
      padding: const EdgeInsets.only(bottom: 32),
      child: GestureDetector(
        onTap: ()=>
            showDialog(context: context, builder: (context)=>_dialogBuilder(context,index)),
        child: Stack(
          alignment: Alignment.bottomLeft,
          children: <Widget>[
            Image.network(
                this.playlists.data[index].imageUrls[1].url,
                fit:BoxFit.fitWidth,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8,bottom: 8),
              child: Text(
                  playlists.data[index].title,
                  style: new TextStyle(
                    color:Colors.white ,
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                    shadows: <Shadow>[
                      Shadow(
                        blurRadius: 3.0,
                        color: Color.fromARGB(255, 0, 0, 0),
                      ),
                    ],
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
            ),
          ],
        ),
      ),
    );
  }

我們的 list item 主要由使用 stack widget 在一張圖片上疊加文字組成,再用 GestureDetector 包起來,而當使用者點擊了 item(onTap),會呼叫 showDialog method 跳出一個詳細資訊的對話方塊。ListItem.Builder 會依據參數 itemCount 來呼叫 _listItemBuilder(context,index),而 _listemItemBuilder 再依據 index 向 playlists 拿取歌單的資料來建造 widget。

Dialog

現在讓我們來完成最後一哩路,製作 _dialogBuilder

//inside _HomeState
Widget _dialogBuilder(BuildContext context,int index){
     return SimpleDialog(
       contentPadding: EdgeInsets.zero,
       children: [
         Image.network(
           this.playlists.data[index].imageUrls[1].url,
           fit:BoxFit.fill
         ),
         Padding(
           padding: EdgeInsets.all(16),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: <Widget>[
               Text(
                 this.playlists.data[index].title,
                 style: (Theme.of(context)).textTheme.title,
               ),
               SizedBox(height: 10,),
               Text(this.playlists.data[index].description),
               SizedBox(height: 16,),
               RaisedButton(
                 onPressed: (){
                   _launchUrl(this.playlists.data[index].url);
                 },
                 child: const Text("Listen"),
               )

             ],
           ),
         )

       ],
     );
  }
  _launchUrl(String url) async{
    if(await canLaunch(url)){
      await launch(url);
    }else{
      throw "could not launch $url";
    }
  }

Flutter 除了內建了漂亮的 material design widget,我們也可以很輕鬆地製作客製化 Widget,_dailogBuilder 回傳一個 SimpleDialog,我們在 SimpleDialog 內放入圖片、歌單標題、歌單描述,與一個 Listen 的按鈕,按下之後會打開 KKBOX 的 App 並播放歌單。

以下是最後 main.dart 的內容

import 'package:flutter/material.dart';
import 'package:flutter_material/model.dart';
import 'package:flutter_material/service.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter/rendering.dart';

void main(){
  debugPaintSizeEnabled = false;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        buttonColor: Colors.lightBlue,
        buttonTheme: ButtonThemeData(
          textTheme: ButtonTextTheme.primary,
        )
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeState();
  }

}


class _HomeState extends  State<Home>{
  int _currentIndex=1;
  Playlists playlists;
  KKBOXOpenAPI kkboxOpenAPI = new KKBOXOpenAPI(
      '5bffb622103056b75181bc1f68cc2bde', 'eb378c8431b314b21b16b1beb4e4e8e8');

  Widget _dialogBuilder(BuildContext context,int index){
     return SimpleDialog(
       contentPadding: EdgeInsets.zero,
       children: [
         Image.network(
           this.playlists.data[index].imageUrls[1].url,
           fit:BoxFit.fill
         ),
         Padding(
           padding: EdgeInsets.all(16),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: <Widget>[
               Text(
                 this.playlists.data[index].title,
                 style: (Theme.of(context)).textTheme.title,
               ),
               SizedBox(height: 10,),
               Text(this.playlists.data[index].description),
               SizedBox(height: 16,),
               RaisedButton(
                 onPressed: (){
                   _launchUrl(this.playlists.data[index].url);
                 },
                 child: const Text("Listen"),
               )

             ],
           ),
         )

       ],
     );
  }
  _launchUrl(String url) async{
    if(await canLaunch(url)){
      await launch(url);
    }else{
      throw "could not launch $url";
    }
  }
  Widget _listItemBuilder(BuildContext context,int index){
    return Padding(
      padding: const EdgeInsets.only(bottom: 32),
      child: GestureDetector(
        onTap: ()=>
            showDialog(context: context, builder: (context)=>_dialogBuilder(context,index)),
        child: Stack(
          alignment: Alignment.bottomLeft,
          children: <Widget>[
            Image.network(
                this.playlists.data[index].imageUrls[1].url,
                fit:BoxFit.fitWidth,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8,bottom: 8),
              child: Text(
                  playlists.data[index].title,
                  style: new TextStyle(
                    color:Colors.white ,
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                    shadows: <Shadow>[
                      Shadow(
                        blurRadius: 3.0,
                        color: Color.fromARGB(255, 0, 0, 0),
                      ),
                    ],
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
            ),
          ],
        ),
      ),
    );
  }

  Future<Playlists> _bodyBuilder() async{
    switch(_currentIndex){
      case 0:
        return await kkboxOpenAPI.getNewHitsPlaylist();
        break;
      case 1:
        return await kkboxOpenAPI.getFeaturedPlaylist();
        break;
      case 2:
        return await kkboxOpenAPI.getChart();
        break;
      default:
        return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "科科歌單",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: FutureBuilder<Playlists>(
          future: _bodyBuilder(),
          builder: (BuildContext context,AsyncSnapshot<Playlists> snapshot){
            if(snapshot.connectionState == ConnectionState.done) {
              this.playlists = snapshot.data;
              return ListView.builder(
                  itemCount: this.playlists.data.length,
                  itemBuilder: _listItemBuilder
              );
            }
            else{
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          }
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: new Icon(Icons.whatshot),
              title: new Text("速爆新歌"),
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.apps),
              title: new Text("主題歌單",),
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.list),
              title: new Text("排行榜")
            )
          ],
        onTap: (int index){
            setState(() {
              this._currentIndex =index;
            });
        },
      ),
    );
  }
}

大功告成,完成了一個簡單小巧的 Flutter App,如果你需要完整的程式碼,我把它放在了 Github 上了。

結語

幾天下來學習 Flutter 就會感覺出為何它如此受大家愛戴了,豐富而且好看的 Widget、Ctrl+S 就會將改變顯示出來的 hot reload 還有好上手卻強大的 Dart 語言(尤其是 async/await),寫起來會讓人很開心。而除了特色歌單之外,KKBOX 的開放平台也提供了歌曲搜尋,歌曲電台等其他資源,如果有什麼 Idea,只要有一個開發者帳號就可以用任何程式語言開始打造你的 App 了,希望大家看在實習生的份上多多參觀(鞠躬),謝謝大家。

留言

這個網誌中的熱門文章

COSCUP 2019 CfP is now open, submit your proposal before May 6th, 2019.

We are looking for talks in several open-source related areas, please submit your proposal before May 6th, 2019. After the review process from the coordinators, we will publish the full programme in early June.一如往常,在今年的 COSCUP 我們徵求各式各樣不同的 Open Source 相關稿件。請於 5 月 6 日前投稿,或可參考本頁下方各議程軌資訊。Submit your proposalImportant DatesSubmission deadline: May 6th, 2019 (截稿時間)Full programme published: Early June (預定公佈時間)COSCUP 2019: Aug 17-18 (with welcome party at 16th night), at National Taiwan University of Science and TechnologyPartner conferences / 合作研討會特別軌We are gladly welcome HKOSCon (Hong Kong Open Source Conference,) COSCon (China Open Source Conf,) and OSPN OSC (オープンソースカンファレンス) join us with a special track. Please check their CfP form for more information about the track.今年 COSCUP 與 OpenSource HK 的「HKOSCon」、開源社的「COSCon」及 OSPN 的「OSC」合作推出特別軌,以期邀請各地的開源愛好者前來與大家一會。其各自的徵稿資訊,請參考下方連結。opensource.hk "HKOSCon" Special Track開源社 "COSCon" Special TrackOSPN "オープンソースカンファレンス" Spe…

2016 Unconference 議程公告!

嗨、各位親朋好友們
今年的 Unconference 名單出爐啦! 由於每一個 Talk 都相當精彩,因此我們想了辦法讓所有投稿的人都有舞台可以分享。 Unconference 演講場地為中研院活動中心的平面會議室。 對於其中的講題有興趣的朋友們請不要錯過囉 :-D
8/21 Unconference 活動中心的平面會議室時間 講題 講者 10:45
|
11:05 用開放原始碼技術翻轉傳統產業IT架構 Derek Hsu11:10
|
11:30 會自動飛行的"神奇寶貝"and飛行技巧 gavin 11:45
|
12:05 ProbeDroid: Crafting Your Own Dynamic Instrument Tool on Android for App Behavior Exploration | 沈宗賢 (AndyShen)12:10
|
12:30 蒙地卡羅模擬與志願運算 趙元13:30
|
13:50 Runtime PM for CPU idling in Linux kernelfreedom Koan-Sin Tan 13:55
|
14:15 Fuzzing and Mozilla GARY KWONG gkw14:30
|
14:50 無良房東一度電收你 5.5 元,你難道不生氣嗎?——從自幹智慧電表講起 Felix and Timo14:55
|
15:15 COSCUP + AppDevKit Jeff Lin C 備註:議程時間可能會調動。

COSCUP 2019 開源貢獻者保留票申請 / Open Source Contributors (OSC) Tickets Application

開源貢獻者資格 由 2018/5/12 到現在,實際針對開源專案提供開發、推廣、或其他有助專案進展之貢獻者,提出貢獻相關證明即可報名。
開源專案意指專案成果以 FSFOSI 認同之公眾授權條款釋出者 所提出之貢獻,必須可以經由公開途徑查證(例如提供 GitHub、Google Code、SourceForge 等公開專案平台上的討論紀錄、網址、commit log、信件文本、公開釋出之演講投影片紀錄等。) 海外參與者 你身在海外,雖想回台參與 COSCUP,但並非貢獻者又害怕搶不到票嗎?COSCUP 歡迎所有的海外人士前來參加!只要你居住在海外、承諾與會,並願意於 SNS 或個人 blog 公佈自己即將與會之訊息,即使非貢獻者或講者,也將優先獲得我們的 VIP 邀請。請在報名表上註明您的出發地,我們將再與您聯絡。

海外參與者請於第四個 Section 告訴我們您從哪裡來,並勾選相關選項。
Key dates5/12 報名截止。5/13 ~ 5/18 審查期間。5/19 第一次審查完畢,開始補件。5/26 前補件完成。6/2 公告開源貢獻者正式名單,通過的開源貢獻者可以在 KKTIX 上報名。 申請表單 申請方法與詳細資訊:https://goo.gl/forms/x7rmsEPsooBSK46T2

Who can apply for OSC tickets? Your participation in an open source project since 2018/5/12 makes you eligible for applying for a Registration Code. The open source project and your participation must meet the following conditions:
The project source code must be released with a license approved by Free Software Foundation or Open Source InitiativeThe project must be hosted on a public repository such as GitHub, Google Code, Sour…