Flutter 튜토리얼 5편: Material과 Cupertino 위젯

Why#

NOTE

Material Design은 Google이 만든 디자인 시스템입니다.
Android뿐 아니라 웹, 데스크톱에서도 널리 사용됩니다.
Flutter는 Material Design을 기본으로 채택하고 있어, 별도 설정 없이 바로 사용할 수 있습니다.

1
// Material Design이 기본
2
MaterialApp(
3
  home: Scaffold(...),
4
)

What#

NOTE

Material Design 3³는 Google이 2021년 발표한 최신 디자인 시스템입니다.
Flutter 3.16부터 Material 3가 기본으로 활성화되어 있습니다.
새 프로젝트를 만들면 자동으로 적용됩니다.

How#

TIP

Material Design의 핵심 요소는 다음과 같습니다.

요소	설명	예시
색상 시스템	동적 색상과 테마	ColorScheme, ThemeData
타이포그래피	일관된 텍스트 스타일	TextTheme
컴포넌트	미리 정의된 위젯	Button, Card, AppBar
음영과 깊이	계층 표현	elevation 속성

Material 3 활성화 확인

1
MaterialApp(
2
  theme: ThemeData(
3
    useMaterial3: true,  // 기본값 (Flutter 3.16+)
4
    colorScheme: ColorScheme.fromSeed(
5
      seedColor: Colors.blue,
6
    ),
7
  ),
8
  home: MyApp(),
9
)

기본 Material 앱 구조

1
MaterialApp(
2
  home: Scaffold(
3
    appBar: AppBar(
4
      title: Text('Material 앱'),
5
    ),
6
    body: Center(
7
      child: ElevatedButton(
8
        onPressed: () {},
9
        child: Text('버튼'),
10
      ),
11
    ),
12
    floatingActionButton: FloatingActionButton(
13
      onPressed: () {},
14
      child: Icon(Icons.add),
15
    ),
16
  ),
17
)

Watch out#

WARNING

Material 2에서 Material 3로 마이그레이션할 때 일부 위젯의 외관이 변경됩니다. 기존 앱의 디자인이 변경될 수 있으므로 확인이 필요합니다.

1
// Material 2로 유지하려면 (권장하지 않음)
2
ThemeData(
3
  useMaterial3: false,  // 향후 지원 중단 예정
4
)

결론: Flutter는 Material 3를 기본으로 사용하며, 모던하고 일관된 디자인을 제공합니다.

Why#

NOTE

Material Design은 6가지 카테고리로 위젯을 분류합니다.
버튼, 네비게이션, 선택, 컨테이너 등으로 나뉘어 있습니다.
각 카테고리의 대표 위젯을 알면 필요한 위젯을 빠르게 찾을 수 있습니다.

What#

NOTE

Material 위젯은 Actions, Communication, Containment, Navigation, Selection, Text inputs로 분류됩니다.

How#

TIP

Actions (작업) 위젯

사용자 동작을 시작하는 버튼류 위젯입니다.

위젯	용도	예시
ElevatedButton	주요 작업	저장, 전송
FilledButton	강조 작업	확인
OutlinedButton	보조 작업	취소
TextButton	덜 중요한 작업	더 보기
FloatingActionButton4	화면의 주요 작업	새 글 작성
IconButton	아이콘 클릭	좋아요, 공유

1
Column(
2
  children: [
3
    ElevatedButton(onPressed: () {}, child: Text('Elevated')),
4
    FilledButton(onPressed: () {}, child: Text('Filled')),
5
    OutlinedButton(onPressed: () {}, child: Text('Outlined')),
6
    TextButton(onPressed: () {}, child: Text('Text')),
7
  ],
8
)

Navigation (네비게이션) 위젯

앱 내 이동을 담당하는 위젯입니다.

위젯	용도	위치
AppBar	화면 제목과 작업	상단
NavigationBar	주요 목적지 전환	하단
NavigationRail	태블릿/데스크톱 네비게이션	좌측
NavigationDrawer	메뉴 목록	슬라이드
TabBar	탭 전환	상단/하단

1
Scaffold(
2
  appBar: AppBar(title: Text('제목')),
3
  body: content,
4
  bottomNavigationBar: NavigationBar(
5
    destinations: [
6
      NavigationDestination(icon: Icon(Icons.home), label: '홈'),
7
      NavigationDestination(icon: Icon(Icons.search), label: '검색'),
8
      NavigationDestination(icon: Icon(Icons.person), label: '프로필'),
9
    ],
10
    selectedIndex: 0,
11
    onDestinationSelected: (index) {},
12
  ),
13
)

Selection (선택) 위젯

사용자가 옵션을 선택하는 폼 컨트롤입니다.

위젯	용도	선택 방식
Checkbox	다중 선택	체크
Radio	단일 선택	라디오
Switch	ON/OFF 토글	스위치
Slider	범위 선택	슬라이더
Chip	필터링, 선택	칩
DropdownMenu	목록 선택	드롭다운

1
Column(
2
  children: [
3
    Checkbox(value: true, onChanged: (v) {}),
4
    Switch(value: false, onChanged: (v) {}),
5
    Slider(value: 0.5, onChanged: (v) {}),
6
  ],
7
)

Containment (컨테이너) 위젯

콘텐츠를 담는 컨테이너 위젯입니다.

위젯	용도
Card	관련 정보 그룹화
AlertDialog	사용자 확인 요청
BottomSheet	추가 옵션 표시
ListTile	목록 항목
Divider	구분선

1
Card(
2
  child: ListTile(
3
    leading: Icon(Icons.album),
4
    title: Text('제목'),
5
    subtitle: Text('부제목'),
6
    trailing: Icon(Icons.more_vert),
7
  ),
8
)

Watch out#

WARNING

Material 위젯은 Material ancestor가 필요합니다. MaterialApp 없이 Material 위젯을 사용하면 오류가 발생합니다.

1
// 오류: Material ancestor 없음
2
runApp(ElevatedButton(...));  // 오류!
3

4
// 올바른 사용
5
runApp(MaterialApp(
6
  home: ElevatedButton(...),
7
));

결론: Material 위젯은 카테고리별로 정리되어 있어 목적에 맞는 위젯을 쉽게 찾을 수 있습니다.

Why#

NOTE

iOS 사용자는 Apple의 Human Interface Guidelines에 익숙합니다.
iOS 앱다운 네이티브 경험을 제공하려면 어떻게 해야 할까요?
Cupertino 위젯을 사용하면 됩니다.

1
Material: 그림자, 물결 효과, 밝은 색상
2
Cupertino: 반투명, 블러 효과, 미니멀

What#

NOTE

Cupertino는 Flutter에서 iOS/macOS 스타일의 위젯을 제공합니다.
Apple의 Human Interface Guidelines를 따르는 디자인을 구현합니다.
반투명 효과, 블러, 미니멀한 디자인이 특징입니다.

How#

TIP

Cupertino 앱 기본 구조

1
import 'package:flutter/cupertino.dart';
2

3
CupertinoApp(
4
  home: CupertinoPageScaffold(
5
    navigationBar: CupertinoNavigationBar(
6
      middle: Text('Cupertino 앱'),
7
    ),
8
    child: Center(
9
      child: CupertinoButton(
10
        onPressed: () {},
11
        child: Text('버튼'),
12
      ),
13
    ),
14
  ),
15
)

Material vs Cupertino 비교

기능	Material	Cupertino
앱 루트	MaterialApp	CupertinoApp
페이지 구조	Scaffold	CupertinoPageScaffold
앱 바	AppBar	CupertinoNavigationBar
버튼	ElevatedButton	CupertinoButton
스위치	Switch	CupertinoSwitch
알림창	AlertDialog	CupertinoAlertDialog
탭 바	BottomNavigationBar	CupertinoTabBar
텍스트 필드	TextField	CupertinoTextField

시각적 차이

graph LR subgraph Material A[AppBar] --> B[그림자와 elevation] C[Button] --> D[물결 효과 ripple] E[Switch] --> F[둥근 사각형] end subgraph Cupertino G[NavigationBar] --> H[반투명 블러] I[Button] --> J[하이라이트 효과] K[Switch] --> L[캡슐 모양] end

Watch out#

WARNING

Cupertino 위젯은 CupertinoApp 또는 CupertinoTheme이 필요합니다. Material 앱에서 Cupertino 위젯을 사용하려면 추가 설정이 필요합니다.

1
// Material 앱에서 Cupertino 위젯 사용
2
MaterialApp(
3
  home: Scaffold(
4
    body: CupertinoButton(  // 일부 위젯은 동작하지만
5
      child: Text('버튼'),  // 테마가 적용되지 않을 수 있음
6
      onPressed: () {},
7
    ),
8
  ),
9
)

결론: iOS 네이티브 경험이 중요한 앱에서는 Cupertino 위젯을 활용합니다.

Why#

NOTE

Cupertino 위젯은 iOS 특유의 UX 패턴을 구현합니다.
피커, 액션 시트, 슬라이딩 세그먼트 등이 있습니다.
이런 컴포넌트는 iOS에서만 볼 수 있는 것들입니다.

What#

NOTE

Cupertino 위젯은 네비게이션, 입력, 선택, 피드백 등의 카테고리로 분류됩니다.

How#

TIP

네비게이션 위젯

위젯	용도	특징
CupertinoNavigationBar	상단 네비게이션	자동 뒤로가기
CupertinoSliverNavigationBar	큰 제목 지원	iOS 11 스타일
CupertinoTabBar	하단 탭 바	아이콘 + 라벨
CupertinoTabScaffold	탭 기반 레이아웃	TabBar + 콘텐츠

1
CupertinoTabScaffold(
2
  tabBar: CupertinoTabBar(
3
    items: [
4
      BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), label: '홈'),
5
      BottomNavigationBarItem(icon: Icon(CupertinoIcons.search), label: '검색'),
6
      BottomNavigationBarItem(icon: Icon(CupertinoIcons.settings), label: '설정'),
7
    ],
8
  ),
9
  tabBuilder: (context, index) {
10
    return CupertinoPageScaffold(
11
      child: Center(child: Text('탭 $index')),
12
    );
13
  },
14
)

선택 위젯 (Picker)

iOS의 특징적인 휠 스타일 피커입니다.

위젯	용도
CupertinoPicker	일반 항목 선택
CupertinoDatePicker	날짜/시간 선택
CupertinoTimerPicker	타이머 설정
CupertinoSlidingSegmentedControl	세그먼트 선택

1
CupertinoDatePicker(
2
  mode: CupertinoDatePickerMode.date,
3
  onDateTimeChanged: (DateTime newDate) {
4
    print(newDate);
5
  },
6
)

대화상자 위젯

위젯	용도	등장 방식
CupertinoAlertDialog	확인/취소 선택	중앙 팝업
CupertinoActionSheet	여러 옵션 선택	하단 슬라이드
CupertinoContextMenu	컨텍스트 메뉴	롱프레스

1
// 알림창 표시
2
showCupertinoDialog(
3
  context: context,
4
  builder: (context) => CupertinoAlertDialog(
5
    title: Text('제목'),
6
    content: Text('내용'),
7
    actions: [
8
      CupertinoDialogAction(
9
        child: Text('취소'),
10
        onPressed: () => Navigator.pop(context),
11
      ),
12
      CupertinoDialogAction(
13
        isDefaultAction: true,
14
        child: Text('확인'),
15
        onPressed: () => Navigator.pop(context),
16
      ),
17
    ],
18
  ),
19
);

입력 위젯

위젯	용도
CupertinoTextField	텍스트 입력
CupertinoSearchTextField	검색 입력
CupertinoSwitch	ON/OFF 토글
CupertinoSlider	범위 선택

1
CupertinoTextField(
2
  placeholder: '이름을 입력하세요',
3
  prefix: Icon(CupertinoIcons.person),
4
  padding: EdgeInsets.all(12),
5
)

Watch out#

WARNING

Cupertino 아이콘은 별도 패키지인 cupertino_icons가 필요합니다. pubspec.yaml에서 의존성을 확인하세요.

1
dependencies:
2
  flutter:
3
    sdk: flutter
4
  cupertino_icons: ^1.0.2  # 필수

결론: Cupertino 위젯으로 피커, 액션시트 등 iOS 특유의 UX를 구현합니다.

Why#

NOTE

크로스플랫폼 앱에서 어떤 디자인 시스템을 사용해야 할까요?
모든 플랫폼에서 동일한 디자인을 쓸지, 플랫폼별로 다르게 할지 선택이 필요합니다.
세 가지 전략이 있습니다.

What#

NOTE

세 가지 전략이 있습니다: Material 통일, 플랫폼별 분기, 하이브리드 방식입니다.

How#

TIP

전략 1: Material 통일

모든 플랫폼에서 Material Design을 사용합니다.

1
// 단순하고 일관된 코드
2
MaterialApp(
3
  home: Scaffold(
4
    appBar: AppBar(title: Text('앱')),
5
    body: MyContent(),
6
  ),
7
)

장점	단점
코드 단순화	iOS에서 어색할 수 있음
일관된 디자인	플랫폼 기대와 다름
유지보수 용이	네이티브 경험 부족

전략 2: 플랫폼별 분기

Platform에 따라 다른 위젯을 사용합니다.

1
import 'dart:io';
2

3
Widget build(BuildContext context) {
4
  if (Platform.isIOS) {
5
    return CupertinoApp(
6
      home: CupertinoPageScaffold(...),
7
    );
8
  }
9
  return MaterialApp(
10
    home: Scaffold(...),
11
  );
12
}

장점	단점
네이티브 경험	코드 복잡도 증가
플랫폼 기대 충족	유지보수 부담
최적화된 UX	두 배의 위젯 코드

전략 3: 하이브리드 방식 (권장)

기본은 Material을 사용하고, 필요한 부분만 플랫폼별로 분기합니다.

1
MaterialApp(
2
  home: Scaffold(
3
    appBar: AppBar(title: Text('앱')),
4
    body: Column(
5
      children: [
6
        // 공통 콘텐츠
7
        Text('콘텐츠'),
8

9
        // 플랫폼별 위젯
10
        Platform.isIOS
11
          ? CupertinoButton(onPressed: () {}, child: Text('버튼'))
12
          : ElevatedButton(onPressed: () {}, child: Text('버튼')),
13
      ],
14
    ),
15
  ),
16
)

플랫폼 적응형 위젯 사용

일부 위젯은 자동으로 플랫폼에 적응합니다.

1
// 자동 적응 예시
2
showDialog(...)        // Material AlertDialog
3
showCupertinoDialog(...) // Cupertino AlertDialog
4

5
// 적응형 위젯
6
Switch.adaptive(...)   // 플랫폼별 자동 적응
7
Slider.adaptive(...)

Watch out#

WARNING

Platform.isIOS는 웹에서 사용할 수 없습니다. 웹을 지원하려면 Theme.of(context).platform을 사용하세요.

1
// 웹에서도 동작하는 방식
2
final isIOS = Theme.of(context).platform == TargetPlatform.iOS;

결론: 대부분의 앱은 Material을 기본으로 하고, 필요한 곳에서만 플랫폼별 분기를 사용합니다.