Flutter PC开发体验

前言

Flutter 3 完成了从以移动端为中心到多平台框架的路线图，提供了对 windows、macOS 和 Linux 桌面应用的支持，改进了很多支持，增加了新的生产力功能和性能改进特性等等。

好奇心驱使，抱着学习的心态，体验了下flutter版的桌面应用程序开发，在此分享下体验过程，以及一些遇到的坑。

本文涉及的开发内容主要在windows 10平台进行。

安装Flutter环境

• 首先配置flutter3开发环境，照着官方教程傻瓜式安装即可。
  >>安装和环境配置 | Flutter 中文文档 | Flutter 中文开发者网站

注意在国内网络环境下需要进行一些额外的环境配置：>>在中国网络环境下使用 Flutter | Flutter 中文文档 | Flutter 中文开发者网站

• 其次，阅读Flutter 桌面支持文档。
  Flutter 桌面支持 | Flutter 中文文档 | Flutter 中文开发者网站
  可以看到flutter 2.1开始，已经较为稳定的支持windows平台了，3.0稳定版更是覆盖了当下主流的PC操作系统。
  如果要构建特定平台的桌面程序，可以参看特定平台的额外要求。
  这里举例Windows。

• 根据Windows的额外要求文档，可以看到，我们需要给电脑安装Visual Studio 2022，并在安装选项中选择「使用 C++ 的桌面开发」。

这点的配置和Electron应用开发环境配置不太一样，Electron只有在需要调用一些原生链接库时，才需要电脑支持VisulaStudio环境。

不过VS安装过程也已经简化到下一步下一步程度了。过程没遇到什么问题。

Windows for Flutter 配置

• 准备好windows开发环境后，还需要让flutter支持创建windows模板项目

# 使用下面命令打开平台支持 
> flutter config --enable-windows-desktop
# 使用下面命令关闭某个平台支持
 > flutter config --no-enable-windows

上面命令即可打开flutter windows开发之路，对应的将windows改成macos、linux也可以打开对应开发配置，不过同一操作系统只能支持同系统应用开发。

• 检查是否已经支持windows环境

> flutter devices

可以看到，已经显示windows设备了。

C:Userszhujm>flutter devices
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
3 connected devices:

Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19044.1706]
Chrome (web)      • chrome  • web-javascript • Google Chrome 101.0.4951.67
Edge (web)        • edge    • web-javascript • Microsoft Edge 101.0.1210.39

新建Flutter项目

• 创建一个flutter项目

> flutter create myapp
> cd myapp

• 分析下项目目录结构
  

  image.png

  相对于移动端项目，在根目录下多了PC平台的文件夹，windows目录下，有windows运行所需的一些环境配置文件和依赖库。且windows目录大小为200MB。
  打开lib/main.dart，还是经典的计数器示例代码，没有额外的PC端适配代码。

运行Flutter for Windows

• 在windows平台运行工程

第一次在自己电脑上运行flutter pc项目，记得打开windows的开发者模式，否则会报错Please enable Developer Mode in your system settings.，打开方式见这里：flutter windows开发报错Please enable Developer Mode in your system settings.

> flutter run -d windows

运行效果:

image.png

在编译约30s后，程序界面便运行出来了，支持热重载，默认横屏效果，如果是移动端迁移项目估计要做横屏适配了。

在第一次运行flutter pub add时，命令行有报错Bad UTF-8 encoding (U+FFFD; REPLACEMENT CHARACTER) found while decoding string，如果有小伙伴遇到这个问题，可以参看flutter 运行windows项目时报错 Bad UTF-8 encoding (U+FFFD; REPLACEMENT CHARACTER)

• 根据应用开发三步走战略，接下来还需要研究下打包过程，根据以往的pc开发经验，pc打包还是比较复杂的。
  一番打包折腾，最终打出了一个misx安装包，并且完美在windows电脑上运行起来。
  具体打包过程：flutter windows项目打包初探 – 简书 (jianshu.com)

• 安装目录分析

  

  根目录
  

  data目录

可以看到，flutter的业务逻辑相关代码，被封装成了app.so和一些dll文件

总结

• 优势
  整体flutter 面向windows应用开发的流程比较友好，简洁，学习成本低，目前的生态强大，社区也很活跃，基础的应用开发应该只需要熟悉dart语言即可，类似于Electron只需要熟悉Js语言。

• 劣势
  不足之处是原生方面的第三方插件目前较少，原生功能方面生态还有待完善。

• 对比于Electron
  优于Electron的地方，就个人初步体验来看，首先可能是安装包的体积问题，这个Electron的硬伤在Flutter上基本不存在，Flutter的示例demo打出的安装包仅仅十几兆，相比于Electron示例demo打出的七八十兆安装包…，其次，可能是安全性方面，flutter的业务代码在打包后都被封装成链接库的形式，反编译需要有一定的技术基础，相比于electron生成的asar文件，可靠许多。
  另外，Flutter的一套代码几乎cover全平台也是Electron无法比拟的。

以上是个人的体验总结，欢迎大家评论区交流指正🤠。

PS：之前有使用Electron开发了一款Apk安装软件，已成为自己日常办公利器，欢迎移步阅读：使用Electron开发一款Apk安装器应用。