Flutter의 iOS 스타일 위젯(Cupertino Widgets) 사용법

Flutter의 iOS 스타일 위젯(Cupertino Widgets) 사용법

Flutter는 Material Design(Android)과 Cupertino(iOS) 스타일을 모두 지원하는 크로스플랫폼 프레임워크입니다. iOS 사용자 경험을 향상시키기 위해 Flutter에서는 Cupertino 위젯을 제공하며, 이를 활용하면 iOS 네이티브 앱과 유사한 UI를 구성할 수 있습니다.

이 글에서는 Flutter에서 Cupertino 위젯을 활용하여 iOS 스타일 UI를 구현하는 방법을 설명하고, 대표적인 Cupertino 위젯을 소개하겠습니다.

---

1. Cupertino 위젯이란?

Cupertino 위젯은 iOS 스타일의 UI를 제공하는 Flutter의 위젯 라이브러리입니다. iOS 앱과 유사한 사용자 경험을 제공하기 위해 iOS의 Human Interface Guidelines을 기반으로 설계되었습니다.

대표적인 Cupertino 위젯은 다음과 같습니다.

위젯	설명
CupertinoNavigationBar	iOS 스타일의 네비게이션 바
CupertinoButton	iOS 스타일의 버튼
CupertinoAlertDialog	iOS 스타일의 다이얼로그
CupertinoTabBar	iOS 스타일의 하단 탭바
CupertinoSwitch	iOS 스타일의 토글 스위치
CupertinoActivityIndicator	iOS 스타일의 로딩 인디케이터

이제 각 위젯을 사용하여 iOS 스타일 UI를 구성하는 방법을 알아보겠습니다.

---

2. Cupertino 네비게이션 바

Android의 AppBar와 유사한 iOS 스타일 네비게이션 바는 CupertinoNavigationBar를 사용하여 구현할 수 있습니다.

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

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

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

class CupertinoNavBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text("iOS 네비게이션 바"),
      ),
      child: Center(
        child: Text("iOS 스타일 UI"),
      ),
    );
  }
}

위 코드는 iOS 스타일의 네비게이션 바를 추가하고, iOS의 기본 UI처럼 동작하도록 CupertinoPageScaffold를 사용하였습니다.

---

3. Cupertino 버튼

Android의 ElevatedButton과 유사한 iOS 버튼을 만들려면 CupertinoButton을 사용합니다.

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

class CupertinoButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(middle: Text("Cupertino 버튼 예제")),
      child: Center(
        child: CupertinoButton(
          child: Text("iOS 버튼"),
          color: CupertinoColors.activeBlue,
          onPressed: () {
            print("버튼 클릭됨");
          },
        ),
      ),
    );
  }
}

CupertinoButton은 기본적으로 둥근 모서리를 가진 스타일을 적용하며, color 속성을 사용하여 배경색을 변경할 수 있습니다.

---

4. Cupertino 다이얼로그

iOS 스타일의 다이얼로그는 CupertinoAlertDialog를 사용하여 구현할 수 있습니다.

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

class CupertinoDialogExample extends StatelessWidget {
  void showCupertinoDialogBox(BuildContext context) {
    showCupertinoDialog(
      context: context,
      builder: (context) => CupertinoAlertDialog(
        title: Text("iOS 다이얼로그"),
        content: Text("이것은 Cupertino 스타일 다이얼로그입니다."),
        actions: [
          CupertinoDialogAction(
            child: Text("확인"),
            onPressed: () => Navigator.pop(context),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(middle: Text("Cupertino 다이얼로그 예제")),
      child: Center(
        child: CupertinoButton(
          child: Text("다이얼로그 열기"),
          color: CupertinoColors.activeBlue,
          onPressed: () => showCupertinoDialogBox(context),
        ),
      ),
    );
  }
}

위 코드는 iOS 스타일의 다이얼로그를 표시하는 예제입니다.

---

5. Cupertino 탭바

iOS 스타일의 하단 탭바는 CupertinoTabBar를 사용하여 구현할 수 있습니다.

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

class CupertinoTabExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), label: "홈"),
          BottomNavigationBarItem(icon: Icon(CupertinoIcons.settings), label: "설정"),
        ],
      ),
      tabBuilder: (context, index) {
        return CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text(index == 0 ? "홈" : "설정"),
          ),
          child: Center(
            child: Text(index == 0 ? "홈 화면" : "설정 화면"),
          ),
        );
      },
    );
  }
}

이제 iOS 스타일의 탭바를 적용할 수 있습니다.

---

결론

Flutter의 Cupertino 위젯을 활용하면 iOS 사용자들에게 익숙한 UI를 제공할 수 있습니다.

• CupertinoNavigationBar: iOS 스타일의 네비게이션 바
• CupertinoButton: iOS 스타일의 버튼
• CupertinoAlertDialog: iOS 스타일의 다이얼로그
• CupertinoTabBar: iOS 스타일의 하단 탭바

이제 Cupertino 위젯을 활용하여 더욱 iOS 친화적인 Flutter 앱을 만들어 보세요!