flutter Web Windows调试

2,402 阅读2分钟

1.准备工作 使用master版本

flutter channel master

  • 更新最新的版本

flutter upgrade

  • 最后flutter doctor检查完毕

2.进一步进入项目文件夹 cd 项目

  • 开启对web端的支持

flutter config --enable-web

  • 出现 Setting "enable-web" value to "true".就可以了

flutter devices

  • 查看可调式设备,如你已安装,chrome会显示出来

3.运行

flutter create 项目名称

  • 新建项目运行,创建支持web端运行的app

flutter create .

  • 已有项目,相当于在已有项目目录上创建web编译文件夹

最后

flutter run -d chrome

  • 项目运行到web
  • 创建项目简单demo能正常显示。若已有demo涉及http包等web不支持的包,就无法迁移成功。

windows 切换分支升级sdk

flutter config --enable-linux-desktop
flutter config --enable-macos-desktop
flutter config --enable-windows-desktop
  • Linux

Linux开发环境除了标准的flutter环境之外还需要cmake和clang++这个包,安装这两个包也比较容易

sudo apt install cmake sudo apt install clang

  • Windows

Windows开发环境除了标准的flutter环境之外还需要Visual Studio对,没有错需要安装这个ide,并且还要安装其中的"Desktop development with C++"的workload,,这个如果没有安装的话需要安装,6个多G有点蛋疼。

  • Macos

目前没有发现什么需要特殊的配置,能开发IOS理论上就可以开发macos,有一个xcode就可以了

编码的话,既然都是flutter那基本的语法是一样的,需要注意的是需要在我们的main之前加入下面这句 void main() {

debugDefaultTargetPlatformOverride = TargetPlatform.android;

    runApp(new MyApp());
    
    }

这里如果是Windows和Linux的话后面的TragetPlatform用android,如果是Macos则用ios

另外就是需要我们真对每个平台需要有一个加载flutter的启动器,这个就像我们写Android和IOS时的那个宿主应用一样,这点大家不要太担心,google在github上有example的项目,我们可以直接拿来用

运行和编译

  • 运行 首先先用

flutter devices

确认我们的设备是可被识别的,然后使用

flutter run

  • 编译

使用

flutter build linux

flutter build macos

flutter build windows

可编译出对应的版本,存放在build/对应平台/release目录下,注意只能编译和开发机同平台的版本.

  • Linux平台编译出的为一个可执行文件
  • Windows平台编译出的为.exe文件
  • Mac平台编译出的为.pgk文件

Flutter桌面版开发目前主要是有 flutter-desktop-embedding 和 go-flutter 两个方式实现. 今天我们说的就是前者