跳到主要內容

用 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 了,希望大家看在實習生的份上多多參觀(鞠躬),謝謝大家。

留言

Unknown寫道…
This means that it will grow an inch and a half in three months, which is the length the drug screening requires. The test could have an even longer look-back period when it uses your body hair because body hair stops growing much earlier than the hair you have on your scalp. Yes, even the hair on your chest, arms, and legs contains drugs. This is because when drugs enter your bloodstream, they are spread to all the hair follicles in your body.  There are several ways to hide the pee when you’re going in for a drug test. The worst idea, however, is to leave it in your pocket. Visit: https://www.urineworld.com/
emilia stone寫道…
Thank you, it is a nice article, and it has clearly shown the responsibility of freelance web developers. I liked how you talked about freelancing platforms for the developers. I also came across Eiliana.com, the new and emerging platform for freelancers. I hope this also helps you.
Read more: https://eiliana.com/blogitem/what-you-should-know-to-get-affordable-website-design-and-development-services
Unow22寫道…
This bonus step is another reason why we recommend blocking out most of your day. Before starting on this cleansing journey, be sure to weigh the advantages and disadvantages. - okeyprog. Here is a breakdown of the pros and cons that come with the M Methodics. And when I understood that I call for acquire this product, I will share the idea in the following way. Also, keep in mind that thicker hair types (aka natural hair) may take longer to cleanse, meaning that you should run through all seven steps at least four times to get the full effect. If you have short hair and/or thin hair, you don’t have to worry as much. After doing the M Methodics, you shouldn’t have to worry about toxins showing up during experiments. Ideally, you’ll have a few days to cleanse your hair multiple times, but it should work well if you have an experiment coming up soon. Be sure to run through all seven steps the night before as well, just to be safe.

這個網誌中的熱門文章

COSCUP 2024 Call for Participation 議程軌與攤位即日起開放申請

COSCUP 2024 Call for Participation, 議程軌與攤位即日起開放申請 COSCUP 2024 的社群議程/攤位即日起開始接受申請,社群議程於 3 月 17 日截止申請,社群攤位於 6 月 3 號截止。請有興趣在今年與我們共襄盛舉的社群把握機會! 點此快速報名 / Quick Apply 點此跳到社群攤位 Jump to Community Track English Ver. Jump to Community Booth English Ver. 社群議程 Community Room COSCUP 2024 社群議程提供場地與行政協助,您可以在此舉辦一整天關於特定開源議題的討論、座談、工作坊等。 特色包括: 自訂議程時長:各社群可以自己決定每段議程的時間,無論 15 分鐘、30 分鐘、45 分鐘,甚至直接開設數個小時的工作坊都可以。 自訂休息時間:各社群可以決定是否有休息時間,或是連番上陣。 What's new in COSCUP 2024 今年 COSCUP 有一些新的合作注意事項,歡迎欲報名的社群夥伴們確認,報名即視為貴社群同意今年度的合作注意事項 COSCUP 歡迎社群夥伴宣傳、分享社群在 COSCUP 的活動相關資訊,包含且不限於規劃獨立報名系統、架設宣傳活動網頁,或是使用票卷系統等,惟須請在相關管道中註明合作夥伴為 COSCUP 團隊。且秉持 COSCUP 精神,所有以 COSCUP 名義相關的活動,請避免限定會眾參與身分,若因特殊原因需限定參與身分,請與議程組聯絡與討論。 申請加入 COSUCP 的夥伴將視為同意大會 CoC準則,敬請夥伴們一同宣導大會 CoC ,為會眾創造尊重與友善的活動 更多社群合作準則,請參考 本文件,報名即視為同意本文件所提到的各項注意事項 Changes in COSCUP 2024 今年 COSCUP 將基於 20

COSCUP 啄事今蜚會前快報 第一期

COSCUP 啄事今蜚會前快報 第一期 2014年06月18日發行 距離大會剩下一個月的時間, 精彩的議程內容即將就定位,讓小啄帶大家來看看今年有些什麼精彩的吧! 從沒有人到超多人: g0v社群經驗 g0v.tw 是一個跨界的開源社群,由一些熟悉軟體開源文化的人開始,從最初期就致力拓展到其他非資訊領域,因此在社群的推動上有各種不同努力。將近兩年來,關注社群人數爆炸性成長,社群因此經歷數次危機。但透過 g0v 與NGO、政府等實體組織互動、加強社群基礎建設、深化參與的文化,社群核心價值與開幹精神至今能量依然不減。此 talk 將以 g0v 為例,分享跨界社群的成長經驗,以及從開源社群拓展到民主深化的初步成果。 State of the unison: g0v 村情咨文 從 2012 底開始的 g0v 運動,成功集結開放源碼社群,並輸出開源文化至各領域,促使公民高效率協作,解決問題。本次演講將回顧 g0v 社群的成果,包括專案、與 gov 合作、國際交流,以及未來展望。 DevRel 的再思考   俺可以来讲讲大陆开源技术社区这12年. 相似演讲: - 幻灯: https://speakerdeck.com/ zoomquiet/140330-ostc-just4fun - 录音: http://zoomq.qiniudn.com/ CPyUG/140330-OSTC/ 140330_ostc_pm1_zoomquiet.MP3 - 录像: http://v.youku.com/v_show/ id_XNjk2OTcyODQ4.html" 更多議程請見 http://coscup.org/2014/zh-tw/program/

2022!前夜派對!Open source and wine!Welcome Party!

喝! 年會 前夜 的交流 派對 ,來與大會講者、社群同好一起喝酒聊天! Join the Party, have fun with the speakers and your beloved FLOSS community members! 會場有什麼? / What will we have at the party? 當日精選的 MIT 掌門精釀啤酒 (也有無酒精飲料) Beer ! For people who don't like alcohol, the bar also provides soft drinks. 下酒點心 Snacks 200 坪空中花園派對,可以直接看到台北 101!美景與美酒,絕配! Awesome view, believe me! Just check the photos from Google Maps. 最重要的是:與熱愛開源的大會講者與社群同好交流的最佳活動! Lots of FLOSS folks! 注意事項 / Note 會場食物為小零食,數量有限,建議吃過正餐再來! Please have your dinner before the party, we only prepare party appetizers. 低消為 $200 元。 The minimum order is NTD$200. 不用報名,自由參加。 Please feel free to join Welcome Party, no matter what you come to COSCUP x KCD Taiwan 2022 or not. 贊助商請找 贊助組 領取酒券。 If you are the sponsor, please contact the Sponsorship Team for the free beer ticket. 如果你怕忘記參加活動,可以訂閱 COSCUP 活動電子報 ,不錯過最新活動訊息! Subscribe the COSCUP newspaper to receive important reminders and exciting activities. 時間地點 / When, Where 時