Go – Flutter desktop application development (1) First desktop application

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Preface: Today just see, can [carry own original article] participate in “programmer essential small knowledge” activity, very excited. Remember before there are a few technical articles on a platform, I feel the nuggets technology atmosphere is stronger, I want to move over.

(1) The first desktop application — Zhihu (Zhihu.com)

The body of the

I learned go language for a few days before. As I could not delve into the deep layer of Java, I found go language is really quite simple.

Always want to use go language to do a small tool what, but for the use of cross-platform Qt, Windows exclusive LXN /walk or, are not too go in.

therecipe/qt

lxn/walk

When It came to Flutter, Google boasted about its future, but the development of Flutter was riddled with problems.

Then I came into contact with Go-Flutter. At the beginning, I thought there were various problems with the flutter and it was not convenient to debug. I made a small example and gave up.

Later, I still wanted to make a little tool with go language, so I decided to learn go-flutter again. Maybe it would get better and better.

---

Related code (CV is the version originally submitted)

Install the Go

Go Language Chinese official website

Since go1.11, the Go language uses the Go Modules module for dependency management. Go1.11 and go1.12 require setting environment variables to enable go Modules.

GO111MODULE=auto
Copy the code

Go1.13 Enables go Modules by default. No setting is required. In addition, GOPROXY environment variables need to be set in China

GOPROXY=https://goproxy.cn
Copy the code

Install the Flutter

Refer to Flutter Chinese website

The default example that can start Flutter is ok.

Began to go to flutter

See the link: # Install go Flutter Desktop

Go-flutter github repository: Go-flutter – Desktop/Go-Flutter

1 Install TDM-GCC64-bit

tdm-gcc (jmeubank.github.io)

After the installation, the bin of the subdirectory must be added to the PATH.

2 install the hover

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

Seems to be in case downloading the official go package fails.

After downloading, go to the corresponding directory and run commands to generate executable programs.

go install
Copy the code

The file is installed under $GOPATH$/bin by default. You need to add $GOPATH$/bin to the environment variable.

Hover requires a release of Flutter Channel Beta

3 Enable Desktop support for flutter

The default beta version does not support desktop, you need to manually enable:

• Execute the following command in the FLUTTER directory

git checkout HEAD~0
Copy the code

• Run the command to enable Desktop support

flutter config --enable-windows-desktop
Copy the code

• Verify whether desktop is supported and check whether Windows devices are displayed in the result

flutter devices
Copy the code

Confirmation results (example) :

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.102Copy the code

4 Create a FLUTTER project and run it with Go-flutter

Create the Flutter Project

flutter create hellogoflutter
Copy the code

Console log:

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\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected] (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\[email protected] (created)
  hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\[email protected] (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.
Copy the code

Enter the directory using hover initialization

cd hellogoflutter
hover init
Copy the code

Perform hover the run

hover run
Copy the code

The lib/main_desktop.dart file is not found. This file is the go-flutter startup entry file.

A message is displayed asking you whether to create the file. If you select y, the program is automatically started.

Console log

[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 the go - flutter: http://127.0.0.1:50300/nHb55dLVDCs=/ Calculated pixelRatio limited to a minimum of 1.0. Metrics: {" dpi ": 93.6405529953917," monitorWidthMm: "434," monitorWidthSc: "1600," mscpi ": 93.6405529953917," pixelRatio ": 0.5852534562211 982,"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 The debugger and profiler on Flutter test device is available at: http://127.0.0.1:50300/nHb55dLVDCs=/Copy the code

Startup interface:

5 Configure the Debug environment for go Flutter Desktop

Debug integration with vscode is not supported in go flutter desktop mode, but vscode can support this by modifying the configuration.

Open the project in VSCode, create the.vscode directory, and create tasks.json and launch.json in the.vscode directory.

tasks.json

{"tasks": [{"label": "hover build Windows ", "type": "shell", // Windows platform "command": "hover build windows --debug", "problemMatcher": [ "$go" ] } ] }Copy the code

launch.json

{"version": "0.2.0", "Configurations ": [{"name": "Flutter Desktop App", "type": "dart", "request": "Launch ", "program": "lib/main_desktop.dart", // hellogoflutter. Exe is the compiled program file "args": ["--use-application-binary", "go/build/outputs/windows/hellogoflutter.exe"], "preLaunchTask": "hover build windows" } ] }Copy the code

Click Execute to Debug.

6 Configuration of go-Flutter Desktop in Mac

Enable desktop support in Mac

• Execute the following command in the FLUTTER directory

git checkout HEAD~0
Copy the code

• Enable Mac desktop support

You can run the flutter config -h command to view the commands corresponding to each platform to enable desktop support

flutter config --enable-macos-desktop
Copy the code

• Verify whether desktop is supported and check whether macOS devices are displayed in the result

flutter devices
Copy the code

Confirmation results (example) :

1 connected device:

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

Create a macOS device under the project to run the program (create and. With a space between)

flutter create .
Copy the code

A MacOS directory is automatically generated in the directory, corresponding to macOS devices.

After reboot VSCode will load the macos device by default.

7. Debug with VSCode on Mac

7.1 Compiling Generates the DEBUG executable file

sudo hover build darwin --debug
Copy the code

The compiled file is in the directory below the project. The executable program hellogoflutter has no suffix.

go/build/outputs/darwin/
Copy the code

Double-click the executable to open the program.

When you open a command, there is a command window and a program interface.

Find the URI corresponding to the VM service in the command window.

Flutter: Observatory listening on http://127.0.0.1:64184/2PhQZHcArbU=/Copy the code

7.2 binding the Flutter debugging process to VSCode

To open VSCode, the shortcut key Command + Shift + P opens the Command mode and type the following Command to bind the debug process.

Debug: Attach to Flutter Process
Copy the code

Prompt for input:

Paster an VM Service URI
Copy the code

Enter the URI in the command window above and press Enter to implement DEBUG listening:

http://127.0.0.1:64184/2PhQZHcArbU=/
Copy the code

The VSCode window will display:

Connecting to the Service VM at ws: / / 127.0.0.1:64184/2 phqzhcarbu = / wsCopy the code

In this case, you can switch to the program interface for debugging.

Special thanks to the author of the following post: Headlines Flutter Hybrid Engineering Practice

7.3 Running VSCode with root Permission

Debug the Go-FLUTTER application with root permission to achieve hot loading.

Open VSCode, shortcut shift + command + P, in the command list to find the following command to install VSCode to MacOS PATH.

Shell Command: Install 'code' Command in PATH
Copy the code

Sudo is used to start VSCode. If you cannot enter administrator mode, you need to end all VSCode processes and run the command to start VSCode.

sudo code
Copy the code