基於Flutter實現的仿開眼視頻App

flutter_eyepetizer

• 這是一款基於 Google Flutter 實現的一款仿開眼視頻 App。

背景

從 Google 在 2018.02 的世界移動大會上正式推出首個 Flutter Beta 版，到 2018.12 的 Flutter Live 2018 上，發佈 1.0 穩定版，再到如今，也差很少有 18 個月的時間了。Flutter 在 Github 上的 star、fork 量也是一路飆升，能夠說，出自 Google 的 Flutter，除了自帶光環，再加上它自己的衆多優點，受到了衆多開發者的追捧，熱度只增不減。

做爲一名不幹寂寞的小開發，我也在去年 7 月份，果斷入坑，開始 Flutter 的學習。也是略有斬獲，並輸出了一篇關於原生與 flutter 混合開發的文章：Kotlin + MVP + Flutter ，讓你能夠在本身的項目中集成 Flutter 並使用。反響也還不錯，固然也有不少考慮不足的地方。

以後的很長一段時間，我也由於工做上的變更以及一些我的緣由，擱置了 flutter 的學習計劃。這段時間，工做生活狀態逐漸穩定以後，也繼續開始了個人 flutter 學習之路。因此有了今天的主角 仿開眼視頻-flutter實現版。其實整個 App，現階段並無多麼複雜的東西，基本用的都是 flutter 自帶的 Widget，設計風格遵循 MD 規範，因此很是適合初學者學習。

掃碼下載

• 手機掃描下方二維碼，便可下載。

目前實現的功能

• 首頁每日精選
• 發現頁 - 推薦關注、熱門分類
• 熱門 - 周排行、月排行、總排行
• 個人（目前是靜態頁，後期完善）
• 搜索頁
• 熱門關注列表
• 熱門分類列表
• 視頻詳情
• 做者詳情頁

說明

項目純屬我的愛好而寫，API 均來自開眼視頻，源代碼僅供學習交流。

項目截圖

• gif

運行方式

• 查看分支

flutter channel
/// 若是當前分支不是 beta，請切換至 beta 分支
flutter channel beta
複製代碼

• 切換分支過程當中，會自動幫你更新至最新版。若是分支是在 beta 分支，請運行如下命令，檢查是否須要安裝其餘依賴

flutter doctor
複製代碼

• 運行啓動

flutter packages get
/// 確保設備已鏈接
flutter run
複製代碼

你能學到的東西？

• 大部分基礎控件的使用，諸如：Text、Image、Icon、Scaffold、ListView、GridView、CustomScrollView、Container、Padding、Expanded、Column、Row等等...
• 下拉刷新、上拉加載。
• 佈局排版，以上控件會使用以後，進行佈局排版就很簡單了，原則：先上後下，先左後右。
• 三方庫的引入、圖片的引入。
• 用戶交互事件的響應。
• 頁面的跳轉，普通跳轉、攜參跳轉。
• json 解析。推薦一個插件：FlutterJsonBeanFactory，使用方式自行百度吧，很是簡單~
• http 請求的使用。針對 dio，作了一點簡單封裝，代碼以下：

/// 執行 get 請求
  static doGet(
    String url, {
    queryParameters,
    options,
    Function success,
    Function fail,
  }) async {
    print('http request url: $url');
    try {
      Response response = await buildDio().get(
        url,
        queryParameters: queryParameters,
        options: _options,
      );
      success(response);
      print('http response: $response');
    } catch (exception) {
      fail(exception);
      print('http request fail: $url --- $exception');
    }
  }
複製代碼

用到的三方庫

• dio 強大的 Http 請求庫。
• cached_network_image 更加靈活方便的圖片加載框架。
• fluttertoast 吐司。
• flustars 經常使用工具類。
• device_info Flutter 插件。
• flutter_ijkplayer 視頻播放。
• flutter_easyrefresh 下拉刷新、上拉加載。
• shimmer 閃亮亮哈哈哈。
• provider 很是好用的狀態管理框架，會讓你的代碼清爽不少。

版本更新

• 1.0.4 - 2019.09.27

1. 部分頁面視頻播放無效問題解決。
2. 做者詳情頁UI展現優化，增長做者信息展現。
複製代碼

• 1.0.3 - 2019.09.14

1. 系統搜索欄樣式更改。
2. 部分頁面 UI 呈現效果優化。
3. 部分 bug 修復。
複製代碼

• 1.0.2 - 2019.09.06

1. 代碼優化，Provider 應用及簡單封裝。
2. 下拉刷新、上拉加載風格改變。
3. 加載中視圖狀態優化。
複製代碼

• 1.0.1 - 2019.08.30

做者信息詳情頁完善
複製代碼

• 1.0.0 - 2019.08.23

基礎功能完成
複製代碼

後續計劃

會有新功能的添加，更多的是針對如今項目的缺點，所進行的優化。

• 優化UI體驗效果，增長錯誤頁面展現。
• Provider 封裝優化。
• 屏幕適配，很是有必要！
• 和 native 混合開發提上日程。

最後

附上項目下載地址 flutter_eyepetizer。

若是您和我同樣，喜歡技術，喜歡 Flutter，能夠關注此項目，賞個star。我閒暇時間，也儘量快的更新。