FlutterDesktop(一)--创建桌面程序

准备工作

  • 更新Flutter到最新版
1
$ flutter upgrade
  • 添加环境变量以启用Desktop支持

    • 变量名ENABLE_FLUTTER_DESKTOP
    • 变量值为true
    • 添加完成后Linux下可以使用echo $ENABLE_FLUTTER_DESKTOP查看是否添加成功,如果没有的话可以重启或者是使用source命令
    • 如图
      screenshot01
  • 添加好之后最好再执行一次flutter doctor,出现如下图所示就说明启用成功了,并且执行flutter devices也会显示当前pc,由于我使用的Linux,所以显示的也是Linux
    screenshot02

  • 准备工作到这里也就完成了,接下来该创建一个项目来试试看了

项目创建

  • 和创建普通的Flutter项目一样

screenshot03

  • 启用Desktop支持后,在选择设备下拉框里面就会出现当前系统的名称

screenshot04

  • 如果这时候点击运行,就会出错,因为还没有配置相关文件

screenshot05

  • 由于一些问题,所以在配置文件之前还需要修改一下dart代码,在main.dart里面加上下面这段,并且在runApp(MyApp())之前调用
1
2
3
4
5
6
7
8
9
10
11
void _setTargetPlatformForDesktop() {
TargetPlatform targetPlatform;
if (Platform.isMacOS) {
targetPlatform = TargetPlatform.iOS;
} else if (Platform.isLinux || Platform.isWindows) {
targetPlatform = TargetPlatform.android;
}
if (targetPlatform != null) {
debugDefaultTargetPlatformOverride = targetPlatform;
}
}

项目配置

  这里只针对Linux平台介绍,windowsmacos也差不多,只是分别需要装visual studioxcode,剩下的直接复制粘贴flutter-desktop-embedding里面的例子就行了

  • 先cloneflutter-desktop-embedding
1
git clone https://github.com/google/flutter-desktop-embedding/
  • 再把里面example的linux部分的文件完全复制到创建的项目的linux文件夹里面,如果没有则可以自行创建

  • 这时再点击运行,就会出现运行成功的窗口了

screenshot06

  • 目前是运行了一个桌面程序的Demo,更加详细的内容会在后面介绍