Flutter 桌面应用入门

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

Flutter以其跨平台和高性能的应用程序而闻名，这些应用程序可以在移动、Web、桌面和嵌入式设备上进行本地编译。Flutter 的桌面支持在相当长的一段时间内处于试验阶段，但是现在你可以在 Flutter 的稳定分支上使用。

在本文中，您将学习设置 Flutter SDK 以在不同的桌面操作系统上构建应用程序，创建简单的桌面应用程序，

在开始之前，请确保满足以下先决条件。

构建 Flutter 桌面应用的先决条件

首先，您应该具备以下条件：

在您的系统上配置的Flutter SDK 。
支持 Flutter、Android Studio、IntelliJ IDEA或VS Code的 IDE 。

要获得稳定频道上的 Flutter 桌面支持，您应该拥有Flutter 2.5或更高版本。

您可以通过运行以下命令检查您的 Flutter 版本

flutter --version

为 macOS 应用程序配置 Flutter

要构建 macOS 应用程序，您应该在系统上安装xcode

如果您运行flutter devices，您应该会看到macos列为可用设备之一：

创建一个新的 Flutter 应用

启用要为其构建应用程序的平台后，您只需运行flutter create命令即可生成具有桌面支持的新项目。

使用命令行，运行以下命令

flutter create <project_name>

替换<project name>为您要用于项目的名称，例如flutter create flutter_desktop_sample.

现在，使用您喜欢的 IDE 打开项目。

使用 IDE 打开项目后，查看项目中存在的目录。您会注意到，除了android、ios和之外web，您还有一个名为macos、linux或的目录windows（取决于您启用的桌面平台）。

macOS 目录

向预先存在的 Flutter 应用程序添加桌面支持

如果您有一个在启用任何桌面平台标志之前创建的现有 Flutter 项目，则默认情况下它不支持桌面。但是您可以轻松地为这些项目添加桌面支持。为此，首先通过运行以下任一命令启用您要支持的平台：

flutter config --enable-macos-desktop
flutter config --enable-linux-desktop
flutter config --enable-windows-desktop
flutter config --enable-windows-uwp-desktop

然后运行：

flutter create .

这会将新的桌面平台目录添加到您现有的项目中，以便您可以为其构建。

如果您只想添加特定的桌面平台，请使用以下命令：

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

在桌面上运行 Flutter 应用

您可以使用 IDE 或从命令行运行 Flutter 应用程序。从您的 IDE 中，选择要在其上运行应用程序的桌面平台，然后启动它。

使用命令行，您可以使用以下命令在桌面上启动应用程序。

在 macOS 上运行

在macOS平台上运行应用程序：

flutter run -d macos

Flutter 运行 - macOS

在 Linux 上运行

在Linux平台上运行应用程序：

flutter run -d linux

Flutter 运行——Linux

在 Windows 上运行

使用 Win32在Windows平台上运行应用程序：

flutter run -d windows

Flutter 运行 - Windows

要使用UWP运行应用程序，请从命令行使用以下命令：

flutter run -d winuwp

Windows UWP 应用需要沙盒环境才能运行。以管理员模式打开 PowerShell，然后运行以下命令：

checknetisolation loopbackexempt -is -n=[APP_CONTAINER_NAME]

返回上一个命令行并按“ Y ”。现在，您将使用 Windows UWP 运行 Flutter 应用程序。

为桌面应用程序构建布局

与移动应用程序的布局相比，桌面应用程序的布局可能有点难以构建。如果您希望您的 Flutter 应用程序感觉像一个原生桌面应用程序，那么您应该牢记一些重要的点。

响应式布局

由于桌面应用程序可以调整大小，因此您应该尝试使用响应式布局，以便小部件适应每个屏幕尺寸。如果您正确实现了响应式布局，它应该可以防止在您的应用中调整屏幕大小时出现任何溢出问题。

在本文中，我们不会介绍构建响应式布局的概念。

限制窗口大小

尝试缩小使用 Flutter 创建的默认桌面应用程序的窗口大小。您会注意到该应用程序没有最小窗口大小，即可以将窗口压缩到您想要的任意小。

即可以将窗口压缩到您想要的任意小。

Flutter macOS 应用程序

这将导致当前布局内的小部件被挤压，从而导致溢出错误：

颤振溢出错误

如果您将其与本机桌面应用程序进行比较，您会注意到有一个最小屏幕宽度和高度，超出该范围您无法缩小窗口。例如，下面的演示展示了当您尝试缩小 macOS 应用程序窗口时会发生什么：

为了解决这个问题，您可以使用desktop_window，因此将其添加到您的pubspec.yaml文件中，如下所示：

flutter pub add desktop_window

dependencies:
  desktop_window: ^0.4.0

然后进行对应的设置

Flutter 屏幕尺寸限制

工具提示可见性

默认情况下，当您将鼠标悬停在应用程序内的可点击小部件上时，在桌面上运行的 Flutter 应用程序会显示一个工具提示。通常，工具提示是一种辅助功能，在大多数本机桌面应用程序上都没有启用（或者仅在您将鼠标悬停在某个组件上较长时间后才会出现）。

工具提示启用

在桌面上运行的 Flutter 应用程序上一直弹出工具提示可能非常烦人。幸运的是，有一种方法可以禁用 Flutter 中的工具提示。

MaterialApp您可以使用小部件包装整个内容，TooltipVisibility并将可见性设置为false禁用应用程序中所有小部件的工具提示。

TooltipVisibility(
  visible: false, // disables tooltip
  child: MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: const MyHomePage(),
  ),
)

工具提示禁用

键盘输入

如果你想在 Flutter 桌面应用中使用键盘快捷键，有两种方法：

使用RawKeyboardListener小部件
使用FocusableActionDetector小部件

RawKeyboardListener小部件的最大限制是它只能监听键盘上单个键的按下和按下事件。 这意味着您将无法使用组合键来触发任何功能。

处理键盘输入的更优雅的方法是使用FocusableActionDetector小部件。使用此小部件，您还可以轻松处理组合键（一次最多四个键）。

让我们看看如何在 Flutter 的入门应用（计数器应用）中实现键绑定。

修改后的计数器应用程序

我通过添加第二个减少计数器值的按钮对计数器应用程序进行了小修改。

首先，定义要用于递增和递减计数器值的组合键。全局定义以下变量：

final incrementKeys = LogicalKeySet(
  Platform.isMacOS ? LogicalKeyboardKey.meta : LogicalKeyboardKey.control,
  LogicalKeyboardKey.equal,
);

final decrementKeys = LogicalKeySet(
  Platform.isMacOS ? LogicalKeyboardKey.meta : LogicalKeyboardKey.control,
  LogicalKeyboardKey.minus,
);

这里，meta实际上是commandmacOS 上的关键。当它在 Windows 或 Linux 上运行时，将control使用密钥代替它。

在 macOS 上，上述键盘组合键指的是以下内容：

接下来，定义两个 Intent：

class IncrementIntent extends Intent {}

class DecrementIntent extends Intent {}

在 Flutter 中，Intent是一个绑定到Action的对象，它有助于根据键盘组合键触发更新应用程序的状态。

你必须为这些 Intent(s) 配置一个监听器：

class KeyBinding extends StatelessWidget {
  const KeyBinding({
    Key? key,
    required this.child,
    required this.onIncrementTriggered,
    required this.onDecrementTriggered,
  }) : super(key: key);

  final Widget child;
  final VoidCallback? onIncrementTriggered;
  final VoidCallback? onDecrementTriggered;

  @override
  Widget build(BuildContext context) {
    return FocusableActionDetector(
      autofocus: true,
      shortcuts: {
        incrementKeys: IncrementIntent(),
        decrementKeys: DecrementIntent(),
      },
      actions: {
        IncrementIntent: CallbackAction(
          onInvoke: (e) => onIncrementTriggered?.call(),
        ),
        DecrementIntent: CallbackAction(
          onInvoke: (e) => onDecrementTriggered?.call(),
        ),
      },
      child: child,
    );
  }
}

在上面的类中，有两个基于组合键触发的回调，FocusableActionDetector小部件有助于相应地更新应用程序状态。

现在，您可以Scaffold使用小部件包装计数器应用程序屏幕KeyBinding：

KeyBinding(
  onIncrementTriggered: _incrementCounter,
  onDecrementTriggered: _decrementCounter,
  child: Scaffold(
    appBar: AppBar(
        title: Text(widget.title),
    ),
    body: Center(),
  ),
)

在 Codemagic 上构建的配置

可以使用Workflow Editor或codemagic.yaml文件在 Codemagic 上构建 Flutter 应用程序。Codemagic 目前支持为macOS、Linux和Windows平台构建 Flutter 桌面应用程序。

在开始构建配置之前，请将您的项目添加到 Codemagic。

添加新项目

您的项目应该存在于使用版本控制系统的代码托管平台如GitHub上

请按照以下步骤添加您的项目：

登录到Codemagic。如果您是新用户，请注册：

在应用程序页面上，单击添加应用程序：
选择您要使用的Git 提供程序（如果您要使用存储库的克隆 URL 添加，请选择其他）：
单击下一步：授权集成以授权 Codemagic。如果您已经授权您选择的 Git 提供程序，请单击下一步：选择存储库。

如果您使用GitHub作为您的 Git 提供程序，那么在选择存储库之前还需要执行一个额外步骤：单击安装 GitHub 应用程序以设置集成。在此处了解有关配置 GitHub 应用程序集成的更多信息。
现在，选择您的存储库（如果使用其他，则添加克隆 URL）和项目类型。然后，单击完成：添加应用程序：
您将被带到项目设置。工作流编辑器选项卡将默认选中。

使用工作流编辑器进行配置

Codemagic默认选择Android和iOS平台。 要为 macOS 或 Linux 平台构建应用程序，您必须选择相应的选项。您还需要相应地更改 VM，因为 macOS 应用程序只能使用 macOS 和 Linux 应用程序使用 Linux 构建。

为 Linux 平台构建：

在Build for platform下选择Linux。
将 VM 实例更改为Linux Standard VM或Linux Premium VM。
转到构建选项卡。从这里，您可以设置Flutter 版本和 Linux 应用构建模式（如Debug、Release或Profile）。
如果您想构建应用程序以发布到Snap Store ，请按照此处的步骤操作。

为 macOS 平台构建：

在Build for platforms下选择macOS。
将 VM 实例更改为macOS Standard VM或macOS Premium VM。
转到构建选项卡。从这里，您可以设置Flutter、Xcode和CocoaPods 版本。指定 macOS 应用程序构建模式（如Debug、Release或Profile）。

在此处了解有关为 macOS 应用程序生成发布版本并将其发布到 Mac App Store 的更多信息。

使用 Codemagic YAML 进行配置

codemagic.yaml或者，您可以使用该文件在 Codemagic 上构建您的桌面应用程序。请按照以下步骤操作：

在 Codemagic 上，单击切换到 YAML 配置以使用 YAML 文件。
codemagic.yaml返回到您的 Flutter 项目，并在项目的根目录中创建一个名为的新文件。

将以下模板添加到文件中：

workflows:
  my-workflow:
    name: Workflow name
    instance_type: mac_mini
    max_build_duration: 60
    environment:
      groups:
        - ...
      flutter: stable
    cache:
      cache_paths:
        - ~/.pub-cache
    scripts:
      - ...
    artifacts:
      - ...
    publishing:
      email:
        recipients:
          - name@example.com

这是在 Codemagic 上构建应用程序的基本工作流模板。查看文档以获取更多信息。

以下是如何修改工作流模板以构建适用于Linux平台的 Flutter 应用程序：

设置适当的工作流名称，并定义 Linux VM 实例：

workflows:
  linux-workflow:
    name: Linux workflow
    instance_type: linux
    max_build_duration: 60

将 Flutter 版本设置为master下environment：
```
environment:
  flutter: master
```

在该scripts部分下，首先获取 Flutter 依赖项：

scripts:
  - name: Get Flutter packages
    script: flutter packages pub get

启用 Linux 平台：

- name: Configure for Linux
  script: |
        flutter config --enable-linux-desktop

为 Linux 平台构建：

- name: Build Linux
  script: flutter build linux

导出生成的 Linux 构建工件：

- name: Export bundle
  script: cp -r build/linux/x64/release/bundle $CM_EXPORT_DIR/bundle

使用它们的路径检索生成的工件：

artifacts:
  - build/linux/**/*.zip
  - flutter_drive.log

按照以下步骤修改工作流模板以构建适用于macOS平台的 Flutter 应用：

设置适当的工作流名称，并定义一个 macOS VM 实例：

workflows:
  macos-workflow:
    name: macOS workflow
    instance_type: mac_mini
    max_build_duration: 60

在以下位置设置 Flutter、Xcode 和 CocoaPods 版本environment：

environment:
  flutter: master
  xcode: latest
  cocoapods: default

在该scripts部分下，首先获取 Flutter 依赖项：

scripts:
  - name: Get Flutter packages
    script: flutter packages pub get

启用 macOS 平台，并安装 Podfile：

- name: Configure for macOS
  script: |
    flutter config --enable-macos-desktop
    find . -name "Podfile" -execdir pod install ;

初始化钥匙串：

- name: Set up keychain
  script: keychain initialize

要执行代码签名过程，您必须将 API 密钥和一些相关的机密文件作为环境变量添加到 Codemagic。转到Codemagic 上项目的环境变量选项卡。

为自动代码签名添加以下变量：
- APP_STORE_CONNECT_KEY_IDENTIFIER
- APP_STORE_CONNECT_ISSUER_ID
- APP_STORE_CONNECT_PRIVATE_KEY
- CERTIFICATE_PRIVATE_KEY
为手动代码签名添加以下变量：
- CM_CERTIFICATE
- CM_CERTIFICATE_PASSWORD
- CM_PROVISIONING_PROFILE
要了解有关如何生成这些变量的更多信息，请访问此处的文档。

在 YAML 文件中添加环境变量组名称：

environment:
  groups:
    - macos-signing

对于自动代码签名，添加以下脚本：

- name: Fetch Mac App Distribution certificate and Mac App Store profile
  script: |
    app-store-connect fetch-signing-files \
      "io.codemagic.app" \
      --platform MAC_OS \
      --type MAC_APP_STORE \
      --create          
- name: Fetch Mac Installer Distribution certificates
  script: |
    app-store-connect create-certificate --type MAC_INSTALLER_DISTRIBUTION --save || \
      app-store-connect list-certificates --type MAC_INSTALLER_DISTRIBUTION --save          
- name: Set up signing certificate
  script: keychain add-certificates

对于手动代码签名，添加以下内容：

- name: Set up provisioning profile
  script: |
    PROFILES_HOME="$HOME/Library/MobileDevice/Provisioning Profiles"
    mkdir -p "$PROFILES_HOME"
    PROFILE_PATH="$(mktemp "$PROFILES_HOME"/$(uuidgen).mobileprovision)"
    echo ${CM_PROVISIONING_PROFILE} | base64 --decode > "$PROFILE_PATH"
    echo "Saved provisioning profile $PROFILE_PATH"              
- name: Set up signing certificate
  script: |
    echo $CM_CERTIFICATE | base64 --decode > /tmp/certificate.p12
    if [ -z ${CM_CERTIFICATE_PASSWORD+x} ]; then
      # when using a certificate that is not password-protected
      keychain add-certificates --certificate /tmp/certificate.p12
    else
      # when using a password-protected certificate
      keychain add-certificates --certificate /tmp/certificate.p12 --certificate-password $CM_CERTIFICATE_PASSWORD
    fi

使用项目的代码签名：

- name: Set up code signing
  script: xcode-project use-profiles

构建 macOS 应用程序：

- name: Build macOS
  script: flutter build macos

使用它们的路径检索生成的构建工件：

artifacts:
  - build/macos/**/*.app
  - flutter_drive.log

开始在 Codemagic 上构建

要开始您的第一个构建：

从Codemagic 上的应用程序仪表板转到您的项目。
单击开始新构建。
选择正确的工作流程，然后单击Start new build。

这将根据您的选择使用工作流编辑器或codemagic.yaml文件配置启动新构建。构建完成后，您将可以访问生成的工件。

恭喜

恭喜！您已经成功地在 Codemagic 上为 Linux 和 macOS 平台构建了 Flutter 应用程序。

一旦您的 Flutter 桌面应用程序准备好发布，您就可以轻松地将其直接从 Codemagic 发布到Snapcraft Snap Store（Linux 应用程序）或Mac App Store（macOS 应用程序）。从以下链接了解有关使用 Codemagic 发布应用程序的更多信息：

Linux 应用程序： Snapcraft Snap Store（工作流编辑器或Codemagic YAML）
macOS 应用程序： App Store Connect（工作流编辑器或Codemagic YAML）