Vistor：基於 Flutter 視訊客戶端

摘要： Vistor-Flutter 視訊類 App 部落格連結： https://blog.csdn.net/u013718120/article/details/86621278 前言 掃碼安裝Apk體驗 連結下載Apk安裝 https://www.pgyer....

Vistor-Flutter 視訊類 App

部落格連結： https://blog.csdn.net/u013718120/article/details/86621278

前言

掃碼安裝Apk體驗

連結下載Apk安裝

https://www.pgyer.com/poE0

模組

1.開發環境：

Vs Code (1.30.2)
Android Studio 3.+

2.開發框架 ( Flutter sdk: ">=2.0.0-dev.68.0 <3.0.0" )：

狀態管理：Scoped_model
網路層：Dio
導航庫：Fluro

3.主模組分為首頁、精選、電影、我的，以下是功能列表：

使用 scoped_model 狀態管理，實現state統一管理。
使用 TabBar + TabBarView 實現單頁面不同模組切換。
使用 staggered_grid_view、ListView 元件展示圖文列表。
擴充套件列表元件，結合 NotificationManager 實現上拉載入更多資料，下拉重新整理資料。
精選內容，分類展示，使用SliverAppBar，增加互動動效，提高使用者體驗。
自定義過濾選單元件，結合 ScrollController 實現滑動互動效果。
程式碼模組化實現，元件封裝實現程式碼複用。

功能設計

1. 使用 Fluro 管理全域性路由，可自由配置 Scene 的轉場動畫，處理Android端的後退鍵事件
2. 使用 Flutter 基本語法進行佈局，並封裝了一系列通用的元件，比如 AnimationText、過濾選單，載入狀態元件，共享動畫元件等，便於全域性複用
3. 資料層使用Dio實現 Http / Https 網路載入，可輕鬆實現 http header、連結超時等常用配置。
4. 使用 CachedImage 元件，實現圖片的載入快取，優化渲染顯示效能。
5. 引入 scoped_model 狀態管理，Scoped 結合 ScopedModelDescendant ，設定全域性 state 結構，管理相關的元件狀態。
6. 使用 shared_preferences 實現小資料的本地化儲存。
7. 使用第三方字型庫，實現 FontFamily 的定製顯示。
8. 設定 WillPopScope，實現首頁點選返回鍵提示兩次快按退出功能。
9. 首頁非Index Tab 頁面下，點選返回鍵，首先返回 Index Tab，再次點選提示兩次退出。
....

專案結構

lib
 ├── main.dart
 ├── common
 ├── components
 ├── cofig
 ├── constants
 ├── delegate
 ├── events
 ├── models
 │├── pood
 │└── state_model
 ├── pages
 │├── detail
 │└── home
 │├── index
 │└── mine
 │├── movie
 │└── popular
 │├── theme
 ├── route
 ├── utils
 └assets

依賴庫

部分圖示採用了icons，檢視具體的圖示名稱可到 ionics官方文件。依賴方式，cd 到專案根目錄，執行：flutter get packages

dio: ^1.0.13
fluro: ^1.4.0
timeago: ^2.0.10
scoped_model: ^1.0.1
event_bus: ^1.0.1
shimmer: ^0.0.6
connectivity: ^0.3.2
fluttertoast: ^2.2.7
shared_preferences: ^0.4.3
cached_network_image: ^0.5.1
flutter_swiper: ^1.1.4
flutter_spinkit: ^3.0.0
flutter_staggered_grid_view: ^0.2.6
flutter_webview_plugin: ^0.3.0+2
video_player:
git:
url: https://github.com/songxiaoliang/flutter_video_player.git

待完善功能

1. 登入
 2. 分享
 3. 支付
 4. 推送
 5. 區域性視窗播放

效果圖 （oneplus 5 Android 裝置）