Flutter支持穩定的桌面設備開發已經壹段時間了，不得不說，Flutter多平臺支持的特性真的很香。我本人並沒有任何桌面開發的經驗，但仍然使用Flutter開發出了壹個桌面版小程序，功能很簡單，就是對輸入的json做格式化處理和轉模型。
話不多說，先來看看實際效果。 項目源碼地址
開發環境如下：
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作為我們日常開發工作中經常要打交道的壹種數據格式，它***有6種數據類型： null , num , string , object , array , bool 。我們勢必對它又愛又恨。愛他因為他作為數據處理的壹種格式確實非常方便簡潔。但是在我們做Flutter開發中，又需要接觸到json解析時，就會感覺非常棘手，因為flutter沒有反射，導致json轉模型這塊需要手寫那繁雜的映射關系。就像下面這樣子。
數據量少還能接受，壹旦量大，那麽光手寫這個解析方法都能讓妳懷疑人生。更何況手寫還有出錯的可能。好在官方有個工具**json_serializable**可以自動生成這塊轉換代碼，也解決了flutter界json轉模型的空缺。當然，業界也有專門解析json的網站，可以自動生成dart代碼，使用者在生成後復制進項目中即可，也是非常方便的。
本項目以json解析為切入點，和大家壹起來看下flutter是如何開發桌面應用的。
要讓我們的flutter項目支持桌面設備。我們首先需要修改下flutter的設置。如下，讓我們的項目支持 windows 和 macos 系統。
接下來使用 flutter create 命令創建我們的模版工程。
創建完項目後，我們就可以 run 起來了。
先來看下整體界面，界面四塊，分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。
我們在新建壹個桌面應用時，默認的模版又壹個Appbar，此時應用可以用鼠標拖拽移動，放大縮小，還可以縮到很小。但是，我們壹旦去掉這個導航欄，那麽窗口就不能用鼠標拖動了，並且我們往往不希望用戶將我們的窗口縮放的很小，這會導致頁面異常，壹些重要信息都展示不全。因此這裏需要借助第三方組件 bitsdojo_window 。通過 bitsdojo_window ，我們可以實現窗口的定制化，拖動，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關閉的按鈕等。
通過 InkWell 組件，可以捕捉到手勢、鼠標、觸控筆的移動和停留位置
這個功能是鼠標移動後的UI交互界面。要在窗口上顯示壹個提示框，可以使用 Overlay 。需要註意的是，由於在 Overlay 上的 text 的根結點不是 Material 風格的組件，因此會出現黃色的下劃線。因此壹定要用 Material 包壹下 text 。並且妳必須給創建的 OverlayEntry 壹個位置，否則它將全屏顯示。
讀取說表拖拽的文件壹開始想嘗試使用 InkWell 組件，但是這個組件無法識別拖拽中的鼠標，並且也無法從中拿到文件信息。因此放棄。後來從文章《Flutter-2天寫個桌面端APP》中發現壹個可讀取拖拽文件的組件 desktop_drop ，能滿足要求。
使用開源組件 file_picker ，選完圖片後的操作和拖拽選擇圖片後的操作壹致。
Textfield 如果要顯示富文本，那麽需要自定義 TextEditingController 。並重寫 buildTextSpan 方法。
在做導出功能時遇到下列報錯，保存提示為沒有權限訪問對應目錄下的文件。
通過Apple的開發文檔找到有關權限問題的說明。其中有個授權私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對用戶的下載文件夾的讀/寫訪問權限 。那麽，使用Xcode打開Flutter項目中的mac應用，修改工程目錄下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，並將值設置為YES，保存後重啟Flutter項目。發現已經可以向下載目錄中讀寫文件了。
當然，這是正常操作。還有個騷操作就是關閉系統的沙盒機制。將 entitlements 文件的 App Sandbox 設置為NO。這樣我們就可以訪問任意路徑了。當然關閉應用的沙盒也就相當於關閉了應用的防護機制，因此這個選項慎用。
原文地址： /post/7069689952459554830