2019-04-26更新

flutter-desktop-embedding半个月前变成了Flutter引擎的一部分,官方开始支持PC平台开发。按照作者本人说法flutter-desktop-embedding项目现在只是构建使用这些库的应用程序的一个示例和测试环境。


简介

本文主要介绍如何使用flutter-desktop-embedding将flutter项目运行在Windows平台上。

注意

  • 本文默认用户已经配置好flutter开发环境
  • 当前(2019-03)该项目仅推荐尝鲜,许多桌面开发功能尚未提供,且该项目不是谷歌官方支持的。
  • 在运行自己项目前,推荐先使用flutter-desktop-embedding下example项目来测试环境,example运行成功后,可以把自己的项目代码粘贴到example项目中,来运行自己的flutter项目。

所需工具下载地址(Windows平台)

  • flutter需要更新到最新版本
  • 下载flutter-desktop-embedding 将该项目和之前的flutter放置在同一级文件夹下。
<parent dir>
  ├─ flutter (from https://github.com/flutter/flutter)
  └─ flutter-desktop-embedding (from https://github.com/google/flutter-desktop-embedding)
复制代码
  • Visual Studio 2017(低于该版本可能出现问题)
  • ninja
  • gn

Visual Studio 2017安装

  1. 安装时勾选
  • 工作负载-使用C++桌面开发
  • 单个组件-用于桌面 C++ [x86 和 x64]的 Windows 10 SDK,此时ide会自动勾选另外两个,记住勾选的sdk版本号,后面会用到
  • 安装位置修改(可选)
  1. 环境变量配置 Visual Studio命令行构建工具,例如vcvars64.bat必须包含在环境变量Path中。该路径一般为
C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\VC\Auxiliary\Build
复制代码

或者

<Visual Studio Install Path>\2017\<Version>\VC\Auxiliary\Build
复制代码

具体配置可参考gn安装。

ninja安装

1.安装包管理工具Chocolatey,可以用cmd也可以用PowerShell,这里使用PoserShell安装。
注意,需要以管理员身份运行PowerShell。 在命令行粘贴一下命令。

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).Downloa
dString('https://chocolatey.org/install.ps1'))
复制代码

安装成功后输入choco即可看到版本信息


2.使用choco安装ninja

choco install ninja --version 1.9.0
复制代码


3. 输入ninja -h,测试是否安装成功


gn安装

将解压后名字叫gn的应用程序所在路径添加到系统变量PATH中 添加完成后,在命令行输入gn help可以看到帮助信息即配置成功。

jsoncpp下载

jsoncpp必须被下载到third_party/jsoncpp\src,可以使用tools/dart_tools/bin/fetch_jsoncpp.dart来简化该步骤。

> tools\run_dart_tool.bat fetch_jsoncpp third_party\jsoncpp\src
复制代码



构建library

$ tools\gn_dart gen out
$ ninja -C out flutter_embedder
复制代码

提示:第二步运行时需要从googleapis下载,经常会报错,出错后Ctrl+C关闭进程,检查"网络"后重新输入第二句指令,继续下载。下载成功后运行情况如下;



用VS2017打开demo

demo所在位置: flutter-desktop-embedding\example\windows_fde 双击GLFW Example.vcxproj,用VS2017打开该文件。 打开后,点击"生成"-"生成解决方案",此时可能会报错

E1696 无法打开源文件"windows.h"
E1696 无法打开源文件"stddef.h"
...
复制代码

在vs右侧有一个解决方案管理器,右击该项目(GLFW Example),选择属性,"配置属性"-"常规"-"Windows SDK版本"选择我们在VS最开始安装时勾选的版本号,点击应用即可。
点击"生成"-"重新生成解决方案",在控制台中可以看到生成的exe路径。


双击生成的exe,运行成功!

运行自己的flutter项目

因为这个example项目已经配置好了平台支持,最简单的方法就是将自己项目的代码、pubspe.yaml、资源等添加到example中,之后在vs中重新生成即可运行。
注意: 因为flutter目前还不支持识别到windows平台,需要在main.dart中添加

import 'package:flutter/foundation.dart'
...
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
复制代码

具体可以参考example中的写法。