Flutter 开发桌面应用——迁移已有应用到桌面版

前言

最近用flutter做了一款App,已经发布了Android和iOS的版本,因为有计划支持全部平台。所以开始尝试flutter desktop的解决方案。在github上我们能发现两个方案,一个是flutter官方的方案flutter-desktop-embedding还有一个是使用go和glfw开发的go-flutter

两种方案对比

在选择使用flutter-desktop还是go-flutter之前,我们先对两种方案做一些介绍和对比。

image-20190609214047338.png

两种方式的项目结构:

image-20190609213521705的副本.png

Flutter Desktop Embedding:

在flutter desktop中我们可以看到目录结构和flutter开发手机App的结构是类似的,一个主项目下有各个平台的壳工程(这里面也可以包含Android和iOS),然后由壳工程集成flutter的渲染引擎。flutter的代码写在lib目录中。

如果我们懂一些macOS开发或者windows开发,可以直接在项目中修改原生代码,比如你想修改整个程序的window的样式直接在原工程中就能修改,又比如macOS你要集成苹果的IAP,可以直接在原生项目中实现即可。

它的缺点就是三个平台的开发你最好都得懂一些

Go Flutter:

Go Flutter由于本身Go语言就是跨平台的,所有它只有一个desktop目录,表示桌面版,相比于flutter desktop它让开发者完全不需要去关心macOS或者windows开发了,desktop中全是go语言编写的内容,最后desktop可以编译成三中平台的可执行文件。开发者只需要会Go语言即可。

它的缺点就是如果win或者mac或者linux你要在不同的平台做一些特殊的功能或者界面,会特别麻烦,不像在Flutter desktop中直接在宿主项目中实现即可。

对比结果如何选择

首先我们要明确,两种方案都不太成熟,但是如果要用来开发,也不是用不了。大家选择的时候可以根据自身技术栈,以及产品的特性来选择。

如果你懂Go语言,同时你的程序是阅读类,或者偏业务类,基本不需要和本身Native交互的,选 Go Flutter真的很爽。

如果你懂一点macOS或者windows开发,同时你的程序经常三个桌面端各有特色,而且需要修改本身整个window的一些样式,那么选择Flutter desktop embedding。

Go Flutter实际使用

上面说了这么多,我们来实际体验一下Go flutter。先说一下背景,我已经使用flutter开发了一款App,现在我要把App变成可以运行到桌面的版本。我写的软件叫做Everything是一款记录类软件,在这里可以下载到https://everything.apppills.com大家可以先看一下效果。

  1. 安装Go ,由于Go flutter使用Go编写,所以需要安装Go工具包。大家可以在官网下载安装
  1. 安装hover,hover是 Go Flutter的一个命令行工具,简化了项目初始化以及运行等步骤。

    使用下面命令安装

    go get -u github.com/go-flutter-desktop/hover
    

    注意如果上面的命令卡住下载不下来,大家可以设置一下代理,设置命令行代理可以开启ss或者v2ray,然后在命令行输入命令设置

    export http_proxy="http://127.0.0.1:8001"; export HTTP_PROXY="http://127.0.0.1:8001"; export https_proxy="http://127.0.0.1:8001"; export HTTPS_PROXY="http://127.0.0.1:8001"
    //8001改成你的ss或者v2ray监听的端口
    

    ⚠️ 注意:安装好hover之后,官网上说就可以使用hover命令了,但是可能你在命令行里敲hover可能还是得到的是command not found。 这里我用的是mac系统,在安装好之后,在home目录多了一个go的目录,需要在你的环境变量里加入一下go的包路径。

    export PATH=$PATH:/usr/local/go/bin
    export PATH=$PATH:/Users/{你的用户名}/go/bin
    //可以检查一下你的home目录是否有了go的目录,里面有个bin,将那个目录加入到环境变量即可
    
  2. 进入你以前开发App的flutter项目,执行命令初始化项目

    hover init github.com/my-organization/simpleApplication
    //后面这个github.com xxxx就是你的项目仓库地址。没有的话随便写也行
    

    初始化项目完成后,你会在你的项目中发现一个desktop目录,和以前的iOS和Android是平级的。这个desktop目录就是桌面版的项目。

  3. 把你的main.dart复制一份名字改为main_desktop.dart,Go flutter有个特别的地方,就是程序的入口不是用的main.dart,而是用的main_desktop.dart。

    修改main_desktop.dart为使用桌面版运行

    void main() {
      // 关键是下面这一句
      debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
      runApp(new MyApp());
    }
    
  4. 大功告成,运行项目吧。

    hover run
    //执行 hover run 可以运行项目
    

我们先来看一下运行效果下面是App的运行效果和桌面版的运行效果。

手机版本身效果:

bbbb.gif

Go Flutter运行的桌面版效果:

ccc.gif

FAQ:

1.程序按照上面那样迁移完成就能跑?

当然不是,我们都知道我们用了很多插件,其实是只支持Android或者iOS的,如果你用得比较多的这种插件,那么你可能迁移到桌面端过来会比较麻烦。我的整体迁移的时间大概只用了2-3个小时,我用到了sqflite和shared preference,这两个插件Go flutter已有实现,所以很容易替换。

2.如何使用Go flutter的插件

我们知道我们所有和原生通信都是通过定义一个method channel来通信的。如果你用到的插件只支持Android或者iOS,那么你就需要在desktop中去实现这个插件的method channel的所有方法。目前Go flutter只有三个插件可以用,在这里可以找到。https://github.com/go-flutter-desktop/plugins 点击某个插件,就可以看到使用方法,就是把对应代码贴到,desktop里面的option文件中即可,不要找错地方了,官网没说得太清楚。

最后

感谢大家的阅读,我们用flutter开发了个小App也欢迎大家试用:

Everything 把记账本日记本,行程,待办等等都装进一个App里。

https://everything.apppills.com/

image-20190609223616844.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容