Flutter의 플랫폼별 UI 차이점

Flutter의 플랫폼별 UI 차이점

Flutter는 하나의 코드베이스로 Android, iOS, 웹, 데스크톱(Windows, macOS, Linux) 등 다양한 플랫폼에서 실행할 수 있는 크로스플랫폼 프레임워크입니다. 하지만 각 플랫폼마다 디자인 가이드라인이 다르기 때문에, 사용자 경험을 향상시키기 위해서는 플랫폼별 UI 차이점을 이해하고 적절히 적용해야 합니다.

이 글에서는 Android(Material Design)과 iOS(Cupertino)의 UI 차이점을 비교하고, Flutter에서 이를 다르게 적용하는 방법을 설명하겠습니다.

---

1. Android(Material Design) vs iOS(Cupertino) UI 차이점

Flutter에서 가장 큰 UI 차이점은 Android는 Material Design을 사용하고, iOS는 Cupertino 스타일을 사용한다는 점입니다.

UI 요소	Android(Material Design)	iOS(Cupertino)
네비게이션 바	AppBar	CupertinoNavigationBar
버튼	ElevatedButton, TextButton, OutlinedButton	CupertinoButton
다이얼로그	AlertDialog	CupertinoAlertDialog
탭바	TabBar	CupertinoTabBar
스위치	Switch	CupertinoSwitch
네비게이션	Navigator + MaterialPageRoute	CupertinoPageRoute

이제 Flutter에서 플랫폼별 UI를 다르게 적용하는 방법을 살펴보겠습니다.

---

2. 네비게이션 바 UI 차이

Android에서는 AppBar를 사용하고, iOS에서는 CupertinoNavigationBar를 사용합니다.

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: PlatformNavBar(),
    );
  }
}

class PlatformNavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Platform.isIOS
          ? CupertinoNavigationBar(
              middle: Text('iOS 스타일 네비게이션 바'),
            )
          : AppBar(title: Text('Android 스타일 앱바')),
      body: Center(child: Text('플랫폼별 네비게이션 바')),
    );
  }
}

위 코드에서는 Platform.isIOS를 사용하여 iOS와 Android에서 각각 다른 네비게이션 바를 표시합니다.

---

3. 버튼 UI 차이

Android에서는 ElevatedButton, iOS에서는 CupertinoButton을 사용합니다.

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

class PlatformButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('플랫폼별 버튼 예제')),
      body: Center(
        child: Platform.isIOS
            ? CupertinoButton(
                child: Text('iOS 버튼'),
                color: CupertinoColors.activeBlue,
                onPressed: () {},
              )
            : ElevatedButton(
                onPressed: () {},
                child: Text('Android 버튼'),
              ),
      ),
    );
  }
}

위 코드에서는 iOS에서는 CupertinoButton, Android에서는 ElevatedButton을 적용합니다.

---

4. 다이얼로그 UI 차이

Android에서는 AlertDialog, iOS에서는 CupertinoAlertDialog를 사용합니다.

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

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와 iOS에 맞는 다이얼로그 UI를 선택적으로 적용합니다.

---

5. 네비게이션 UI 차이

Android에서는 MaterialPageRoute를 사용하고, iOS에서는 CupertinoPageRoute를 사용할 수 있습니다.

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('네비게이션 예제')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              Platform.isIOS
                  ? CupertinoPageRoute(builder: (_) => SecondPage())
                  : MaterialPageRoute(builder: (_) => SecondPage()),
            );
          },
          child: Text("페이지 이동"),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('두 번째 페이지')),
      body: Center(child: Text('플랫폼별 네비게이션 적용')),
    );
  }
}

---

결론

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

• Platform 클래스를 활용하여 조건부 UI 적용
• Material Design(Android)과 Cupertino(iOS) 위젯을 적절히 사용

이제 플랫폼별 UI 차이를 고려하여 더욱 최적화된 Flutter 앱을 개발해 보세요!