Flutter 實現一個集各大音樂平臺API於一體的音樂播放器APP（一、項目初始化）

近幾年由於國內對音樂版權的重視，有些歌曲在某一個音樂app上完全搜不到，所以手機上往往要下載比如QQ音樂、網易雲音樂、酷狗音樂、咪咕音樂等諸多個app，對於和我一樣有手機內存潔癖的人來說，實屬忍無可忍。索性瞭解到Flutter 使用Dart語言可以做到跨平臺（IOS、Android、Window、Web等）的應用的高效實現，所以自己動手實現一個集各大音樂平臺於一體的音樂播放器 --- 《FreeMusic》喜歡的小夥伴可以下載使用，附上下載地址：藍奏雲下載地址。如果你對Dart + Flutter 還不是很瞭解，可以自行百度學習一下。 好了廢話不多說，開啓我們的音樂播放器之旅。

思維導圖

該圖只是截止到目前，後續還會有一些功能加進去。

項目初始化

首先要搭建自己的flutter環境，這裏不做教程。然後選擇目錄，運行flutter create 命令。

等待命令執行完畢後，會看到如下結果，代表項目已經創建成功。此時運行flutter run 命令，即可在模擬器或者你的手機上看到剛剛創建的應用程序。（本文是建立在flutter環境，Android或者ios 環境已經搭建完畢之後的，如果flutte命令出現一些問題，可以私信我，或者百度搜索）

項目創建好之後，我們用vscode打開，然後刪除一些自動生產的代碼，其中主要是main.dart，替換爲如下代碼

import 'package:flutter/material.dart';

void main() => runApp(FreeMusicApp());

class FreeMusicApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FreeMusicState();
  }
}

class FreeMusicState extends State<FreeMusicApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'FreeMusic',
      home: Scaffold(
        body: Container(
          child: Text("Hello FreeMusic"),
        ),
      ),
    );
  }
}

test文件夾下的文件是測試用的，對我們沒有用處，也可以刪除。接下來在lib文件夾下創建以下文件夾。

在與lib同級的目錄下創建images，用於存放app中用到的圖片。

添加插件

flutter 項目的插件是在項目根目錄下的 pubspec.yaml 文件中統一管理的。在pubspec.yaml文件中的 dependencies 節點插入該app需要的依賴。保存後flutter可以自動拉取依賴。

  fluttertoast: ^2.1.1                       #消息提示框
  flutter_flux: ^4.1.3                       #狀態管理，數據流
  sqflite: ^1.1.7+1                          #android本地數據庫      
  shared_preferences: ^0.5.6                 #本地存儲數據，持久化
  sticky_headers: "^0.1.8"                   #粘性頭部
  flutter_spinkit: "^4.1.0"                  #一個loading插件
  audioplayers: ^0.13.5                      #播放音樂的
  package_info: ^0.4.0+13                    #獲取app信息的
  url_launcher: ^5.4.1                       #打開url
  webview_flutter: ^0.3.18+1                 #支持顯示web頁面

  crypto: ^2.0.6                             #加密
  encrypt: ^4.0.0                            #解密
  dio: ^3.0.3                                #網絡請求
  path_provider: ^1.4.0                      #訪問本機文件
  marquee: ^1.3.1                            #輪播
  permission_handler: ^4.0.0                 #手動獲取權限
  flutter_audio_query: ^0.3.2                #本地多媒體文件

添加圖片引用

flutter 項目的靜態圖片引用比較麻煩，需要先在pubspec.yaml文件中的 assets 節點中聲明，然後才能在代碼中通過Image.assets()的方式訪問到，因此，我們需要把項目要用到的圖片引用添加到pubspec.yaml文件中

assets:
    - images/more.png
    - images/mobile.jpg
    - images/netease.png
    - images/nvhai.png
    - images/qq.png
    - images/favorite.png
    - images/shoucang.png
    - images/zuijin.png
    - images/yun.png

…… 下面的省略

創建工具類

這裏的工具類共有兩個，Constant.dart -- APP中常用的常量，比如背景色之類的； SQFLite.dart -- app 需要創建的數據庫和數據表

import 'package:flutter/material.dart';

class Constant {
  static Color themeColor =  Color.fromRGBO(216, 30, 6, 0.8);
  static Color wordColor = Color.fromRGBO(96,96,96, 1);
  static Color toolBarColor = Color.fromRGBO(96,96,96, 0.5);
  static Color backgroundColor = Color.fromRGBO(240, 240, 240, 1);
}

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class SQFLiteUtil {
  static SQFLiteUtil _instance;
  static Database _db;

  SQFLiteUtil._();

  static Future<SQFLiteUtil> get instance async {
    return await getInstance();
  }

  static Future<SQFLiteUtil> getInstance() async {
    if (_instance == null) {
      _instance = SQFLiteUtil._();
    }
    if (_db == null) {
      await _instance._initDB();
    }

    return _instance;
  }

  Future _initDB() async {
    String dataBasePath = await getDatabasesPath();
    String path = join(dataBasePath, "freemusic.db");
    _db = await openDatabase(path, version: 1, onCreate: _onCreate);
  }

  void _onCreate(Database db, int newVersion) async {
    await db.transaction((txn) async {
      await txn.execute('''
        CREATE TABLE IF NOT EXISTS `gedan` (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          gd_name TEXT,
          picture TEXT,
          description TEXT,
          created TEXT
        );
      ''');
      await txn.execute('''
        CREATE TABLE IF NOT EXISTS `song` (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          hash TEXT,
          songid INTEGER,
          albummid TEXT,
          playUrl TEXT,
          img TEXT,
          timeLength INTEGER,
          singerName TEXT,
          songName TEXT,
          type TEXT,
          platform TEXT
        );
      ''');
      await txn.execute('''
        CREATE TABLE IF NOT EXISTS `gedan_song` (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          gd_id INTEGER,
          song_hash TEXT
        );
      ''');
    });
  }

  Database open() {
    return _db;
  }

}

至此，FreeMusic的初始化工作已經完成，相關代碼已上傳到碼雲上。

gitee: https://gitee.com/JTaoLee/FreeMusic/tree/fm-dev-one

寫在最後

本篇文章是這一系列的第一篇文章，筆者會持續更新，請大家多多關注，如果你有疑問可以留言或私信我。