为什么我从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)
      }
    })

一切都是那么美好。

Flutter毕竟是个注重UI和动效的UI框架，更何况dart的生态还没有建立的很完善。所以只推荐展示类的应用使用它实现。一套代码跨全平台还是很香的。

但是一旦是复杂的编辑或者创作类应用我还是更倾向原生或者使用Electron,React Native开发。

#Flutter##electron##跨平台开发##React#