MENU
現役エンジニアが教えない、挫折と苦悩のアプリ開発
  1. ホーム
  2. Flutter
  3. Flutterでデスクトップアプリ

Flutterでデスクトップアプリ

Flutter
目次

Flutterでデスクトップアプリは作れる?

答え: YES! 完全に可能です! ✅
Flutter は以下のプラットフォームに対応:

  • 📱 Android✅ 安定版
  • 📱 iOS✅ 安定版
  • 🌐 Web✅ 安定版
  • 💻 Windows✅ 安定版（Flutter 2.10+）
  • 💻 macOS✅ 安定版（Flutter 2.10+）
  • 💻 Linux✅ 安定版（Flutter 2.10+）

つまり、1つのコードで6つのプラットフォームに対応!

スマホアプリとデスクトップアプリの違い

1）画面サイズ

📱 スマホ
┌─────────┐
│         │ 幅: 360-400px
│         │ 高さ: 700-900px
│         │
│         │
└─────────┘

💻 デスクトップ
┌──────────────────────────────┐
│                              │ 幅: 1200-1920px
│                              │ 高さ: 800-1080px
│                              │
│                              │
└──────────────────────────────┘

結果:

スマホ: 縦長、1カラム
デスクトップ: 横長、複数カラム可能

2）入力方法

スマホ:

👆 タッチ
⌨️ ソフトキーボード
🤏 ピンチ・スワイプ

デスクトップ:

🖱️ マウス
⌨️ 物理キーボード
🖱️ ホイール・クリック

3）UI/UX の違い

スマホ:

  • ボタンは大きく
  • 1画面1タスク
  • 下部にナビゲーション

デスクトップ:

  • ボタンは小さくてOK
  • 複数タスク同時表示
  • サイドバーやメニューバー

4）ファイルアクセス

スマホ:

  • サンドボックス化
  • 権限が必要
  • ファイルピッカー必須

デスクトップ:

  • ファイルシステムに直接アクセス
  • ドラッグ&ドロップ
  • ファイルブラウザー

デスクトップだからできること

1、大画面を活かしたレイアウト

// スマホ: 縦1列
Column(
  children: [
    StudentList(),
    PaymentDetail(),
  ],
)

// デスクトップ: 横並び
Row(
  children: [
    Expanded(
      flex: 2,
      child: StudentList(),  // 左側
    ),
    Expanded(
      flex: 3,
      child: PaymentDetail(),  // 右側
    ),
  ],
)

2、キーボードショートカット

// Ctrl+S で保存
FocusScope(
  child: Shortcuts(
    shortcuts: {
      LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyS): 
          SaveIntent(),
    },
    child: Actions(
      actions: {
        SaveIntent: CallbackAction<SaveIntent>(
          onInvoke: (intent) => _saveData(),
        ),
      },
      child: MyApp(),
    ),
  ),
)

お馴染みの便利なショートカット:

Ctrl+S: 保存
Ctrl+N: 新規作成
Ctrl+F: 検索
Ctrl+P: 印刷

3、ファイル操作

import 'package:file_picker/file_picker.dart';

// ファイルを選択
Future<void> pickFile() async {
  FilePickerResult? result = await FilePicker.platform.pickFiles(
    type: FileType.custom,
    allowedExtensions: ['xlsx', 'csv'],
  );
  
  if (result != null) {
    File file = File(result.files.single.path!);
    // ファイルを読み込む
  }
}

// ファイルを保存
Future<void> saveFile() async {
  String? outputPath = await FilePicker.platform.saveFile(
    dialogTitle: 'Excelファイルを保存',
    fileName: '売上記録_2026年1月.xlsx',
  );
  
  if (outputPath != null) {
    // ファイルを保存
  }
}

4、複数ウィンドウ

import 'package:desktop_window/desktop_window.dart';

// ウィンドウサイズを設定
await DesktopWindow.setWindowSize(Size(1200, 800));

// ウィンドウタイトルを設定
await DesktopWindow.setWindowTitle('月謝袋アプリ - SINQWELL');

// 最小サイズを設定
await DesktopWindow.setMinWindowSize(Size(800, 600));

5、印刷機能

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:printing/printing.dart';

Future<void> printReceipt(Student student) async {
  final pdf = pw.Document();
  
  pdf.addPage(
    pw.Page(
      build: (context) => pw.Column(
        children: [
          pw.Text('領収書', style: pw.TextStyle(fontSize: 24)),
          pw.SizedBox(height: 20),
          pw.Text('金額: ¥${student.fee}'),
          pw.Text('日付: ${DateTime.now().toString().split(' ')[0]}'),
        ],
      ),
    ),
  );
  
  await Printing.layoutPdf(
    onLayout: (format) async => pdf.save(),
  );
}

6、ドラッグ&ドロップ

import 'package:desktop_drop/desktop_drop.dart';

DropTarget(
  onDragDone: (details) {
    for (var file in details.files) {
      print('ドロップされたファイル: ${file.path}');
      // ファイルを処理
    }
  },
  child: Container(
    width: 300,
    height: 200,
    color: Colors.grey[200],
    child: Center(
      child: Text('ここにファイルをドロップ'),
    ),
  ),
)

アプリをデスクトップ化のメリット

大画面で見やすい

  • 生徒リスト + 詳細を同時表示
  • 複数月を並べて比較

データ入力が楽

  • 物理キーボードで速い
  • Tabキーで項目移動

データ管理が簡単

  • Excelファイルに一括エクスポート
  • バックアップが簡単

印刷機能

  • 領収書を印刷
  • 月次レポートを印刷

1つのコードで両対応!

class TuitionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LayoutBuilder(
        builder: (context, constraints) {
          // ========================================
          // 画面幅で判定
          // ========================================
          if (constraints.maxWidth > 800) {
            // デスクトップレイアウト
            return DesktopLayout();
          } else {
            // モバイルレイアウト
            return MobileLayout();
          }
        },
      ),
    );
  }
}

// または、Platformで判定
import 'dart:io' show Platform;

bool get isDesktop {
  return Platform.isWindows || Platform.isMacOS || Platform.isLinux;
}

bool get isMobile {
  return Platform.isAndroid || Platform.isIOS;
}

デスクトップアプリの作り方

ステップ1: デスクトップサポートを有効化

# Windows をサポート
flutter config --enable-windows-desktop

# macOS をサポート
flutter config --enable-macos-desktop

# Linux をサポート
flutter config --enable-linux-desktop

# 確認
flutter devices

ステップ2: プロジェクトにデスクトップを追加

# 既存のプロジェクトに追加
flutter create --platforms=windows,macos,linux .

# または新規プロジェクト作成時
flutter create --platforms=android,ios,windows,macos,linux my_app
```

**フォルダ構成:**
```
my_app/
  ├─ android/      ← Android用
  ├─ ios/          ← iOS用
  ├─ windows/      ← Windows用 (新規)
  ├─ macos/        ← macOS用 (新規)
  ├─ linux/        ← Linux用 (新規)
  └─ lib/          ← 共通コード

ステップ3: 実行・ビルド

# Windows で実行
flutter run -d windows

# macOS で実行
flutter run -d macos

# リリースビルド
flutter build windows
flutter build macos
flutter build linux

デスクトップで便利なパッケージ

window_manager – ウィンドウ管理

dependencies:
  window_manager: ^0.3.0
import 'package:window_manager/window_manager.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await windowManager.ensureInitialized();
  
  WindowOptions windowOptions = WindowOptions(
    size: Size(1200, 800),
    center: true,
    backgroundColor: Colors.transparent,
    skipTaskbar: false,
    titleBarStyle: TitleBarStyle.normal,
    title: '売上管理アプリ',
  );
  
  windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.show();
    await windowManager.focus();
  });
  
  runApp(MyApp());
}

file_picker – ファイル選択

dependencies:
  file_picker: ^6.0.0
// ファイルを開く
FilePickerResult? result = await FilePicker.platform.pickFiles();

// 複数ファイル
FilePickerResult? result = await FilePicker.platform.pickFiles(
  allowMultiple: true,
);

// 特定の拡張子のみ
FilePickerResult? result = await FilePicker.platform.pickFiles(
  type: FileType.custom,
  allowedExtensions: ['xlsx', 'csv'],
);

printing – 印刷機能

dependencies:
  printing: ^5.11.0
  pdf: ^3.10.0

desktop_drop – ドラッグ&ドロップ

dependencies:
  desktop_drop: ^0.4.0

デスクトップアプリの配布

Windows:


方法1: 単純配布

  • build/windows/runner/Release/ フォルダをZIPで圧縮
  • ユーザーに配布

方法2: インストーラー作成

# Inno Setup を使う
# https://jrsoftware.org/isinfo.php

macOS:

flutter build macos --release

# .app ファイルができる
build/macos/Build/Products/Release/tuition_app.app

# DMGファイルを作成
# create-dmg などのツールを使用

まとめ: Flutterでデスクトップアプリ

Flutterでデスクトップアプリは完全に可能!
1つのコードでスマホ+デスクトップ対応

スマホとの違い:

画面小さい大きい
入力タッチマウス+キーボード
レイアウト縦1列複数カラム
ファイル制限あり自由
印刷難しい簡単

デスクトップならでは:
🎯 大画面レイアウト
🎯 キーボードショートカット
🎯 ファイル操作
🎯 印刷機能
🎯 ドラッグ&ドロップ
🎯 複数ウィンドウ

Flutterでデスクトップアプリは完全に可能!
Windows/macOS/Linux対応。
1つのコードで6つのプラットフォームに展開。
Excelエクスポート・印刷・大画面が活かせる!
flutter create –platforms=windows . で既存アプリもデスクトップ化できる! 💻✨

Flutter
目次