Flutter의 플랫폼 위젯 사용법

Flutter의 플랫폼 위젯 사용법

Flutter는 하나의 코드베이스로 Android, iOS, 웹, 데스크톱 등 다양한 플랫폼에서 실행될 수 있습니다. 하지만 각 플랫폼마다 사용자 경험(UI/UX)이 다르므로, 플랫폼별로 적절한 위젯을 제공하는 것이 중요합니다.

Flutter에서는 기본적으로 Material Design(Android 스타일)과 Cupertino(iOS 스타일)를 지원하며, 이를 활용하면 각 플랫폼에 맞는 UI를 구현할 수 있습니다.

이 글에서는 Flutter에서 플랫폼별 UI를 제공하는 방법과 플랫폼 위젯을 사용하는 방법을 설명하겠습니다.

---

1. 플랫폼 위젯이란?

Flutter의 플랫폼 위젯은 특정 플랫폼에서 적절한 UI를 자동으로 선택하여 제공하는 위젯을 의미합니다.

예를 들어, Android에서는 Material Design을 사용하고 iOS에서는 Cupertino 스타일을 적용하는 방식입니다.

플랫폼별 UI를 구성하는 대표적인 방법은 다음과 같습니다.

• Platform.isAndroid 및 Platform.isIOS를 사용하여 조건부 UI 적용
• ThemeData.platform을 활용하여 테마 변경
• flutter_platform_widgets와 같은 패키지 활용

이제 각 방법을 살펴보겠습니다.

---

2. 플랫폼별 위젯 적용

(1) Platform 클래스를 활용한 조건부 UI

Dart의 dart:io 패키지의 Platform 클래스를 사용하면 실행 중인 플랫폼을 감지하여 적절한 UI를 제공할 수 있습니다.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

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

class PlatformWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Platform.isIOS
          ? CupertinoNavigationBar(middle: Text('iOS 스타일 네비게이션 바'))
          : AppBar(title: Text('Android 스타일 앱바')),
      body: Center(
        child: Platform.isIOS
            ? CupertinoButton(
                child: Text('iOS 버튼'),
                color: CupertinoColors.activeBlue,
                onPressed: () {},
              )
            : ElevatedButton(
                onPressed: () {},
                child: Text('Android 버튼'),
              ),
      ),
    );
  }
}

위 코드에서는 Platform.isIOS 및 Platform.isAndroid를 사용하여 iOS와 Android에서 다른 UI를 적용했습니다.

---

(2) ThemeData.platform을 활용한 UI 자동 적용

ThemeData.platform을 사용하면 현재 실행 중인 플랫폼에 따라 자동으로 스타일을 변경할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(platform: TargetPlatform.android), // Android 스타일 적용
      darkTheme: ThemeData(platform: TargetPlatform.iOS), // iOS 스타일 적용
      home: ThemeExample(),
    );
  }
}

class ThemeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ThemeData.platform 예제')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('플랫폼 스타일 버튼'),
        ),
      ),
    );
  }
}

위 코드에서는 ThemeData.platform을 설정하여 Android 및 iOS에서 적절한 테마를 적용했습니다.

---

3. flutter_platform_widgets 패키지 활용

flutter_platform_widgets 패키지를 사용하면 플랫폼별 UI를 쉽게 구성할 수 있습니다.

(1) 패키지 설치

flutter pub add flutter_platform_widgets

(2) 플랫폼 위젯 적용

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

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

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

class PlatformWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PlatformAppBar(title: Text('플랫폼 위젯 예제')),
      body: Center(
        child: PlatformElevatedButton(
          onPressed: () {},
          child: Text('플랫폼 버튼'),
        ),
      ),
    );
  }
}

이제 iOS에서는 Cupertino 스타일, Android에서는 Material 스타일이 자동으로 적용됩니다.

---

4. 플랫폼별 다이얼로그 적용

플랫폼에 따라 다른 스타일의 다이얼로그를 표시할 수도 있습니다.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

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

class PlatformDialogExample extends StatelessWidget {
  void showPlatformDialog(BuildContext context) {
    if (Platform.isIOS) {
      showCupertinoDialog(
        context: context,
        builder: (context) => CupertinoAlertDialog(
          title: Text("iOS 다이얼로그"),
          content: Text("이것은 iOS 스타일 다이얼로그입니다."),
          actions: [
            CupertinoDialogAction(
              child: Text("확인"),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
      );
    } else {
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text("Android 다이얼로그"),
          content: Text("이것은 Android 스타일 다이얼로그입니다."),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("확인"),
            ),
          ],
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("플랫폼 다이얼로그 예제")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => showPlatformDialog(context),
          child: Text("다이얼로그 열기"),
        ),
      ),
    );
  }
}

위 코드는 Android에서는 AlertDialog, iOS에서는 CupertinoAlertDialog를 사용하여 적절한 다이얼로그를 표시합니다.

---

결론

Flutter에서 플랫폼별 UI를 적용하는 방법은 다음과 같습니다.

• Platform 클래스를 활용한 조건부 UI 적용
• ThemeData.platform을 사용하여 자동 스타일 변경
• flutter_platform_widgets 패키지를 활용한 간편한 플랫폼 UI 구성

이제 Flutter에서 다양한 플랫폼에 맞는 UI를 구현하여 더욱 최적화된 사용자 경험을 제공해 보세요!