go-flutter开发桌面应用（一）第一个桌面应用

bettersun
2,594 阅读7分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言： 今天刚看到，可以【搬运自己的原创文章】参加“程序员必备小知识”活动，十分激动。 想起来之前在某平台上还有几篇技术文章，觉着掘金技术氛围更浓厚，正想搬过来。

原文链接： go-flutter开发桌面应用（一）第一个桌面应用 - 知乎 (zhihu.com)

正文

之前学了几天go语言，对于Java的深层怎么也钻研不进去的我，发现go语言的确是挺简单。

一直想用go语言做个小工具啥的，奈何对于使用跨平台的Qt也好，Windows独占的 lxn/walk也好，都学不太进去。

therecipe/qt

lxn/walk

后来接触了flutter，谷歌吹嘘着将来大有发展，实际开发中还是到处是坑。

然后又接触了go-flutter，一开始觉着有各种问题，也不方便调试，做了一个小例子就放弃了。

（炒了几天股被套）之后还是想用go语言做个小工具，于是决定再学习一下go-flutter，说不定越来越好了呢。

相关代码（履历为 初始提交 的版本）

安装Go

Go语言中文官网

从go1.11开始，go语言使用go modules模块进行依赖管理。
go1.11、go1.12需要要设置环境变量启用go modules。

GO111MODULE=auto

go1.13默认启用go modules，无需要设置。
另外，国内需要设置GOPROXY环境变量

GOPROXY=https://goproxy.cn

安装Flutter

参照Flutter中文网

能启动Flutter的默认示例即可。

开始go-flutter

参照链接：# 安装go flutter desktop

go-flutter的github仓库： go-flutter-desktop/go-flutter

1 安装TDM-GCC64位

tdm-gcc (jmeubank.github.io)

安装后子目录的bin需要添加到PATH中。

2 安装hover

go get -u -a github.com/go-flutter-desktop/hover

貌似是为了防止下载go官方包失败。

下载后进入到对应目录，运行命令生成可执行程序。

go install

文件默认安装到 $GOPATH$/bin下，需要把$GOPATH$/bin添加到环境变量中。

hover要求使用flutter channel beta的发行版本

3 flutter开启desktop支持

默认beta版本不支持desktop，需要手动开启：

  • 在flutter目录执行以下命令
git checkout HEAD~0
  • 执行开启desktop支持命令
flutter config --enable-windows-desktop
  • 验证是否支持desktop，查看结果中是否有windows设备
flutter devices

确认结果（例）:

3 connected devices:

Windows (desktop) • windows    • windows-x64    • Microsoft Windows [Version 10.0.18363.1082]
Web Server (web)  • web-server • web-javascript • Flutter Tools
Chrome (web)      • chrome     • web-javascript • Google Chrome 85.0.4183.102

4 创建flutter项目，并使用go-flutter运行

创建Flutter项目

flutter create hellogoflutter

控制台日志：

Creating project hellogoflutter...
  hellogoflutter.gitignore (created)
  hellogoflutter.idea\libraries\Dart_SDK.xml (created)
  hellogoflutter.idea\libraries\KotlinJavaRuntime.xml (created)
  hellogoflutter.idea\modules.xml (created)
  hellogoflutter.idea\runConfigurations\main_dart.xml (created)
  hellogoflutter.idea\workspace.xml (created)
  hellogoflutter.metadata (created)
  hellogoflutter\android\app\build.gradle (created)
  hellogoflutter\android\app\src\main\kotlin\com\example\hellogoflutter\MainActivity.kt (created)
  hellogoflutter\android\build.gradle (created)
  hellogoflutter\android\hellogoflutter_android.iml (created)
  hellogoflutter\android.gitignore (created)
  hellogoflutter\android\app\src\debug\AndroidManifest.xml (created)
  hellogoflutter\android\app\src\main\AndroidManifest.xml (created)
  hellogoflutter\android\app\src\main\res\drawable\launch_background.xml (created)
  hellogoflutter\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
  hellogoflutter\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
  hellogoflutter\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
  hellogoflutter\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
  hellogoflutter\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
  hellogoflutter\android\app\src\main\res\values\styles.xml (created)
  hellogoflutter\android\app\src\profile\AndroidManifest.xml (created)
  hellogoflutter\android\gradle\wrapper\gradle-wrapper.properties (created)
  hellogoflutter\android\gradle.properties (created)
  hellogoflutter\android\settings.gradle (created)
  hellogoflutter\ios\Runner\AppDelegate.swift (created)
  hellogoflutter\ios\Runner\Runner-Bridging-Header.h (created)
  hellogoflutter\ios\Runner.xcodeproj\project.pbxproj (created)
  hellogoflutter\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)
  hellogoflutter\ios.gitignore (created)
  hellogoflutter\ios\Flutter\AppFrameworkInfo.plist (created)
  hellogoflutter\ios\Flutter\Debug.xcconfig (created)
  hellogoflutter\ios\Flutter\Release.xcconfig (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-1024x1024@1x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created)
  hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@2x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (created)
  hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
  hellogoflutter\ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
  hellogoflutter\ios\Runner\Base.lproj\Main.storyboard (created)
  hellogoflutter\ios\Runner\Info.plist (created)
  hellogoflutter\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created)
  hellogoflutter\ios\Runner.xcodeproj\project.xcworkspace\xcshareddata\IDEWorkspaceChecks.plist (created)
  hellogoflutter\ios\Runner.xcodeproj\project.xcworkspace\xcshareddata\WorkspaceSettings.xcsettings (created)
  hellogoflutter\ios\Runner.xcworkspace\contents.xcworkspacedata (created)
  hellogoflutter\ios\Runner.xcworkspace\xcshareddata\IDEWorkspaceChecks.plist (created)
  hellogoflutter\ios\Runner.xcworkspace\xcshareddata\WorkspaceSettings.xcsettings (created)
  hellogoflutter\lib\main.dart (created)
  hellogoflutter\hellogoflutter.iml (created)
  hellogoflutter\pubspec.yaml (created)
  hellogoflutter\README.md (created)
  hellogoflutter\test\widget_test.dart (created)
  hellogoflutter\web\favicon.png (created)
  hellogoflutter\web\icons\Icon-192.png (created)
  hellogoflutter\web\icons\Icon-512.png (created)
  hellogoflutter\web\index.html (created)
  hellogoflutter\web\manifest.json (created)
  hellogoflutter\windows.gitignore (created)
  hellogoflutter\windows\CMakeLists.txt (created)
  hellogoflutter\windows\flutter.template_version (created)
  hellogoflutter\windows\flutter\CMakeLists.txt (created)
  hellogoflutter\windows\runner\CMakeLists.txt (created)
  hellogoflutter\windows\runner\flutter_window.cpp (created)
  hellogoflutter\windows\runner\flutter_window.h (created)
  hellogoflutter\windows\runner\main.cpp (created)
  hellogoflutter\windows\runner\resource.h (created)
  hellogoflutter\windows\runner\resources\app_icon.ico (created)
  hellogoflutter\windows\runner\runner.exe.manifest (created)
  hellogoflutter\windows\runner\Runner.rc (created)
  hellogoflutter\windows\runner\run_loop.cpp (created)
  hellogoflutter\windows\runner\run_loop.h (created)
  hellogoflutter\windows\runner\utils.cpp (created)
  hellogoflutter\windows\runner\utils.h (created)
  hellogoflutter\windows\runner\win32_window.cpp (created)
  hellogoflutter\windows\runner\win32_window.h (created)
  hellogoflutter\windows\runner\window_configuration.cpp (created)
  hellogoflutter\windows\runner\window_configuration.h (created)
Running "flutter pub get" in hellogoflutter...                      2.2s
Wrote 96 files.

All done!
[√] Flutter: is fully installed. (Channel unknown, 1.20.3, on Microsoft Windows [Version 10.0.18363.1082], locale zh-CN)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.1)
[√] Chrome - develop for the web: is fully installed.
[X] Visual Studio - develop for Windows: is not installed.
[√] Android Studio: is fully installed. (version 4.0)
[√] VS Code: is fully installed. (version 1.49.1)
[√] Connected device: is fully installed. (3 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd hellogoflutter
  $ flutter run

Your application code is in hellogoflutter\lib\main.dart.


WARNING: The Windows tooling and APIs are not yet stable. You will likely need to re-create the "windows" directory after future Flutter updates.

进入到目录使用hover初始化

cd hellogoflutter
hover init

执行hover run

hover run

会提示找不到 lib/main_desktop.dart 文件，该文件是go-flutter的启动入口文件。

提示是否创建该文件，选择 y 自动创建后，会自动启动程序。

控制台日志

[1;36mhover: [0m[33mTarget file "lib/main_desktop.dart" not found.[0m
[1;36mhover: [0m[33mLet hover add the "lib/main_desktop.dart" file? [0m
[1;36mhover: [0m[y/N]? y
[1;36mhover: [0m[32mTarget file "lib/main_desktop.dart" has been created.[0m
[1;36mhover: [0m[32m       Depending on your project, you might want to tweak it.[0m
[1;36mhover: [0mUsing engine from cache
[1;36mhover: [0mCleaning the build directory
[1;36mhover: [0m[33m⚠ The go-flutter project tries to stay compatible with the beta channel of Flutter.[0m
[1;36mhover: [0m[33m⚠     It's advised to use the beta channel: `[35mflutter channel beta[0m`[0m
[1;36mhover: [0m[32mBundling flutter app[0m
Font subetting is not supported in debug mode. The --tree-shake-icons flag will be ignored.
hover: Compiling 'go-flutter' and plugins
hellogoflutter/go/cmd
hover: Successfully compiled
hover: Build finished, starting app...
hover: Running hellogoflutter in debug mode
flutter: Observatory listening on http://127.0.0.1:50300/nHb55dLVDCs=/
go-flutter: calculated pixelRatio limited to a minimum of 1.0. metrics: {"dpi":93.6405529953917,"monitorWidthMm":434,"monitorWidthSc":1600,"mscpi":93.6405529953917,"pixelRatio":0.5852534562211982,"ppsc":1,"windowWidthPx":800,"windowWidthSc":800}
Waiting for Flutter test device to report its views...               8ms
Syncing files to device Flutter test device...
 7,504ms (!)

Flutter run key commands.
r Hot reload.
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on Flutter test device is available at: http://127.0.0.1:50300/nHb55dLVDCs=/

启动界面：

image.png

5 配置go flutter desktop的Debug环境

go flutter desktop模式是不支持与vscode集成debug的，不过可以通过修改配置让vscode支持。

在VSCode中打开工程，创建.vscode目录，在.vscode目录下创建tasks.json和launch.json。

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "hover build windows",
            "type": "shell",
            // windows平台
            "command": "hover build windows --debug",
            "problemMatcher": [
                "$go"
            ]
        }
    ]
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter Desktop App",
            "type": "dart",
            "request": "launch",
            "program": "lib/main_desktop.dart",
            // hellogoflutter.exe为编译出来的程序文件
            "args": ["--use-application-binary", "go/build/outputs/windows/hellogoflutter.exe"],
            "preLaunchTask": "hover build windows"
        }
    ]
}

点击执行，即可Debug。

image.png

6 Mac下的go-flutter desktop的配置

Mac下开启桌面支持

  • 在flutter目录执行以下命令
git checkout HEAD~0
  • 开启Mac桌面支持

可执行 flutter config -h 查看各平台对应的开启桌面支持的命令

flutter config --enable-macos-desktop
  • 验证是否支持desktop，查看结果中是否有macOS设备
flutter devices

确认结果（例）:

1 connected device:

macOS (desktop) • macos • darwin-x64 • Mac OS X 10.13.6 17G10021

工程下创建一个macOS设备用于运行程序(create和.之间有个空格)

flutter create .

目录下自动生成了macos目录，对应macos设备。

重启后VSCode会默认加载macos设备。

7. 在Mac中用VSCode调试

7.1 编译生成DEBUG用可执行文件

sudo hover build darwin --debug

编译后的文件在工程下的下面的目录里，可执行程序为hellogoflutter，没有后缀名。

go/build/outputs/darwin/

双击可执行文件打开程序。

打开命令时，会有一个命令窗口和一个程序界面。

在命令窗口找到虚拟机服务对应的URI。

flutter: Observatory listening on http://127.0.0.1:64184/2PhQZHcArbU=/

7.2 在VSCode中绑定Flutter的调试进程

打开VSCode，快捷键 Command + Shift + P 打开命令模式，输入下面命令绑定调试进程。

Debug: Attach to Flutter Process

提示输入：

Paster an VM Service URI

输入上面命令窗口里的URI，回车，即可实现DEBUG监听：

http://127.0.0.1:64184/2PhQZHcArbU=/

VSCode的窗口会显示：

Connecting to VM Service at ws://127.0.0.1:64184/2PhQZHcArbU=/ws

此时可切换到程序界面交互，进行DEBUG。

特别感谢下面帖子的作者：
头条 Flutter 混合工程实践 (qq.com)

7.3 root权限运行VSCode

root权限调试go-flutter程序可实现热加载。

打开VSCode，快捷键shift + command + p，在命令列表中找到下面命令安装VSCode到MacOS的PATH。

Shell Command: Install 'code' Command in PATH

然后命令行用sudo启动VSCode，如果无法进入管理者模式，则需要结束掉所有VSCode进程再用命令启动。

sudo code
avatar
文章
阅读
粉丝
相关推荐
Flutter - 桌面应用窗口化实战
13k阅读
 · 
112点赞
Flutter开发桌面应用
1.8k阅读
 · 
1点赞
Golang之使用Wails打造桌面应用
1.2k阅读
 · 
2点赞
你不知道的桌面客户端开发框架技术选型
1.0k阅读
 · 
4点赞
[Flutter翻译]macOS性能比较：Flutter Desktop vs. Electron
2.2k阅读
 · 
8点赞
用Flutter开发一个桌面端ADB工具应用
24k阅读
 · 
290点赞
你真的敢落地Flutter桌面端吗？
30k阅读
 · 
115点赞
PC 桌面应用开发技术
535阅读
 · 
0点赞
Flutter桌面开发 - windows插件开发
4.8k阅读
 · 
46点赞

友情链接：