到目前为止,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语言环境准备

go1.12.5.windows-amd64.msibingo.exego env
GOPATH

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

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

步骤二:创建工程

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

flutter create myapp
myappmyapplibmain.dartmain.dartmain_desktop.dartapp.dart
main.dart
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.dartHello 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
hover init github.com/my-organization/myapp

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

步骤四:运行与打包

hover runSocks5Socks5Http代理
desktopassets
hover buildexedesktop\build\outputs\windows

还存在的问题

main_desktop.dartgo-flutter-desktop
欢迎关注我的公众号:编程之路从0到1

编程之路从0到1