如何使用 Flutter 创建桌面应用程序[Flutter专题7]

如何使用 Flutter 创建桌面应用程序

介绍

开发人员可以选择编写多种类型的应用程序：控制台应用程序、移动应用程序、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 设备命令的屏幕截图

Flutter 设备命令的屏幕截图

创建一个新的 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“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 上，也就是打包成exe可执行文件。

结论

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

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

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