為什麼我從Flutter轉投Electron的懷抱？

最近打算做一個應用來收集靈感和整理素材，幫助寫文章。Flutter全平臺，早如雷貫耳。想著可以一套程式碼執行在手機、平板、電腦，那就真的全方位收集素材，再簡單打個伺服器就可以爽歪歪了。

結果flutter一上來就給我一頓打臉。

由於想用拖動的方式收集素材，特別在iPad上可以多應用分屏，收集素材不需要再儲存圖片再匯入圖片到應用。另外複製文字可以直接透過拖動來獲取。

而現實是，Flutter sdk不支援外部應用拖動檔案進來。其內部的Draggable和Dragtarget元件只能實現內部的拖動，或者說Dragtarget元件只能接受Draggable的元件。

經過大量時間的搜尋，flutter的一位貢獻者自己開發了從flutter應用中拖拽圖片出去（github相關issue在這裡 https：//github。com/flutter/flutter/issues/30719，其他目前flutter pub中支援此功能的只有在web平臺實現的外掛。而在ios web等其他平臺，各位需要自己實現各個平臺的flutter外掛。但是這研究一個平臺外掛的花費的時間，可能足夠我在原生平臺用swift或者kotlin把應用做好了。

可能這其中的工作量可能會帶來更多的工作機會？也許是各個flutter開發者每天沉浸在繁重的開發過程中可能性更大一點。

而等我轉到Electron，柳暗花明。此時此刻我們是幸運的，web api我們可以盡情享用。

只需透過dataTransfer的getData方法，獲取正在拖動的文字或者圖片的src或者a標籤的href。

透過dataTransfer。files獲取正在拖動的檔案。

document。addEventListener（‘drop’，（event） => { event。preventDefault（） event。stopPropagation（）； console。log（event。dataTransfer。getData（“text/uri-list”）） if （event。dataTransfer。getData（“text/plain”）） { // URL if （event。dataTransfer。getData（“text/plain”）。indexOf（‘：//’） > -1） { const img = document。createElement（‘img’） img。src = event。dataTransfer。getData（“text/plain”） document。body。append（img） } else { // 文字 const img = document。createElement（‘div’） img。innerText = event。dataTransfer。getData（“text/plain”） document。body。append（img） } } // 檔案 for （const f of event。dataTransfer。files） { console。log（‘File Path of dragged files： ’， f。path） const img = document。createElement（‘img’） img。src = f。path document。body。append（img） } }）

一切都是那麼美好。