Flutter支持穩(wěn)定的桌面設(shè)備開發(fā)已經(jīng)一段時間了，不得不說，F(xiàn)lutter多平臺支持的特性真的很香。我本人并沒有任何桌面開發(fā)的經(jīng)驗，但仍然使用Flutter開發(fā)出了一個桌面版小程序，功能很簡單，就是對輸入的json做格式化處理和轉(zhuǎn)模型。
成都創(chuàng)新互聯(lián)是一家專業(yè)提供埇橋區(qū)企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、做網(wǎng)站、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為埇橋區(qū)眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。
話不多說，先來看看實際效果。 項目源碼地址
開發(fā)環(huán)境如下：
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作為我們?nèi)粘ｉ_發(fā)工作中經(jīng)常要打交道的一種數(shù)據(jù)格式，它共有6種數(shù)據(jù)類型： null , num , string , object , array , bool 。我們勢必對它又愛又恨。愛他因為他作為數(shù)據(jù)處理的一種格式確實非常方便簡潔。但是在我們做Flutter開發(fā)中，又需要接觸到j(luò)son解析時，就會感覺非常棘手，因為flutter沒有反射，導(dǎo)致json轉(zhuǎn)模型這塊需要手寫那繁雜的映射關(guān)系。就像下面這樣子。
數(shù)據(jù)量少還能接受，一旦量大，那么光手寫這個解析方法都能讓你懷疑人生。更何況手寫還有出錯的可能。好在官方有個工具**json_serializable**可以自動生成這塊轉(zhuǎn)換代碼，也解決了flutter界json轉(zhuǎn)模型的空缺。當(dāng)然，業(yè)界也有專門解析json的網(wǎng)站，可以自動生成dart代碼，使用者在生成后復(fù)制進項目中即可，也是非常方便的。
本項目以json解析為切入點，和大家一起來看下flutter是如何開發(fā)桌面應(yīng)用的。
要讓我們的flutter項目支持桌面設(shè)備。我們首先需要修改下flutter的設(shè)置。如下，讓我們的項目支持 windows 和 macos 系統(tǒng)。
接下來使用 flutter create 命令創(chuàng)建我們的模版工程。
創(chuàng)建完項目后，我們就可以 run 起來了。
先來看下整體界面，界面四塊，分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。
我們在新建一個桌面應(yīng)用時，默認(rèn)的模版又一個Appbar，此時應(yīng)用可以用鼠標(biāo)拖拽移動，放大縮小，還可以縮到很小。但是，我們一旦去掉這個導(dǎo)航欄，那么窗口就不能用鼠標(biāo)拖動了，并且我們往往不希望用戶將我們的窗口縮放的很小，這會導(dǎo)致頁面異常，一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過 bitsdojo_window ，我們可以實現(xiàn)窗口的定制化，拖動，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關(guān)閉的按鈕等。
通過 InkWell 組件，可以捕捉到手勢、鼠標(biāo)、觸控筆的移動和停留位置
這個功能是鼠標(biāo)移動后的UI交互界面。要在窗口上顯示一個提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根結(jié)點不是 Material 風(fēng)格的組件，因此會出現(xiàn)黃色的下劃線。因此一定要用 Material 包一下 text 。并且你必須給創(chuàng)建的 OverlayEntry 一個位置，否則它將全屏顯示。
讀取說表拖拽的文件一開始想嘗試使用 InkWell 組件，但是這個組件無法識別拖拽中的鼠標(biāo)，并且也無法從中拿到文件信息。因此放棄。后來從文章《Flutter-2天寫個桌面端APP》中發(fā)現(xiàn)一個可讀取拖拽文件的組件 desktop_drop ，能滿足要求。
使用開源組件 file_picker ，選完圖片后的操作和拖拽選擇圖片后的操作一致。
Textfield 如果要顯示富文本，那么需要自定義 TextEditingController 。并重寫 buildTextSpan 方法。
在做導(dǎo)出功能時遇到下列報錯，保存提示為沒有權(quán)限訪問對應(yīng)目錄下的文件。
通過Apple的開發(fā)文檔找到有關(guān)權(quán)限問題的說明。其中有個授權(quán)私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對用戶的下載文件夾的讀/寫訪問權(quán)限 。那么，使用Xcode打開Flutter項目中的mac應(yīng)用，修改工程目錄下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并將值設(shè)置為YES，保存后重啟Flutter項目。發(fā)現(xiàn)已經(jīng)可以向下載目錄中讀寫文件了。
當(dāng)然，這是正常操作。還有個騷操作就是關(guān)閉系統(tǒng)的沙盒機制。將 entitlements 文件的 App Sandbox 設(shè)置為NO。這樣我們就可以訪問任意路徑了。當(dāng)然關(guān)閉應(yīng)用的沙盒也就相當(dāng)于關(guān)閉了應(yīng)用的防護機制，因此這個選項慎用。
原文地址：
JWT 如果判斷 Token 失效, 會直接返回 401 . 但是在 Flutter 中, 無法處理...
catch 到的 GrpcError 一直是 unimplemented , 而不是期待的 unauthenticated
先用攔截器打印出 401 時響應(yīng)的 headers.
401 時, 返回 content-length: 0 .
在看看 Flutter 中 ResponseFuture (\pub.flutter-io.cn\grpc-2.8.0\lib\src\client\common.dart) 的定義:
在父構(gòu)造函數(shù)中, 首先判斷的 _call.respnose 是不是收到多次, 其次判斷它是不是為 null .
這個地方如果先判斷 _call.headers[":status"] 是不是 401 就可以了. 但是 _call.headers 又是一個 FutureMapString,String , 需要用到 async/await , 但是在構(gòu)造函數(shù)中, 使用異步???腦殼有點大...蛋疼...
我也嘗試用攔截器:
但是 get 不到關(guān)鍵點, 無法用 GrpcError.unauthenticated() 替換原有異常...
注：亮度調(diào)節(jié)和音量調(diào)節(jié)gif無法體現(xiàn)，功能是ok的，其次默認(rèn)Icon鎖的close和open實在難以分辨。
環(huán)境：Flutter 2.8.1 channel stable ;Dart 2.15.1
需要音頻播放器的看這里： Flutter音樂播放器
重點說下這個工具類，因為視頻播放，涉及到狀態(tài)改變有很多，筆者剛開始選擇使用 InheritedWidget 來在眾多的widget之間共享數(shù)據(jù)。但是總感覺這樣有點繁瑣，且不很優(yōu)雅！
這里非廣告，如果是使用 GetX 就很簡單了，筆者也使用了 GetX 進行封裝了，一瀉千里的趕腳！，但是筆者還是那句話：剛開始接觸Flutter的開發(fā)者不是很建議使用 GetX ，可以先熟悉下Flutter狀態(tài)管理的基礎(chǔ)原理再行使用。而且為了盡量簡潔，還是不引入其他的第三方了。
我們選擇對第三方插件進行封裝的目的不外乎這幾個：
于是筆者就寫了一個工具類 VideoPlayerUtils ，專門且只用來處理播放器的所有業(yè)務(wù)。包括暫停、播放、跳轉(zhuǎn)、調(diào)節(jié)音量、調(diào)節(jié)亮度、切換視頻等操作。在所有的widget中不會引用關(guān)于 video_player 或其他第三方插件的任何信息， VideoPlayerUtils 負(fù)責(zé)widget與播放器之間的所有操作交互。后續(xù)優(yōu)化迭代或更換播放器插件時，只需針對這個工具類進行修改，對所有widget不會有任何的影響，大大的解耦合了。
其中 VideoPlayerState ：
提供以上的公共屬性，可以通過 VideoPlayerUtils 來獲取對應(yīng)的值，使用 get 只讀，使外界不會誤修改這些屬性，以保證數(shù)值的安全性。開發(fā)者可根據(jù)自身需要自行添加屬性。
提供以上方法來處理播放器的所有業(yè)務(wù)。同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。
重點說下這個方法，是整個業(yè)務(wù)的核心方法，控制視頻的播放或暫停。開發(fā)者只要遇到播放或暫停是均可調(diào)用此方法，具體是播放或暫停，內(nèi)部根據(jù)傳入的 url 自行判斷，開發(fā)者不需要關(guān)心。
切換新視頻也是使用此方法，傳入的 url 與上次不一致，自動切換新視頻。筆者可根據(jù) statusListener 來監(jiān)聽播放狀態(tài)的改變，以此處理自身邏輯。
這個也需要提下，視頻播放器在播放新視頻時會異步初始化，一般我們的操作是在 initState() 初始化，成功后再 setState() 。這里筆者遇到一個讓人蛋疼的問題：
我們看 video_player 的使用：
VideoPlayer(controller) ：widget中已經(jīng)持有了controller。本來筆者封裝的目的就是為了讓widget與controller的之間解耦合。但此時的筆者。。。。
放棄不是不可能放棄的，這輩子都不會放棄的！
于是筆者取了巧，寫了一個初始化監(jiān)聽器 initializedListener ，包換2個參數(shù)： bool,Widget ，初始化是否成功；其中widget為初始化成功返回需要展示的播放器UI，失敗默認(rèn)返回 const SizedBox() 。
到這里就可以簡單使用了：
沒看錯，視頻播放就是這么簡單。
如果有更多的業(yè)務(wù)功能，筆者也按照自己的需求寫了一套，同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。
VideoPlayerGestures 主要是處理手勢的，比如快進、快退等跳轉(zhuǎn)播放；左側(cè)上下滑動調(diào)節(jié)亮度；右側(cè)上下滑動調(diào)節(jié)音量；單擊是否開啟沉浸式播放，所有widget的隱藏與顯示；雙擊播放、暫停等。
哦，還有 PercentageWidget 也放到這個文件下了，就是這玩意：
因為顯示的百分比與手勢相關(guān)，隨著手勢移動而更新。開發(fā)者可自行處理。
筆者處出于簡單考慮，就按照整個UI的位置命名了。瞅一眼就知道是啥玩意。
同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。
就是這玩意：
同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。話說這個鎖的 Icon 的open和close是真的難分辨！
就是這玩意：
同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。
這玩意是自定義的，別問，問就是跟產(chǎn)品干一架落了下風(fēng)
主要就是自定義這玩意：
同樣的開發(fā)者可根據(jù)自身需要自定義。
注：這里沒有添加緩沖的進度，開發(fā)可查看 video_player 中的源碼 VideoProgressIndicator ，按業(yè)務(wù)自行定義。
這玩意就是整合以上的widget，再考慮下全屏的安全區(qū)域，沒啥東西。開發(fā)者可自行處理！
具體的實現(xiàn)監(jiān)聽器的思路， 看這里 。
自此一個漂亮的Flutter視頻播放器就已經(jīng)結(jié)束了。如果您覺得對您有些許幫助的話，歡迎 Star ！
重慶分公司
重慶分公司
