Flutter App打包为桌面端程序

落日映苍穹つ 2022-01-20 00:45 731阅读 0赞

## 视频课程 ##

博主已发布相关视频课程

如需要获取完整的**Flutter全栈式开发课程**，请 [**点击跳转**][Link 1]  
![qr\_adv][qr_adv]

到目前为止，Flutter虽没有在桌面端发力，但仍然提供了直接将Flutter App项目打包到桌面端的途径。在我们看来，这更像一种实验性质的尝试。无论如何，我还是相信Flutter在跨平台UI方面的优秀表现，现在就让我们来体验一下Flutter在桌面上的表现吧。

直接使用 [flutter-desktop-embedding][] 打包体验并不友好，像很多其他的框架一样，我们需要一个脚手架来辅助，这里推荐 [go-flutter-desktop][] 项目，这是一个Go语言开发的将Flutter App打包为桌面程序的库。Go语言也是我非常喜欢的语言！

关于Flutter环境搭建等等基础就不说了，默认读者具备Flutter开发能力，接下来请看详细步骤

## 步骤一：搭建环境 ##

*  **flutter** 环境略
 *  **golang**  
    go 语言开发环境
 *  hover  
    **go-flutter-desktop** 提供的脚手架工具

先看Go语言环境准备

1.  访问[Go语言中文网][Go] 下载相应的包，记住要下载最新的版本，本篇以Windows为例，下载 `go1.12.5.windows-amd64.msi`。如你本地已安装旧的Go版本，请务必更新到最新的
2.  指定安装目录，点击安装
3.  配置环境变量。安装完成后，将安装目录下的`bin`目录加入到系统环境变量Path中，也就是`go.exe`所在的路径加入到环境变量Path中。
4.  检查环境。打开cmd命令行，输入`go env`，成功输出Go的环境路径，则Go环境完成。

说明，如大家还有兴趣学习Go语言的开发，则还需要配置`GOPATH`环境变量。

下载安装 **hover** 库。这是一个Go语言库  
在cmd命令行执行以下命令安装，如网络不稳定，可能需要一定时间

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

## 步骤二：创建工程 ##

若没有现成的Flutter 工程，先创建一个。请先确保Flutter环境正常可用

flutter create myapp

cd 到 flutter 项目路径下，即`myapp`下。这里以创建的测试工程为例，进入到`myapp`下的`lib`  
文件夹，将`main.dart`删除。由于flutter桌面项目的特殊要求，因此这里需要给工程配置两个入口文件，分别创建`main.dart`、`main_desktop.dart`文件，注意文件名是固定的，不可随意修改。然后在创建一个`app.dart`文件，这里充当我们测试app的具体代码，命名无要求

`main.dart`代码如下，这是移动端app需要用到的入口代码

import 'package:flutter/material.dart';
    import 'app.dart';
    
    void main() => runApp(MyApp());

`main_desktop.dart`内容如下，这是桌面端需要的入口代码

import 'package:flutter/material.dart';
    import 'package:flutter/foundation.dart' show debugDefaultTargetPlatformOverride;
    import 'app.dart';
    
    void main() {
      debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
      runApp(MyApp());
    }

`app.dart`内容如下，UI的实际代码，即在屏幕上显示一个`Hello World!`

import 'package:flutter/material.dart';
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: HomePage(),
        );
      }
    }
    
    class HomePage extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
          return Scaffold(appBar: AppBar(title: Text("Demo")),
            body: Center(child: Text('Hello World!'),),
          );
      }
    }

## 步骤三：初始化为桌面工程 ##

在Flutter项目的根路径下，有android目录和ios目录，但没有桌面端的编译目录，这一步即是借助**hover** 库自动生成桌面端的项目编译目录

确保当前命令行环境在`myapp`项目路径下，否则cd过去，然后执行以下命令

hover init github.com/my-organization/myapp

如果你有相应的github项目路径，请修改为自己的，否则可以像上面一样随便写一个。本例中是一个测试工程，没上传到GitHub，这里随便写了一个。注意这里的坑，这个GitHub路径是必须要写的，否则无法正常打包，这可能是该脚手架工具的BUG

## 步骤四：运行与打包 ##

如你需要以热加载启动app，请在当前命令行中执行`hover run`，注意，此时会联网下载一些依赖，会耗费一些时间，而且还要看人品，根据自己的网络情况，被墙也是很有可能的。如果你在后台使用了`Socks5`代理，则会发生远程服务器关闭连接的错误，请关闭`Socks5`代理，开启`Http代理`

依赖准备完成后，会启动app  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hcmN0aWNmb3guYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]  
如需替换图标和资源，可以进入我们生成的项目下的`desktop`路径下的`assets`目录操作

**打包为可执行程序**  
还可以使用`hover build`命令打包为`exe`可执行文件，进入项目下的`desktop\build\outputs\windows`路径查看

## 还存在的问题 ##

如果大家有现成的Flutter App，可以按照以上步骤打包成桌面程序进行尝试，只需要注意分离出桌面端的入口文件`main_desktop.dart`即可，目前直接将Flutter App打包为桌面端程序，仍然会存在一些可能的兼容性问题，另外`go-flutter-desktop`项目还不支持发布模式，仅支持调试模式，这意味着编出来的桌面程序，始终有一个黑框控制台，且不断的输出日志。

参考：  
[https://github.com/go-flutter-desktop/hover][https_github.com_go-flutter-desktop_hover]

# 欢迎关注我的公众号：编程之路从0到1 #

![编程之路从0到1][0_1]

[Link 1]: http://m.study.163.com/provider/480000001855430/index.htm?share=2&shareId=480000001855430
[qr_adv]: /images/20220120/f600c4a002be4104a6316fd69725e0fd.png
[flutter-desktop-embedding]: https://github.com/google/flutter-desktop-embedding
[go-flutter-desktop]: https://github.com/go-flutter-desktop
[Go]: https://studygolang.com/dl
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hcmN0aWNmb3guYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220120/ad345e1f0cf3486bab7e91ec349c2e9a.png
[https_github.com_go-flutter-desktop_hover]: https://github.com/go-flutter-desktop/hover
[0_1]: /images/20220120/9debf83f56d04b698ca78afe55657b56.png