FlutterFlow

FlutterFlowでデスクトップアプリを作る手順【2025年版】

ⓘ本ページはプロモーションが含まれています

スポンサードリンク

はじめに – 本ガイドの目的と対象読者

FlutterFlow はノーコードで UI を構築し、生成された Flutter コードをローカルでビルドできるプラットフォームです。本稿では Windows・macOS・Linux 向けデスクトップアプリ を「設計 → エクスポート → ローカルビルド → 配布」まで一連の流れで完結させる手順を解説します。

対象は、FlutterFlow の基本操作はすでに把握しているがデスクトップ向けの出力方法が分からないエンジニア・プロダクトマネージャーです。この記事通りに進めれば、コードを書かずに UI とロジックを完成させ、CI/CD で自動ビルドまで実装できます。

前提条件 – アカウント作成とプランの確認

FlutterFlow のデスクトップビルドは 有料プラン（Pro または Team） が必要です。無料プランでも UI デザインは可能ですが、コードエクスポートやローカルでのビルドは制限されます。

プラン 月額 (USD) デスクトップビルド可否
Free 0 ×（Web・モバイルのみ）
Pro 39 ○（Windows、macOS、Linux）
Team 79 ○（全 OS・無制限ビルド）

*最新のプラン情報は FlutterFlow の公式ページ（https://docs.flutterflow.io/plan‑details）をご確認ください。

ポイント：デスクトップターゲットを有効にするには、まず Pro 以上へアップグレードし、プラン画面で「Desktop」オプションが表示されることを確認してください。

プロジェクト作成と Desktop ターゲットの有効化

新規プロジェクトの作り方

  1. FlutterFlow にログイン後、左上メニューの Create New Project をクリック。
  2. 「Project Name」「Primary Language」など基本情報を入力し Next。

この段階ではまだ Desktop 用設定は表示されません。次のステップで有効化します。

Desktop ターゲットをオンにする手順

  1. プロジェクト作成後、画面左側の Settings → Target Platforms を開く。
  2. 「Desktop」のスイッチを ON にし、対象 OS（Windows / macOS / Linux）をチェック。

Pro/Team プランに加入していないと Desktop の項目自体が非表示になります。

各 OS のビルド仕様（簡易概要）

  • Windows：64‑bit (x86_64) バイナリが生成されます。
  • macOS：Intel と Apple Silicon 両方に対応したユニバーサルバイナリを出力します。
  • Linux：主要ディストリビューション向けの AppImage がデフォルトです。

UI デザインとロジック実装のベストプラクティス

画面サイズとレイアウト指針

項目 推奨設定
最小幅 1024 px
最大幅 1920 px
フォント OS 標準フォント（例: Segoe UI、San Francisco）

デスクトップはマウス・キーボード操作が前提です。ホバーやショートカット用のウィジェットを適宜配置すると使い勝手が向上します。

カスタムアクションと API 連携

  • Custom Action：Actions メニューから Dart コードを直接埋め込めます。ファイル操作、ネイティブダイアログ表示などデスクトップ固有の処理に便利です。
  • REST API：FlutterFlow の「API Calls」機能で認証ヘッダーやクエリパラメータを設定し、そのまま UI から呼び出せます。環境変数はプロジェクト設定 → Environment Variables に保存すると、CI/CD でも同一の設定が利用できます。

コードエクスポートとローカルビルド手順

必要な開発ツールのインストール

  1. Flutter SDK（公式サイト https://flutter.dev）から最新版をダウンロードし、パスを通す。2024 年時点の安定版は 3.19.0 が推奨です。

  2. 推奨 IDE は VS Code または Android Studio。以下のプラグインを有効化してください。

  3. Flutter

  4. Dart
  5. (VS Code) Flutter Desktop 拡張

コードのエクスポート手順

  1. プロジェクト画面右上の Export Code ボタンをクリック。
  2. 「Include Desktop」オプションがオンになっていることを確認し、ZIP をダウンロード。
  3. ダウンロードした ZIP を解凍し、flutterflow_project/ ディレクトリに移動して flutter pub get を実行します。

各 OS のビルドコマンドとよくあるエラー対策

コマンド 説明
flutter build windows --release Windows 用 64‑bit リリースビルド
flutter build macos --release macOS ユニバーサルバイナリ
flutter build linux --release Linux AppImage 作成

エラー例と対処法

  • CMake が見つからない
  • Windows：Visual Studio 2022 の「Desktop development with C++」をインストール。

  • macOS/Linux：brew install cmake を実行。

  • Xcode コマンドラインツールが不足（macOS）
    bash
    xcode-select --install

  • 権限エラー（Linux）
    bash
    chmod +x build/linux/x64/release/bundle/*.AppImage

バイナリの署名・パッケージング

OS 主な手順
Windows WiX Toolset で MSI 作成、signtool によりデジタル署名。
macOS codesign --sign "Developer ID Application: <YourCompany>" MyApp.app → xcrun altool --notarize-app で Notarization、最後に xcrun stapler staple.
Linux appimagetool で AppImage を生成し、必要なら GPG 署名を付与。

署名はエンドユーザーのセキュリティ警告回避に必須です。特に Windows の SmartScreen と macOS の Gatekeeper が対象になります。

CI/CD による自動ビルド構築例

GitHub Actions のワークフロー（抜粋）

ポイント

  • flutter-action が自動で SDK をインストール。
  • ビルド前に必ず flutter pub get を実行して依存関係を取得。
  • 成果物は upload-artifact で保存し、リリースページや社内配布サーバーへ転送可能。

Bitrise パイプラインの構成要点

ステップ 設定例
Flutter Install flutter-installer@2.0 → バージョン 3.19.0 を指定
Cache .pub-cache と build/ ディレクトリをキャッシュ
Desktop Build カスタムスクリプトで flutter build windows/macOS/linux --release
Deploy deploy-to-bitrise-io@1 でビルド成果物（.exe/.app/.AppImage）を保存

Bitrise は macOS ビルドが必要な場合に便利です。シークレットは「Environment Variables」から安全に管理してください。

配布方法と注意点

主な配布チャネル

チャネル 必要作業 注意点
社内サーバー / S3 バイナリをアップロードし URL を共有 Windows の署名が無いと SmartScreen が警告
Web ダウンロードページ HTML にダウンロードリンク配置、CDN で高速化 ファイルサイズが大きいためキャッシュ設定が重要
Microsoft Store MSIX パッケージを作成し Partner Center に提出 アプリのプライバシーポリシーと OS バージョン要件を満たす必要あり
macOS Notarization codesign → altool で notarize、stapler で stapling 有効期限は 90 日。期限切れ前に再 notarization が必須

ビルド回数やプラグインの制限（公式情報）

  • ビルド回数：Pro プランは月間 30 回、Team は無制限です。上限を超えると次の月まで待機が必要です。
  • プラグイン利用：Community プラグインは有料プランでのみ有効化可能です。Desktop ビルドに必須なネイティブプラグインは事前にプロジェクト設定で許可してください。

まとめ

  1. プラン加入 → Pro/Team で Desktop ターゲットをオンにする。
  2. UI 設計：デスクトップ向けのサイズ・フォント・ショートカットを意識し、Custom Action で OS 固有処理を実装。
  3. コードエクスポート → ローカル環境（Flutter SDK + IDE）で flutter build … --release。
  4. ビルドエラー対策は CMake・Xcode CLI のインストール、権限設定が中心。
  5. 署名・パッケージングで各 OS の配布要件を満たす（Windows は MSI/EXE 署名、macOS は Notarization、Linux は AppImage）。
  6. CI/CD（GitHub Actions / Bitrise）で自動ビルドと成果物管理を実装し、プッシュごとに最新バイナリが生成されるようにする。
  7. 配布は社内サーバーからストア公開まで幅広く対応でき、署名・認証のチェックだけ忘れなければ完了です。

以上の手順を踏めば、FlutterFlow のノーコード環境だけで実務レベルのデスクトップアプリ開発・ビルド・配布がスムーズに行えます。公式ドキュメントは随時更新されるため、最新情報は必ず FlutterFlow のサイト（https://docs.flutterflow.io/）をご確認ください。

スポンサードリンク

-FlutterFlow