在Google I/O 2019大会上，Flutter Web发布了正式版本，同时演示了Flutter开发的桌面应用。本文展示了如何在macOS环境运行一个Flutter桌面应用。

1. 安装Flutter

首先需要安装XCode和Flutter环境。Flutter的安装过程可以参考：

https://flutter.dev/docs/get-started/install

对于中国大陆的用于需要配置代理服务(参考 https://flutter.dev/community/china)：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

以上两行主要是设置pub和flutter包的代理服务。

2. 切换到master分支

目前Flutter桌面版还没有正式发布。Flutter桌面版的仓库在这里：

https://github.com/google/flutter-desktop-embedding

查看example/README.md文件说明，需要切换到master分支：

$ flutter channel
Flutter channels:
* stable
  beta
  dev
  master
$ flutter channel master
Switching to flutter channel 'master'...
git: From https://github.com/flutter/flutter
git:    0ba67226e..ed90d0559  dev        -> origin/dev
git:    8b0243f41..51799d319  master     -> origin/master
git:  * [new tag]             v1.6.0     -> v1.6.0
git: Switched to a new branch 'master'
git: Branch 'master' set up to track remote branch 'master' from 'origin'.
$ flutter upgrade

第一行语句flutter channel是查看分支列表，第二个语句flutter channel master是切换到master分支。第三行语句是更新master到最新的体检。因为master分支时刻对应git最新提交到代码，因此输出的信息可能有差异。

3. 打开桌面选项`ENABLE_FLUTTER_DESKTOP=true`

查看example/README.md文件说明，需要打开桌面选项：ENABLE_FLUTTER_DESKTOP=true。

如果是临时测试，可以直接在flutter命令前设置环境变量：

$ ENABLE_FLUTTER_DESKTOP=true flutter devices
1 connected device:

macOS • macOS • darwin-x64 • Mac OS X 10.13.6 17G3025

以上命令是查看本地桌面设备，已经可以看到macOS设备。

目前通过执行flutter create命令创建桌面应用还不太好用。为了快速测试，我们可以获取官方example的例子：

$ git clone https://github.com/google/flutter-desktop-embedding.git
$ cd example

获取依赖包的方式类似(对于当前这个例子，这一步似乎可以省略)。

$ ENABLE_FLUTTER_DESKTOP=true flutter packages get
Running "flutter packages get" in example...                        0.9s

下面就可以运行了：

$ ENABLE_FLUTTER_DESKTOP=true flutter run
Running "flutter packages get" in example...                        6.8s
Launching lib/main.dart on macOS in debug mode...
Building macOS application...                                           
Syncing files to device macOS...                                        
 3,214ms (!)                                       

?  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on macOS is available at: http://127.0.0.1:52068/uOXcXL_t73k=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

下面就看到了官方入门的例子：

flutter ios修改图标 flutter桌面应用_java开发桌面应用



4. 桌面版代码差异

查看example/lib/main.dart文件：

import 'package:flutter/foundation.dart'
    show debugDefaultTargetPlatformOverride;
import 'package:flutter/material.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

  runApp(new MyApp());
}

和iOS等手机平台最大的差异是多了一个debugDefaultTargetPlatformOverride语句。该语句用于指定应用在目标平台支持的一个类型。

如果需要对不同的平台做定制处理，可以通过类似以下代码完成：

void _setTargetPlatformForDesktop() {
  TargetPlatform targetPlatform;
  if (Platform.isMacOS) {
    targetPlatform = TargetPlatform.iOS;
  } else if (Platform.isLinux || Platform.isWindows) {
    targetPlatform = TargetPlatform.android;
  }
  if (targetPlatform != null) {
    debugDefaultTargetPlatformOverride = targetPlatform;
  }
}

相关文档可以参考这里：https://github.com/flutter/flutter/wiki/Desktop-shells

5. 你好，光谷码农！

第一个例子可以工作之后，我们就可以在此基础上调整代码来。下面是将example例子中的控件做了简化，首先夹在一个网络图像，然后显示一个“chai2010”文本：

import 'package:flutter/foundation.dart'
    show debugDefaultTargetPlatformOverride;
import 'package:flutter/material.dart';

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '光谷码农',
      home: Scaffold(
        appBar: AppBar(title: Text('光谷码农')),
        body: Column(
            children: [
              Image.network('https://guanggu-coder.cn/weixin-guanggu-coder-logo.png'),
              Text('chai2010')
            ],
          ),
      ),
    );
  }
}

显示的效果如下：


Flutter已经成为横跨手机、Web和桌面的跨平台UI框架。我们期望桌面版的正式版本能够尽早到来。感谢Dart语言，感谢Flutter！