24

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

 4 years ago
source link: https://juejin.im/post/5cfd1ad86fb9a07ebf4b625b
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
2019年06月09日 阅读 9790

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

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

两种方案对比

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

1

两种方式的项目结构:

1

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是一款记录类软件,在这里可以下载到everything.apppills.com大家可以先看一下效果。

  1. 安装Go ,由于Go flutter使用Go编写,所以需要安装Go工具包。大家可以在官网下载安装

  2. 安装hover,hover是 Go Flutter的一个命令行工具,简化了项目初始化以及运行等步骤。

    使用下面命令安装

    go get -u github.com/go-flutter-desktop/hover
    复制代码

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

    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监听的端口
    复制代码

    ⚠️ 注意:安装好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,将那个目录加入到环境变量即可
    复制代码
  3. 进入你以前开发App的flutter项目,执行命令初始化项目

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

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

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

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

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

    hover run
    //执行 hover run 可以运行项目
    复制代码

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

手机版本身效果:

16b3cb3588b93eac?imageslim

Go Flutter运行的桌面版效果:

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

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

2.如何使用Go flutter的插件

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

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

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

everything.apppills.com/

1

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK