Flutter의 태블릿 및 데스크톱 지원 방법

Flutter의 태블릿 및 데스크톱 지원 방법

Flutter는 모바일(Android, iOS)뿐만 아니라 태블릿, 웹, 데스크톱(Windows, macOS, Linux)에서도 실행할 수 있는 크로스플랫폼 프레임워크입니다. 하지만 모바일 중심으로 설계된 UI를 태블릿과 데스크톱에서 실행하면 가독성이 떨어지거나 레이아웃이 적절하지 않을 수 있습니다.

이 글에서는 Flutter 앱을 태블릿 및 데스크톱 환경에서도 최적화하는 방법을 소개하고, 다양한 화면 크기에 맞춰 UI를 조정하는 방법을 살펴보겠습니다.

---

1. Flutter의 태블릿 및 데스크톱 지원 개요

Flutter는 플러그인 지원과 반응형 UI를 통해 다양한 플랫폼에서 실행할 수 있도록 설계되었습니다. 하지만 모바일 앱을 데스크톱 환경에서 실행하면 다음과 같은 문제가 발생할 수 있습니다.

• 화면이 커질수록 UI 요소의 크기가 상대적으로 작아짐
• 입력 방식(터치 vs 마우스 & 키보드)이 다름
• 데스크톱에서는 다중 창 레이아웃이 필요

이러한 문제를 해결하기 위해 Flutter는 태블릿 및 데스크톱을 위한 다양한 기능을 제공합니다.

---

2. 프로젝트 설정

(1) 데스크톱 플랫폼 활성화

Flutter에서 기본적으로 데스크톱 지원이 비활성화되어 있습니다. 이를 활성화하려면 다음 명령어를 실행하세요.

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

위 명령어를 실행하면 Windows, macOS, Linux용 빌드가 가능해집니다.

(2) 프로젝트 빌드

이제 각 플랫폼에서 앱을 실행해볼 수 있습니다.

flutter run -d windows
flutter run -d macos
flutter run -d linux

이 명령어를 실행하면 해당 운영체제에서 Flutter 앱이 실행됩니다.

---

3. 반응형 UI 적용

(1) MediaQuery를 활용한 화면 크기 감지

MediaQuery를 사용하면 현재 화면 크기를 감지하여 UI 요소의 크기를 조정할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class ResponsiveScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: Text('반응형 UI')),
      body: Center(
        child: Text(
          '화면 너비: ${screenWidth.toStringAsFixed(2)} px',
          style: TextStyle(fontSize: screenWidth * 0.02),
        ),
      ),
    );
  }
}

위 코드에서는 화면 너비에 따라 텍스트 크기가 동적으로 조정됩니다.

---

(2) LayoutBuilder를 활용한 레이아웃 변경

LayoutBuilder를 사용하면 화면 크기에 따라 다른 레이아웃을 적용할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('반응형 레이아웃')),
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 800) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(width: 200, height: 200, color: Colors.blue),
                SizedBox(width: 20),
                Container(width: 200, height: 200, color: Colors.red),
              ],
            );
          } else {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(width: 200, height: 200, color: Colors.blue),
                SizedBox(height: 20),
                Container(width: 200, height: 200, color: Colors.red),
              ],
            );
          }
        },
      ),
    );
  }
}

위 코드에서는 화면이 800px보다 크면 Row 레이아웃을, 작으면 Column 레이아웃을 적용합니다.

---

4. 마우스 및 키보드 입력 지원

태블릿과 데스크톱에서는 터치 입력 외에도 마우스 및 키보드 입력을 지원해야 합니다. MouseRegion과 Shortcuts 위젯을 사용하면 이를 쉽게 구현할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class MouseInteractionScreen extends StatefulWidget {
  @override
  _MouseInteractionScreenState createState() => _MouseInteractionScreenState();
}

class _MouseInteractionScreenState extends State {
  String message = "마우스를 올려보세요!";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('마우스 및 키보드 지원')),
      body: Center(
        child: MouseRegion(
          onEnter: (_) => setState(() => message = "마우스가 들어왔습니다!"),
          onExit: (_) => setState(() => message = "마우스를 밖으로 이동했습니다."),
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text(message, style: TextStyle(color: Colors.white)),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 MouseRegion을 사용하여 마우스 입력을 감지하고 UI를 변경하는 예제를 보여줍니다.

---

결론

Flutter에서 태블릿 및 데스크톱을 지원하려면 다음과 같은 방법을 활용할 수 있습니다.

• 플랫폼을 활성화하고 프로젝트를 빌드
• MediaQuery와 LayoutBuilder를 사용한 반응형 UI 구현
• 마우스 및 키보드 입력을 지원하여 데스크톱 사용자 경험 개선

이제 Flutter 앱을 태블릿과 데스크톱에서도 최적화하여 더욱 다양한 환경에서 활용해 보세요!