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

（取決于您啟用的桌面平台）。

向預先存在的 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

在 Linux 上運作

在Linux平台上運作應用程式：

flutter run -d linux

在 Windows 上運作

使用 Win32在Windows平台上運作應用程式：

flutter run -d windows

要使用UWP運作應用程式，請從指令行使用以下指令：

flutter run -d winuwp

Windows UWP 應用需要沙盒環境才能運作。以管理者模式打開 PowerShell，然後運作以下指令：

checknetisolation loopbackexempt -is -n=[APP_CONTAINER_NAME]

傳回上一個指令行并按“ Y ”。現在，您将使用 Windows UWP 運作 Flutter 應用程式。

為桌面應用程式建構布局

與移動應用程式的布局相比，桌面應用程式的布局可能有點難以建構。如果您希望您的 Flutter 應用程式感覺像一個原生桌面應用程式，那麼您應該牢記一些重要的點。

響應式布局

由于桌面應用程式可以調整大小，是以您應該嘗試使用響應式布局，以便小部件适應每個螢幕尺寸。如果您正确實作了響應式布局，它應該可以防止在您的應用中調整螢幕大小時出現任何溢出問題。

在本文中，我們不會介紹建構響應式布局的概念。

限制視窗大小

嘗試縮小使用 Flutter 建立的預設桌面應用程式的視窗大小。您會注意到該應用程式沒有最小視窗大小，即可以将視窗壓縮到您想要的任意小。

即可以将視窗壓縮到您想要的任意小。

這将導緻目前布局内的小部件被擠壓，進而導緻溢出錯誤：

如果您将其與本機桌面應用程式進行比較，您會注意到有一個最小螢幕寬度和高度，超出該範圍您無法縮小視窗。例如，下面的示範展示了當您嘗試縮小 macOS 應用程式視窗時會發生什麼：

為了解決這個問題，您可以使用desktop_window，是以将其添加到您的

pubspec.yaml

檔案中，如下所示：

flutter pub add desktop_window

dependencies:
  desktop_window: ^0.4.0

然後進行對應的設定

工具提示可見性

預設情況下，當您将滑鼠懸停在應用程式内的可點選小部件上時，在桌面上運作的 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 實際上是 command macOS 上的關鍵。當它在 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:
          - [email protected]

這是在 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。

恭喜

Linux 應用程式： Snapcraft Snap Store（工作流編輯器或Codemagic YAML）
macOS 應用程式： App Store Connect（工作流編輯器或Codemagic YAML）

Flutter 桌面應用入門

建構 Flutter 桌面應用的先決條件

為 macOS 應用程式配置 Flutter

建立一個新的 Flutter 應用

向預先存在的 Flutter 應用程式添加桌面支援

在桌面上運作 Flutter 應用

在 macOS 上運作

在 Linux 上運作

在 Windows 上運作

為桌面應用程式建構布局

響應式布局

限制視窗大小

工具提示可見性

鍵盤輸入

在 Codemagic 上建構的配置

添加新項目

使用工作流編輯器進行配置

使用 Codemagic YAML 進行配置

開始在 Codemagic 上建構

恭喜

繼續閱讀

web開發之前後端渲染

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Future和async(異步函數)、await(同步等待)

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

JavaScript的那些坑之事件代理事件代理事件階段

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯