将移动端的Flutter代码部署为桌面程序(macOS)

介绍

如果您正在为智能手机开发应用程序,可能您已经听说过Google的Flutter这个比较新的开发框架。它是一个允许您使用Dart语言(也来自Google)开发可以同时在Android和iOS平台发布的具有单个代码库的应用程序框架。

其实,Flutter不仅限于移动端的跨平台(Android、iOS),还可以为桌面环境(Windows,macOS和Linux)构建应用程序,这点在今年的Goole IO大会上是一大亮点,那么本文将讨论如何将Flutter代码运行在桌面客户端(以macOS为例)为例。

目前有两个仍在开发中的项目为Flutter提供了对桌面平台的支持。其中一个是谷歌开发的,但有迹象表明该Google并不是很支持它。可以在以下Github仓库中查看这两个项目:

  1. flutter-desktop-embedding
  2. go-flutter-desktop-embedder

这两个项目都归类为Custom Flutter Engine Embedders,也就是说,它们是Flutter API的实现,因此在此框架中开发的项目可以在Flutter正式支持的操作系统(Android,Fuchsia和iOS)之外运行。

1_Jj9NuZWdUvz4trhQXotaEw

这两个项目都使用了GLFW库的OpenGL 模块(除了Google项目的macOS版本),该模块用于在桌面平台上创建窗口以及处理键盘和鼠标输入等功能的API。因此,正在开发的应用程序运行的平台必须安装OpenGL驱动程序

下面我以flutter-desktop-embedding为例说明如何通过简单的步骤构建flutter桌面级应用程序。

flutter-desktop-embedding使用

  1. flutter-desktop-embedding项目克隆到本地,注意,要将此项目放在与你安装的flutter sdk的同级目录下,比如你的flutter的目录是Flutter/flutter,那么你应该将flutter-desktop-embedding放在Flutter目录下,就像这样:

    image-20190530002921466

  2. 使flutter支持桌面应用程序:默认的flutter是只支持移动端的,如果我们当前没有连接移动端真机或者模拟器,则运行flutter devices后输出如下:

    image-20190530003127529

    即提示我们当前没有可用设备,所以我们应该执行:

    macos 或Linux:

    export ENABLE_FLUTTER_DESKTOP=true
    

    windows:

    • PowerShell:

      $env:ENABLE_FLUTTER_DESKTOP="true"
      
    • CMD:

      set ENABLE_FLUTTER_DESKTOP=true
      

    然后再执行flutter devices:

    image-20190530003352508

    发现这个时候已经有可用设备即我们的本机PC设备了。

  3. 新建flutter项目:可以通过flutter命令行或者idea之类的编辑器进行flutter项目的创建。

  4. 将flutter-desktop-embedding库的示例配置文件复制到我们的项目中:flutter-desktop-embedding为我们提供了一个默认的配置文件,作用是将移动端flutter代码解析并运行在桌面上,我们可以直接将其复制到自己的项目中使用(当然你也可以根据自己的需要自己编写),配置文件的位置为../flutter-desktop-embedding/example/xx,xx代表你的平台,如果你是macos,则xx代表macos文件夹,如果是Linux,则xx代表linux,Windows类似,直接将整个文件夹复制到你的项目目录中,就像:

    屏幕快照 2019-05-30 00.39.16

  5. 运行项目:在你的项目中执行flutter run即可成功运行:

    屏幕录制 2019-05-30 00.41.47

总结

目前Flutter对桌面程序的支持还不是很成熟,但是可以看到其具有很大的潜力,相信后面会逐步成熟,可以预见未来全平台UI统一开发会是一个趋势,本文抛砖引玉,欢迎各位留言交流对Flutter以及未来跨平台开发的独特见解。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值