Flutter開發--視頻播放器

目前Flutter平臺主流的兩個播放器是video_player和fijkplayer

創新互聯公司專注為客戶提供全方位的互聯網綜合服務，包含不限于成都網站建設、網站建設、白城網絡推廣、小程序開發、白城網絡營銷、白城企業策劃、白城品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創新互聯公司為所有大學生創業者提供白城建站搭建服務，24小時服務熱線：18982081108，官方網址：www.cdcxhl.com

pub

github

1、Flutter平臺官方插件，作者是國外的，有問題溝通比較困難，只能通過提交issue

2、硬解碼

4、UI封裝： better_player

基于video_player和Chewie的高級視頻播放器。它解決了許多典型的用例，并且易于運行。

5、播放器寬高比例與視頻內容寬高比例不一致時，會出現圖像壓縮變形的問題

6、調用原生內核播放器：iOS--AVPlayer， Android--ExoPlayer

7、對于分段源 m3u8 的播放不友好，如果一個切片播放超時，會導致整個播放都失敗

8、better_player可以緩存視頻，但不能自定義緩存的地址，只能指定key，和緩存的最大內存量（還未研究超出最大的話是不能緩存新的，還是刪除最舊的）

9、better_player不能完全自定義UI，只能修改類中的一些開放屬性，比如說icon圖標，文字顏色啥的

10、無網絡有緩存時，封面可以正常展示

11、better_player播放失敗有手動retry的設計

pub

github

1、fijkplayer 是一個 Flutter 生態的媒體播放器，是對 ijkplayer 的 Flutter 封裝，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作為播放器內核，ijkplayer 使用 ffmpeg 進行音視頻解封裝和解碼，同時添加了 Android 和 iOS 平臺特有的硬件加速解碼能力。

2 、國內有QQ群，但是活躍度也是不高。

3、可以緩存視頻，可以自定義緩存的地址，方便后續的內存維護。

4、可以通過FijkPanelWidgetBuilder較大程度上自定義UI。

5、無網絡有緩存視頻時，無法展示封面，因為內部是通過imageProvider去加載網絡圖片的。

7、播放失敗無手動retry的設計

1、兩種播放器都是通過外接紋理方案 (Texture)，將播放器視頻畫面渲染接入 flutter 中，性能上優于 PlatformView 的接入方法。

如何自己實現？

下面以video_palyer的iOS源碼部分解釋：

iOS用CVPixelBufferRef將渲染出來的數據存在內存中，Flutter engine會將Texture的數據在內存中直接進行映射無需通過Channel傳輸，然后Texture Widget就可以把你提供的這些數據顯示出來。在我們傳輸數據的時候會需要將其與 TextureID 綁定，綁定的過程通過BasicMessageChannel實現數據流的傳輸，以做到實時展示的效果

Flutter開發——Linux嵌入式應用開發

上文中 介紹了Linux平臺下Flutter環境搭建和桌面應用開發，現在需要更深入了解如何將該應用運行在Linux系統的嵌入式設備上。

安裝及示例

在 ~/.bashrc 中配置 export PATH=$PATH:/opt/flutter-elinux/bin

打開weston虛擬機，此時發現 flutter-elinux devices 連接設備變成兩個，如下圖

即可編譯及運行基于wayland顯示后端的demo

避坑

Flutter開發--如何布局？

相對于iOS開發，Flutter的布局更具有靈活性，每個頁面設計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應該如何去布局，我覺得不現實，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。

根據設計圖，可以看出整體可以分成兩部分，上面一部分是系統介紹模塊，下面一部分是真正的登錄內容，因為涉及到疊加，因此考慮用Stack；

系統介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴展；載放logo圖標在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。

登錄內容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。

第一行為Image，

第二行為Text，

第三行可以看成一個小Column，分兩塊進行布局

第四行可以看成一個小Column，分兩塊進行布局

第五行可以看作一個TextButton，

第六行可以看作一個Row，分三塊進行布局

通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實現的話，就是復雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復的或者覺得可以封裝出來的部分，則進行下一步。

每一行的拆解，大致也是按照這個思路來進行，因此筆者在這里就不做講解了。

在做到第三第四行的時候，發現這兩個很相似，而且設計到一些交互邏輯，筆者就想對第三第四行的這種展示進行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實現這種輸入操作，具體的實現筆者不再詳細的描述了。

經過這一步，整體的規劃設計圖已經有了，各個組件也都有了，接下來的工作就是組裝了。

具體布局設計到一些細節的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。

像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區域。

對文字顏色大小等，可以用TextStyle直接設置。

對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。

Flutter（六）Android與Flutter混合開發（Hybird）

如果我們目前的項目是Android的，但是接下來我們希望部分頁面可以使用Flutter進行開發，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們該如何實現呢？

假設你現在Android項目的目錄的結構是這樣的

這時候如果你想創建一個Flutter模塊，使得Android模塊和Flutter模塊之間可以進行交互，我們可以通過Android Studio新建一個Flutter Module，具體過程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為

也就是說，最終你的項目結構會是這樣的

接下來在Android Module的 build.gradle 文件中添加flutter依賴

先創建一個Flutter頁面

這里比較重要的是 window.defaultRouteName 這個字段，這個字段可以接收從Native傳遞過來的參數 （下文我們會介紹原生傳遞參數的方法），也就是說通過這個字段我們就可以進行Flutter頁面的路由的分發

我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ，這里的 initialRoute 方法中傳遞的參數就對應Flutter層的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注冊 FlutterActivity

自己創建一個 FlutterAppActivity 繼承自 FlutterActivity

在 MainActivity 中啟動 FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊 FlutterAppActivity ）

兩種啟動方式的區別

如果單純只是想打開一個Flutter頁面，兩種方式實際上基本沒有太大區別，第一種方式也許還會更簡單一點。但是，在Flutter開發中，我們往往還需要開發一些Native插件供Flutter調用，如果使用復寫 FlutterActivity 的方式更有利于我們在 FlutterActivity 中注冊我們的Native插件，所以實際開發中一般推薦使用第二種方式

擴展思考

initialRoute 從名稱上看起來是Flutter提供給我們進行Native與Flutter交互的路由跳轉的，但是實際上他就是一個字符串，我們不僅僅可以傳遞一個路由名稱，有時候我們也可以通過這個參數傳遞一串JSON數據，然后在Flutter端進行解析，這樣我們就可以通過這個參數做更多的事情

activity_main.xml

FrameLayout 用于承載Flutter組件

MainActivity.java

使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中

運行結果

上半部分是原生的TextView，下半部分是Flutter的Text組件

本節主要介紹了Native和Flutter之間的頁面跳轉，以及同一個頁面中Native與Flutter組件的組合。接下來會介紹如何編寫Android插件與Flutter進行數據交互

Flutter開發——socket+udp通信

Android平臺使用CoAP通信綁定設備 已在前文中介紹，目前需要從Android平臺遷移到Linux平臺，flutter提供的CoAP協議包只提供了客戶端而沒有服務端，在進行設備綁定時，設備不僅要作為服務端，也要作為客戶端接收底層的消息推送，嘗試實現socket+udp通信模塊。