👨‍💻 [Flutter] Flutter 에서 윈도우 플랫폼의 새창은 어떻게 생성하나요?

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

Flutter 에서 윈도우 플랫폼의 새창은 어떻게 생성할 수 있는지 간략히 알아보았습니다.

---

질문 >

Flutter 에서 윈도우 플랫폼의 새창은 어떻게 생성하나요?

답변 >

Flutter에서 Windows 플랫폼에서 새로운 창을 생성하려면 **dart:ffi**를 사용하여 네이티브 Windows API와 상호작용하거나, 서드파티 플러그인(예: bitsdojo_window) 같은 패키지를 사용할 수 있습니다. 현재 Flutter 자체적으로 다중 창 생성 기능을 기본 제공하지는 않지만, 네이티브 API나 플러그인을 통해 구현할 수 있습니다.

아래는 Windows에서 새로운 창을 생성하는 방법을 단계별로 설명합니다.

---

방법 1: 서드파티 패키지 활용 (추천)

1. bitsdojo_window 패키지 설치

Flutter에서 Windows 창을 다루기 위한 서드파티 플러그인을 사용합니다.

• pubspec.yaml에 패키지 추가:

dependencies:
  bitsdojo_window: ^0.1.2

• 의존성 설치:

flutter pub get

---

2. 기본 설정

• main.dart 파일 수정: 새로운 창을 생성하려면 Flutter의 Navigator를 활용하거나 특정 이벤트에 따라 창을 띄울 수 있습니다.

import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';

void main() {
  runApp(MyApp());

  // Bitsdojo Window 초기화
  doWhenWindowReady(() {
    final win = appWindow;
    win.minSize = const Size(400, 300);
    win.size = const Size(600, 450);
    win.alignment = Alignment.center;
    win.show();
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainWindow(),
    );
  }
}

class MainWindow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Main Window')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 새로운 창 생성
            showDialog(
              context: context,
              builder: (context) => NewWindow(),
            );
          },
          child: Text('Open New Window'),
        ),
      ),
    );
  }
}

class NewWindow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('New Window')),
      body: Center(
        child: Text('This is a new window!'),
      ),
    );
  }
}

• windows/runner/main.cpp 수정: 기본적으로 창 관리에 필요한 로직을 main.cpp에서 설정해야 합니다.

#include <bitsdojo_window_windows/bitsdojo_window_plugin.h>auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);

// 기존 main.cpp 내 App Entry Point 아래에 추가합니다.
bdw->start();

---

방법 2: Win32 API를 사용하여 직접 구현

1. dart:ffi로 Win32 API 접근

Flutter에서 dart:ffi를 사용하면 Win32 API 호출을 통해 새로운 창을 생성할 수 있습니다.

• win32 패키지 설치: win32 패키지는 Windows 네이티브 API를 Dart에서 쉽게 호출할 수 있도록 도와줍니다.

dependencies:
  win32: ^2.4.0

• 새 창 생성 코드: 새로운 창을 만들려면 Win32 API의 CreateWindowEx를 사용합니다.

import 'dart:ffi';
import 'package:win32/win32.dart';

void createNewWindow() {
  final className = TEXT('NewFlutterWindow');
  final windowName = TEXT('New Window');

  // 윈도우 클래스 등록
  final hInstance = GetModuleHandle(nullptr);
  final wndClass = calloc<WNDCLASS>()
    ..ref.lpfnWndProc = Pointer.fromFunction<WindowProc>(defWindowProc, 0)
    ..ref.hInstance = hInstance
    ..ref.lpszClassName = className;
  RegisterClass(wndClass);

  // 새 창 생성
  CreateWindowEx(
    0,
    className,
    windowName,
    WS_OVERLAPPEDWINDOW | WS_VISIBLE,
    CW_USEDEFAULT,
    CW_USEDEFAULT,
    500, // Width
    300, // Height
    nullptr,
    nullptr,
    hInstance,
    nullptr,
  );

  free(wndClass);
}

int defWindowProc(int hwnd, int msg, int wParam, int lParam) {
  return DefWindowProc(hwnd, msg, wParam, lParam);
}

void main() {
  createNewWindow();
}

---

방법 3: 다중 창 플러그인 활용

Flutter 커뮤니티에서는 다중 창을 관리하기 위한 플러그인이 개발되고 있습니다. 예를 들어 multi_window 같은 플러그인을 사용하면 플랫폼별 다중 창 관리를 쉽게 구현할 수 있습니다.

• multi_window 플러그인 설치:

dependencies:
  multi_window: ^1.0.0

• 새 창 열기:

import 'package:multi_window/multi_window.dart';

void openNewWindow() async {
  await MultiWindow.create("new_window_id");
}

---

Flutter에서 새로운 창 생성 시 고려사항

1. 플랫폼 종속성:
   • Windows 네이티브 API에 의존하면 다른 플랫폼(Android, iOS)에서는 동작하지 않습니다.
   • 크로스 플랫폼 애플리케이션을 개발하려면 가능한 한 Flutter의 위젯 및 상태 관리 방식을 사용하세요.
2. 플러그인 업데이트:
   • bitsdojo_window와 같은 플러그인은 Flutter와의 호환성을 유지하기 위해 자주 업데이트되므로 항상 최신 버전을 사용하는 것이 좋습니다.
3. 디자인 및 사용자 경험:
   • 다중 창을 사용하는 경우 창 간의 데이터 전달과 상태 관리를 명확히 설계해야 합니다.

---

결론

Flutter에서 Windows 플랫폼에서 새 창을 생성하려면:

• 간단한 작업은 **bitsdojo_window*와 같은 플러그인을 사용하는 것이 가장 효율적입니다.
• 복잡한 커스터마이징이 필요하면 **dart:ffi*와 Win32 API를 사용하여 직접 구현할 수 있습니다.
• 크로스 플랫폼을 고려하거나 다중 창을 관리하려면 multi_window와 같은 플러그인을 검토할 수 있습니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---