如何使用 Flutter 创建桌面应用程序【Flutter 专题 1】

引言

开发人员可以选择编写多种类型的应用程序：控制台应用程序、移动应用程序、Web 应用程序和桌面应用程序。

桌面应用程序在具有各种 UI 元素的系统窗口内运行。如果您要制作桌面应用程序，有多种不同的框架、UI 工具包和编程语言可供选择。

有两种类型的桌面应用程序开发 API：特定于平台的和跨平台的。特定于平台的 API 仅支持一种目标操作系统。例如，Cocoa API 提供了用于为 macOS 平台开发桌面应用程序的接口。另一方面，跨平台 API 允许开发人员使用单个通用 API 为多个操作系统制作桌面应用程序。

如今，跨平台开发框架流行的原因如下：

• 开发人员可以为多个平台维护一个单一的代码库，因为跨平台框架的 API 为特定于平台的 API 提供了很好的抽象
  
• 快速功能交付，意味着无需通过编写特定于平台的代码为不同的操作系统实现相同的功能，因此可以有效地交付新功能
  

在本文中，我将解释如何使用 Flutter 创建、构建和发布原生跨平台桌面应用程序。我们还将讨论 Flutter 受欢迎的原因。

什么是 Flutter？

Flutter 是一个跨平台的应用程序开发框架，我们可以使用它为多个平台构建本地编译的应用程序：移动、桌面和 Web。

已知支持的输出目标是 Android、iOS、HTML、HTML Canvas、Linux、Windows、macOS 和 Fushia。Flutter 使用 Dart 作为应用程序开发语言。

Flutter 目前更专注于移动应用程序开发，但也支持基于桌面的目标。

该框架带有自己的小部件工具包。当特定的 Flutter 应用程序启动时，Flutter 将通过Skia 图形库呈现应用程序的 UI 控件。

为什么 Flutter 如此受欢迎？

在跨平台框架开发领域，最关键的问题是如何放置所有平台的抽象层。换句话说，如何为开发人员提供通用 API 而不会给应用程序带来性能问题。

Electron 等桌面应用程序开发框架引入了用于渲染的 Web 浏览器。Apache Cordova 和 Ionic 移动应用程序开发框架以同样的方式解决了这个问题。尽管这些框架为开发人员提供了简单的跨平台 API，但由于基于 Web 浏览器的渲染，仍存在严重的性能问题。

Flutter 通过 Dart 库提供简单的跨平台 API，同时还保持卓越的性能。

使用 Flutter 开发桌面应用程序

在本教程中，我将展示如何使用 Flutter 制作一个简单的跨平台桌面应用程序。

搭建 Flutter 开发环境

安装 Flutter 是小菜一碟，因为它就是输入一些终端命令。

具体看我前面的文章介绍

之后，我们需要启用桌面开发模式：

flutter config --enable-<platform>-desktop// <平台> = linux、windows、macos

复制代码

如果启用了桌面模式，该flutter devices命令应列出您当前的操作系统。

创建一个新的 Flutter 应用

像任何其他典型的 CLI 一样，我们可以使用create如下所示的命令创建一个新应用程序：

flutter create desktop-app

复制代码

上面的命令将为我们搭建一个简单的入门项目。入门项目包含最少的代码和注释，以帮助我们了解 Flutter 的工作原理。

该lib/main.dart文件包含应用程序的主要源代码。让我们修改如下所示的主要源代码以创建一个简单的“Hello World”应用程序：

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextPad',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        body: Center(
          child: Text('Hello World')
        ),
      ),
    );
  }
}

复制代码

编辑源文件后，输入以下命令来运行您的应用程序：

flutter run -d <platform>
// <platform> = linux, windows, macos

复制代码

上述命令将在原生窗口中打开 Flutter “Hello World” 应用程序。本机窗口将根据当前操作系统和系统主题配置进行样式设置。

调试 Flutter 应用

Flutter 开发环境支持热重载功能。因此，我们可以r在您输入flutter run命令的控制台中按键来触发热重载。当应用程序在调试模式下运行时，尝试更改文本小部件的内容。

实现跨平台桌面应用程序

让我们用 Flutter 实现一个小的跨平台桌面应用程序。我们将制作一个名为“TextPad”的小型文本编辑器应用程序。TextPad 有一个大的多行文本字段，我们可以在其中输入我们的笔记。它还有一个操作按钮，可以将当前笔记保存到文件中。TextPad 的屏幕截图如下所示。

如上所述，右上角的保存按钮会将当前笔记写入文本文件。保存文件后，TextPad 将显示有关任务完成的通知消息。

与之前的 Hello-World 应用程序类似，将以下源代码添加到主应用程序源文件中：

import 'dart:io';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    final textController = new TextEditingController();
    final globalKey = GlobalKey<ScaffoldState>();
    final String fileName = 'textPadNote.txt';
     Future<void> _exportToFile(BuildContext context) async {
       final File file = File('${Directory.current.absolute.path}/${fileName}');
       final snackBar = SnackBar(content: Text('Saved to: ${file.path}'));
       await file.writeAsString(textController.text);
       globalKey.currentState.showSnackBar(snackBar);
    }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextPad',
      theme: ThemeData(
                brightness: Brightness.dark,
           ),
      home: Scaffold(
        key: globalKey,
        appBar: AppBar(
          title: Text('TextPad'),
          actions: <Widget>[
              IconButton(
                    icon: const Icon(Icons.save),
                    tooltip: 'Export to ${fileName}',
                    onPressed: () {_exportToFile(context);}
                  )]
        ),
        body: Center(
          child: TextField(
                controller: textController,
                maxLines: null,
                keyboardType: TextInputType.multiline,
                expands: true,
                  decoration: InputDecoration(
    hintText: 'Play with your notes here...',
    contentPadding: EdgeInsets.all(12.0)
  ),
          ),
        ),
      ),
    );
  }
}

复制代码

使用可移植的二进制文件构建您的 Flutter 桌面应用程序

在将您的应用程序发布到 Internet 之前，您可以构建 Flutter 应用程序以获取可移植的二进制文件。这些二进制文件也可以与用户或测试人员共享。此外，您可以使用自己喜欢的安装程序工具制作可安装的二进制文件。

当我们调试应用程序时，将创建可调试的二进制文件。但是，可调试的二进制文件并未针对某个版本进行优化。在终端上执行以下命令来制作优化的二进制文件：

$ flutter build <platform>// <platform> = linux, windows, macos

复制代码

如何发布您的应用程序

发布 Flutter 应用程序有多种方式，但部署方式取决于操作系统的类型。例如，如果您要为 Linux 用户发布您的应用程序，您可以将您的 Flutter 应用程序部署到Snapcraft软件商店。

如果需要为 Windows 用户部署应用程序，可以借助第三方工具制作 Windows 安装程序包 (MSI) 或新的 Windows 应用程序包 (MSIX)。

或者我在这儿给大家提供一种方法：

flutter 应用发布 windows 版

我们希望你完成迁移后尽快将其发布，可以作为预览版：

参考文章：https://dart.cn/null-safety/migration-guide

迁移桌面 flutter config --enable-<platform>-desktop

1.为现有的 Flutter 应用程序添加桌面支持

要将桌面支持添加到现有 Flutter 项目，请从项目根目录在终端中运行以下命令：

$ flutter create --platforms=windows,macos,linux .

复制代码

这会将必要的桌面文件和目录添加到您现有的 Flutter 项目中。要仅添加特定桌面平台，请将platforms列表更改为仅包含您要添加的平台。

可以看到 build 目录下已经有 windows

注意，你的电脑必须下载 vs

下面我给出下载链接：

https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community&rel=16

2..创建 main_desktop.dart 文件

比如我的 main.dart 文件是这样的

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:outlook/constants.dart';
import 'package:outlook/screens/main/main_screen.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter blog',
      theme: ThemeData(),
      home: MainScreen(),
    );
  }
}

复制代码

那么我的 main_desktop.dart 文件就是这样的

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:outlook/constants.dart';
import 'package:outlook/screens/main/main_screen.dart';
void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;//这句话很关键
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter blog',
      theme: ThemeData(),
      home: MainScreen(),
    );
  }
}

复制代码

flutter 和 go 都是 google 出品，如何安装做一下不做介绍

3.hover 安装和环境配置

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

稍等会 hover 就会出现在 go 语言的 SDK 下面的 bin 文件夹下

你又会发现报错：**exec: "gcc": executable file not found in %PATH%**这是缺少一个环境变量，别急，补上去，https://sourceforge.net/projects/mingw-w64/files/mingw-w64/

安装过程会下载很多东西，都到这一步了，不要放弃，接下来配置环境变量

C:\Program Files (x86)\mingw-w64\i686-6.2.0-posix-sjlj-rt_v5-rev1\mingw32\bin

4.初始化，并打包

接下来，我们到你的 flutter 项目的目录下面

hover init github.com/my-organization/flutter_bloc_super #前面的地址固定，后面写你项目的名字

复制代码

就会出现一个 go 文件夹

生成这个文件之后再执行，

hover run

最后一步大功告成

变身！！！！！如图的路径就是打包后生成的 exe 文件，双击执行，就好了。

坑 1

如果报错 goland 编译报错 cc1.exe: sorry, unimplemented: 64-bit mode not compiled in

主要原因是本地的 cc1.exe 版本不是 64 位的，在 64 位环境下无法编译

请下载这个、https://sourceforge.net/projects/mingw-w64/

结论

如今，Electron 在桌面应用程序开发中非常流行，因为它允许开发人员使用 Web 技术制作桌面应用程序。然而，由于高物理资源使用率，Electron 应用程序经常成为膨胀软件。Flutter 的性能比 Electron 好，因为它不在 Web 浏览器上执行应用程序的 GUI 逻辑。

Flutter 确实给开发者带来了一些痛点。它带有一种陌生的编程语言和一个全新的小部件工具包。

Flutter 的初始阶段以其令人印象深刻的整体性能和功能给大家留下了深刻的印象。我相信 Flutter 桌面很快就会与 Electron 竞争！

大家喜欢的话，可以关注我，我们一起加油！这篇文章带领大家简单的使用 flutter 创建了第一个桌面，也希望大家看完这篇文章能喜欢 flutter，并尝试用 flutter 制作自己的第一个桌面应用，谢谢大家，我们下期再见！