到目前为止,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语言环境准备
- 访问Go语言中文网 下载相应的包,记住要下载最新的版本,本篇以Windows为例,下载
go1.12.5.windows-amd64.msi
。如你本地已安装旧的Go版本,请务必更新到最新的 - 指定安装目录,点击安装
- 配置环境变量。安装完成后,将安装目录下的
bin
目录加入到系统环境变量Path中,也就是go.exe
所在的路径加入到环境变量Path中。 - 检查环境。打开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
如需替换图标和资源,可以进入我们生成的项目下的
desktop
路径下的
assets
目录操作
打包为可执行程序 还可以使用hover build
命令打包为exe
可执行文件,进入项目下的desktop\build\outputs\windows
路径查看
还存在的问题
如果大家有现成的Flutter App,可以按照以上步骤打包成桌面程序进行尝试,只需要注意分离出桌面端的入口文件main_desktop.dart
即可,目前直接将Flutter App打包为桌面端程序,仍然会存在一些可能的兼容性问题,另外go-flutter-desktop
项目还不支持发布模式,仅支持调试模式,这意味着编出来的桌面程序,始终有一个黑框控制台,且不断的输出日志。
视频课程
博主发布的相关视频课程
欢迎关注我的公众号:编程之路从0到1
今天的文章Flutter App打包为桌面端程序分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/14322.html