Flutter App打包为桌面端程序

7,320 阅读4分钟

到目前为止,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语言中文网 下载相应的包,记住要下载最新的版本,本篇以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.dartmain_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

在这里插入图片描述
如需替换图标和资源,可以进入我们生成的项目下的desktop路径下的assets目录操作

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

还存在的问题

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

参考: github.com/go-flutter-…

视频课程

博主发布的相关视频课程

Flutter全栈式开发之Dart 编程指南

二维码

Flutter 全栈式开发指南

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

编程之路从0到1