Flutter 튜토리얼 35편: 대형 화면과 폴더블 대응

Why#

NOTE

Android와 Apple 모두 대형 화면 앱 가이드라인에서 “텍스트나 박스가 화면 전체 너비를 차지하면 안 된다”고 명시합니다. ListView를 그대로 사용하면 이 가이드라인을 위반하게 됩니다.

1
// ListView - 넓은 화면에서 아이템이 너무 늘어남
2
ListView.builder(
3
  itemBuilder: (context, index) => Card(
4
    child: Text('Item $index'), // 화면 전체 너비 사용
5
  ),
6
)

What#

NOTE

GridView는 아이템을 2차원 그리드로 배치합니다. 화면이 넓어지면 열 수가 늘어나 공간을 효율적으로 사용합니다.

graph TD A[화면 너비 변화] --> B{GridView} B --> C[좁은 화면: 2열] B --> D[중간 화면: 3열] B --> E[넓은 화면: 4열]

delegate	용도
SliverGridDelegateWithFixedCrossAxisCount	열 수 고정
SliverGridDelegateWithMaxCrossAxisExtent	아이템 최대 너비 지정

How#

TIP

ListView.builder를 GridView.builder로 교체

1
class AdaptiveGridList extends StatelessWidget {
2
  const AdaptiveGridList({super.key, required this.items});
3
  final List<Item> items;
4

5
  @override
6
  Widget build(BuildContext context) {
7
    return GridView.builder(
8
      // 아이템 최대 너비 200px, 화면에 맞춰 열 수 자동 조정
9
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
10
        maxCrossAxisExtent: 200,
11
        mainAxisSpacing: 8,
12
        crossAxisSpacing: 8,
13
        childAspectRatio: 1.0,
14
      ),
15
      itemCount: items.length,
16
      itemBuilder: (context, index) {
17
        return Card(
18
          child: Center(child: Text(items[index].title)),
19
        );
20
      },
21
    );
22
  }
23
}

ConstrainedBox로 최대 너비 제한

1
class ConstrainedContent extends StatelessWidget {
2
  const ConstrainedContent({super.key, required this.child});
3
  final Widget child;
4

5
  @override
6
  Widget build(BuildContext context) {
7
    return Center(
8
      child: ConstrainedBox(
9
        // Material 3 권장 최대 너비
10
        constraints: const BoxConstraints(maxWidth: 840),
11
        child: child,
12
      ),
13
    );
14
  }
15
}

Watch out#

WARNING

열 수를 기기 유형으로 하드코딩하지 마세요

1
// ✗ Bad - 기기 유형으로 열 수 결정
2
int columns = isTablet ? 3 : 2;
3

4
// ✓ Good - 화면 크기로 열 수 결정
5
// SliverGridDelegateWithMaxCrossAxisExtent가 자동 처리

멀티 윈도우 모드에서 앱이 작은 공간에서 실행될 수 있습니다. 항상 실제 창 크기를 기준으로 레이아웃을 결정하세요.

결론: GridView와 maxCrossAxisExtent를 사용하면 화면 너비에 따라 열 수가 자동으로 조정됩니다.

Why#

NOTE

폴더블 기기에서 화면 방향을 잠그면 문제가 발생합니다. 접힌 상태에서는 정상이지만, 펼치면 앱이 letterbox⁵ 상태가 됩니다.

1
// 화면 방향 잠금 - 폴더블에서 문제 발생
2
SystemChrome.setPreferredOrientations([
3
  DeviceOrientation.portraitUp,
4
]);

What#

NOTE

letterbox는 앱 창이 화면 중앙에 고정되고 주변이 검은색으로 둘러싸인 상태입니다. 폴더블을 펼쳤을 때 portrait 호환 모드가 적용되면서 발생합니다.

두 가지 해결 방법이 있습니다.

방법	설명
모든 방향 지원	권장 방법, 화면 방향 제한 해제
물리적 디스플레이 크기 사용	예외적 상황에서만 사용

How#

TIP

방법 1: 모든 방향 지원 (권장)

1
void main() {
2
  WidgetsFlutterBinding.ensureInitialized();
3
  // 화면 방향 제한 해제
4
  SystemChrome.setPreferredOrientations([
5
    DeviceOrientation.portraitUp,
6
    DeviceOrientation.portraitDown,
7
    DeviceOrientation.landscapeLeft,
8
    DeviceOrientation.landscapeRight,
9
  ]);
10
  runApp(const MyApp());
11
}

방법 2: Display API로 물리적 화면 크기 확인

Flutter 3.13에서 추가된 Display⁶ API를 사용합니다.

1
class _AppState extends State<App> with WidgetsBindingObserver {
2
  ui.FlutterView? _view;
3

4
  @override
5
  void didChangeDependencies() {
6
    super.didChangeDependencies();
7
    _view = View.maybeOf(context);
8
  }
9

10
  @override
11
  void didChangeMetrics() {
12
    // 물리적 디스플레이 정보 접근
13
    final ui.Display? display = _view?.display;
14
    if (display != null) {
15
      final size = display.size;
16
      final devicePixelRatio = display.devicePixelRatio;
17
      final refreshRate = display.refreshRate;
18
      // 물리적 화면 크기 기반 로직
19
    }
20
  }
21
}

Watch out#

WARNING

물리적 디스플레이 크기는 예외적으로만 사용하세요

대부분의 경우 MediaQuery.sizeOf(context)로 창 크기를 사용해야 합니다. 물리적 디스플레이 크기는 letterbox 상태 감지 등 특수한 경우에만 사용합니다.

1
// ✓ 일반적인 레이아웃 - 창 크기 사용
2
final windowSize = MediaQuery.sizeOf(context);
3

4
// ✓ 예외적 상황 - 물리적 디스플레이 크기 사용
5
final display = View.maybeOf(context)?.display;

결론: 모든 화면 방향을 지원하면 폴더블 기기에서도 앱이 전체 화면을 활용할 수 있습니다.

Why#

NOTE

BottomNavigationBar⁷는 모바일에서 잘 작동하지만, 넓은 화면에서는 어색합니다. 대형 화면에서는 NavigationRail⁸이 더 적합합니다.

1
// 모바일 전용 - 넓은 화면에서 어색
2
BottomNavigationBar(
3
  items: [
4
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
5
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
6
  ],
7
)

What#

NOTE

화면 너비에 따라 네비게이션 위젯을 전환합니다.

graph LR A[화면 너비] --> B{600px 기준} B -->|좁음| C[BottomNavigationBar] B -->|넓음| D[NavigationRail]

위젯	적합한 화면	위치
BottomNavigationBar	모바일	하단
NavigationRail	태블릿, 데스크톱	측면
NavigationDrawer	넓은 화면	측면 확장형

How#

TIP

화면 크기에 따른 네비게이션 전환

1
class AdaptiveNavigation extends StatefulWidget {
2
  const AdaptiveNavigation({super.key});
3

4
  @override
5
  State<AdaptiveNavigation> createState() => _AdaptiveNavigationState();
6
}
7

8
class _AdaptiveNavigationState extends State<AdaptiveNavigation> {
9
  int _selectedIndex = 0;
10

11
  @override
12
  Widget build(BuildContext context) {
13
    final width = MediaQuery.sizeOf(context).width;
14
    final isWide = width >= 600;
15

16
    return Scaffold(
17
      body: Row(
18
        children: [
19
          // 넓은 화면: NavigationRail
20
          if (isWide)
21
            NavigationRail(
22
              selectedIndex: _selectedIndex,
23
              onDestinationSelected: (index) {
24
                setState(() => _selectedIndex = index);
25
              },
26
              labelType: NavigationRailLabelType.all,
27
              destinations: const [
28
                NavigationRailDestination(
29
                  icon: Icon(Icons.home),
30
                  label: Text('Home'),
31
                ),
32
                NavigationRailDestination(
33
                  icon: Icon(Icons.search),
34
                  label: Text('Search'),
35
                ),
36
                NavigationRailDestination(
37
                  icon: Icon(Icons.settings),
38
                  label: Text('Settings'),
39
                ),
40
              ],
41
            ),
42
          // 메인 콘텐츠
43
          Expanded(
44
            child: IndexedStack(
45
              index: _selectedIndex,
46
              children: const [
47
                HomeScreen(),
48
                SearchScreen(),
49
                SettingsScreen(),
50
              ],
51
            ),
52
          ),
53
        ],
54
      ),
55
      // 좁은 화면: BottomNavigationBar
56
      bottomNavigationBar: isWide
57
          ? null
58
          : BottomNavigationBar(
59
              currentIndex: _selectedIndex,
60
              onTap: (index) {
61
                setState(() => _selectedIndex = index);
62
              },
63
              items: const [
64
                BottomNavigationBarItem(
65
                  icon: Icon(Icons.home),
66
                  label: 'Home',
67
                ),
68
                BottomNavigationBarItem(
69
                  icon: Icon(Icons.search),
70
                  label: 'Search',
71
                ),
72
                BottomNavigationBarItem(
73
                  icon: Icon(Icons.settings),
74
                  label: 'Settings',
75
                ),
76
              ],
77
            ),
78
    );
79
  }
80
}

결론: 화면 너비에 따라 BottomNavigationBar와 NavigationRail을 전환하면 모든 화면에서 자연스러운 네비게이션을 제공합니다.

Why#

NOTE

Android 대형 화면 지원의 3단계(Tier 3)에는 마우스와 스타일러스 입력 지원이 포함됩니다. Material 3 버튼은 기본적으로 이를 지원하지만, 커스텀 위젯은 직접 구현해야 합니다.

데스크톱과 웹 사용자는 마우스 hover 효과를 기대합니다. 이 효과가 없으면 앱이 미완성처럼 보입니다.

What#

NOTE

지원해야 할 입력 방식

입력 방식	설명	구현 방법
마우스 hover	커서 올렸을 때 효과	MouseRegion
스크롤 휠	마우스 휠 스크롤	Listener
Tab 탐색	키보드로 포커스 이동	FocusTraversalGroup
키보드 단축키	Ctrl+N 등	Shortcuts, Actions

How#

TIP

마우스 hover 효과 추가

1
class HoverCard extends StatefulWidget {
2
  const HoverCard({super.key, required this.child, required this.onTap});
3
  final Widget child;
4
  final VoidCallback onTap;
5

6
  @override
7
  State<HoverCard> createState() => _HoverCardState();
8
}
9

10
class _HoverCardState extends State<HoverCard> {
11
  bool _isHovered = false;
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return MouseRegion(
16
      // 마우스 커서 모양 변경
17
      cursor: SystemMouseCursors.click,
18
      // hover 상태 감지
19
      onEnter: (_) => setState(() => _isHovered = true),
20
      onExit: (_) => setState(() => _isHovered = false),
21
      child: GestureDetector(
22
        onTap: widget.onTap,
23
        child: AnimatedContainer(
24
          duration: const Duration(milliseconds: 200),
25
          decoration: BoxDecoration(
26
            color: _isHovered
27
                ? Colors.blue.withOpacity(0.1)
28
                : Colors.transparent,
29
            borderRadius: BorderRadius.circular(8),
30
          ),
31
          child: widget.child,
32
        ),
33
      ),
34
    );
35
  }
36
}

Tab 탐색과 포커스 상태

1
class FocusableButton extends StatefulWidget {
2
  const FocusableButton({super.key, required this.label, required this.onPressed});
3
  final String label;
4
  final VoidCallback onPressed;
5

6
  @override
7
  State<FocusableButton> createState() => _FocusableButtonState();
8
}
9

10
class _FocusableButtonState extends State<FocusableButton> {
11
  bool _hasFocus = false;
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return FocusableActionDetector(
16
      // 포커스 변화 감지
17
      onFocusChange: (focused) => setState(() => _hasFocus = focused),
18
      // Enter/Space 키 액션 정의
19
      actions: <Type, Action<Intent>>{
20
        ActivateIntent: CallbackAction<Intent>(
21
          onInvoke: (intent) {
22
            widget.onPressed();
23
            return null;
24
          },
25
        ),
26
      },
27
      child: Container(
28
        decoration: BoxDecoration(
29
          border: _hasFocus
30
              ? Border.all(color: Colors.blue, width: 2)
31
              : null,
32
          borderRadius: BorderRadius.circular(8),
33
        ),
34
        child: ElevatedButton(
35
          onPressed: widget.onPressed,
36
          child: Text(widget.label),
37
        ),
38
      ),
39
    );
40
  }
41
}

Watch out#

WARNING

Tab 순서 제어가 필요한 경우

기본 Tab 순서가 적합하지 않으면 FocusTraversalGroup⁹으로 그룹을 지정합니다.

1
// 폼 필드를 모두 탐색한 후 제출 버튼으로 이동
2
Column(
3
  children: [
4
    FocusTraversalGroup(
5
      child: MyFormWithMultipleFields(),
6
    ),
7
    SubmitButton(), // 폼 탐색 완료 후 여기로 이동
8
  ],
9
)

결론: MouseRegion과 FocusableActionDetector를 사용하면 커스텀 위젯에도 마우스/키보드 상호작용을 추가할 수 있습니다.

Why#

NOTE

데스크톱과 웹 사용자는 Ctrl+N(새 문서), Delete(삭제) 같은 단축키를 기대합니다. 키보드는 강력한 입력 도구이므로 최대한 활용해야 합니다.

What#

NOTE

Flutter에서 키보드 단축키를 구현하는 세 가지 방법이 있습니다.

방법	범위	사용 상황
Focus / KeyboardListener10	단일 위젯	특정 필드에서만 동작
Shortcuts + Actions	위젯 트리 섹션	특정 화면에서만 동작
HardwareKeyboard	전역	앱 전체에서 항상 동작

How#

TIP

방법 1: 단일 위젯에서 키 이벤트 처리

1
class KeyListeningField extends StatelessWidget {
2
  const KeyListeningField({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return Focus(
7
      onKeyEvent: (node, event) {
8
        if (event is KeyDownEvent) {
9
          print('Key pressed: ${event.logicalKey}');
10
        }
11
        return KeyEventResult.ignored;
12
      },
13
      child: const TextField(
14
        decoration: InputDecoration(
15
          border: OutlineInputBorder(),
16
          hintText: '키 입력을 감지합니다',
17
        ),
18
      ),
19
    );
20
  }
21
}

방법 2: Shortcuts로 특정 영역에 단축키 설정

1
// 단축키 Intent 정의
2
class CreateNewItemIntent extends Intent {
3
  const CreateNewItemIntent();
4
}
5

6
class SaveIntent extends Intent {
7
  const SaveIntent();
8
}
9

10
class ShortcutEnabledScreen extends StatelessWidget {
11
  const ShortcutEnabledScreen({super.key});
12

13
  void _createNewItem() => print('New item created');
14
  void _save() => print('Saved');
15

16
  @override
17
  Widget build(BuildContext context) {
18
    return Shortcuts(
19
      // 키 조합을 Intent에 바인딩
20
      shortcuts: const <ShortcutActivator, Intent>{
21
        SingleActivator(LogicalKeyboardKey.keyN, control: true):
22
            CreateNewItemIntent(),
23
        SingleActivator(LogicalKeyboardKey.keyS, control: true):
24
            SaveIntent(),
25
      },
26
      child: Actions(
27
        // Intent를 실제 메서드에 바인딩
28
        actions: <Type, Action<Intent>>{
29
          CreateNewItemIntent: CallbackAction<CreateNewItemIntent>(
30
            onInvoke: (intent) => _createNewItem(),
31
          ),
32
          SaveIntent: CallbackAction<SaveIntent>(
33
            onInvoke: (intent) => _save(),
34
          ),
35
        },
36
        // 포커스가 있어야 단축키가 동작함
37
        child: Focus(
38
          autofocus: true,
39
          child: const Scaffold(
40
            body: Center(
41
              child: Text('Ctrl+N: 새 항목\nCtrl+S: 저장'),
42
            ),
43
          ),
44
        ),
45
      ),
46
    );
47
  }
48
}

방법 3: 전역 키보드 리스너

1
class GlobalShortcutHandler extends StatefulWidget {
2
  const GlobalShortcutHandler({super.key, required this.child});
3
  final Widget child;
4

5
  @override
6
  State<GlobalShortcutHandler> createState() => _GlobalShortcutHandlerState();
7
}
8

9
class _GlobalShortcutHandlerState extends State<GlobalShortcutHandler> {
10
  @override
11
  void initState() {
12
    super.initState();
13
    HardwareKeyboard.instance.addHandler(_handleKey);
14
  }
15

16
  @override
17
  void dispose() {
18
    HardwareKeyboard.instance.removeHandler(_handleKey);
19
    super.dispose();
20
  }
21

22
  bool _handleKey(KeyEvent event) {
23
    // Shift 키가 눌려있는지 확인
24
    final isShiftDown = HardwareKeyboard.instance.logicalKeysPressed
25
        .intersection({
26
          LogicalKeyboardKey.shiftLeft,
27
          LogicalKeyboardKey.shiftRight,
28
        })
29
        .isNotEmpty;
30

31
    // Shift+N 처리
32
    if (isShiftDown && event.logicalKey == LogicalKeyboardKey.keyN) {
33
      _createNewItem();
34
      return true; // 이벤트 소비
35
    }
36

37
    return false; // 다른 핸들러에게 전달
38
  }
39

40
  void _createNewItem() => print('Global: New item created');
41

42
  @override
43
  Widget build(BuildContext context) => widget.child;
44
}

Watch out#

WARNING

전역 리스너 사용 시 주의사항

TextField에서 타이핑 중일 때 Delete 키가 단축키로 동작하면 안 됩니다. 전역 리스너는 직접 활성화/비활성화를 관리해야 합니다.

1
bool _handleKey(KeyEvent event) {
2
  // 텍스트 입력 중이면 단축키 무시
3
  if (_isTextFieldFocused) return false;
4

5
  // 단축키 처리
6
  // ...
7
}

결론: Shortcuts와 Actions를 사용하면 특정 영역에서만 동작하는 단축키를 안전하게 구현할 수 있습니다.

Why#

NOTE

터치 입력은 손가락으로 하므로 버튼이 커야 합니다. 마우스는 정밀하므로 더 작은 요소도 클릭할 수 있습니다. 같은 앱이라도 입력 방식에 따라 UI 밀도가 달라야 합니다.

What#

NOTE

VisualDensity¹¹는 Material 위젯의 크기를 조절합니다. 수평/수직 밀도를 -4.0 ~ 4.0 범위로 설정합니다.

값	의미	사용 상황
-4.0	가장 조밀	데스크톱, 정보 밀도 높음
0.0	기본	일반 모바일
+4.0	가장 느슨	터치 최적화, 접근성

How#

TIP

입력 방식에 따른 VisualDensity 적용

1
class AdaptiveDensityApp extends StatefulWidget {
2
  const AdaptiveDensityApp({super.key});
3

4
  @override
5
  State<AdaptiveDensityApp> createState() => _AdaptiveDensityAppState();
6
}
7

8
class _AdaptiveDensityAppState extends State<AdaptiveDensityApp> {
9
  bool _touchMode = true;
10

11
  @override
12
  Widget build(BuildContext context) {
13
    // 터치 모드: 0.0 (기본), 마우스 모드: -1.0 (조밀)
14
    final densityAmt = _touchMode ? 0.0 : -1.0;
15
    final density = VisualDensity(
16
      horizontal: densityAmt,
17
      vertical: densityAmt,
18
    );
19

20
    return MaterialApp(
21
      theme: ThemeData(
22
        visualDensity: density,
23
        useMaterial3: true,
24
      ),
25
      home: Scaffold(
26
        appBar: AppBar(
27
          title: const Text('Visual Density Demo'),
28
          actions: [
29
            Switch(
30
              value: _touchMode,
31
              onChanged: (value) => setState(() => _touchMode = value),
32
            ),
33
            const Padding(
34
              padding: EdgeInsets.only(right: 16),
35
              child: Center(child: Text('Touch Mode')),
36
            ),
37
          ],
38
        ),
39
        body: const Padding(
40
          padding: EdgeInsets.all(16),
41
          child: Column(
42
            crossAxisAlignment: CrossAxisAlignment.start,
43
            children: [
44
              ElevatedButton(
45
                onPressed: null,
46
                child: Text('Button'),
47
              ),
48
              SizedBox(height: 16),
49
              TextField(
50
                decoration: InputDecoration(
51
                  border: OutlineInputBorder(),
52
                  labelText: 'Text Field',
53
                ),
54
              ),
55
              SizedBox(height: 16),
56
              ListTile(
57
                leading: Icon(Icons.settings),
58
                title: Text('Settings'),
59
                subtitle: Text('Configure your app'),
60
              ),
61
            ],
62
          ),
63
        ),
64
      ),
65
    );
66
  }
67
}

커스텀 위젯에서 VisualDensity 사용

1
class DensityAwareWidget extends StatelessWidget {
2
  const DensityAwareWidget({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    final density = Theme.of(context).visualDensity;
7

8
    // 1 밀도 단위 = 6 픽셀로 환산
9
    final extraPadding = density.baseSizeAdjustment.dy * 6;
10

11
    return Container(
12
      padding: EdgeInsets.all(16 + extraPadding),
13
      decoration: BoxDecoration(
14
        color: Colors.blue.shade100,
15
        borderRadius: BorderRadius.circular(8),
16
      ),
17
      child: const Text('Density-aware content'),
18
    );
19
  }
20
}

결론: VisualDensity를 사용하면 터치와 마우스 입력 모드에 따라 UI 밀도를 자동으로 조절할 수 있습니다.

Why#

NOTE

Platform.isAndroid, Platform.isIOS, kIsWeb 같은 분기가 코드 전체에 흩어져 있으면 관리가 어렵습니다. 플랫폼이 추가되거나 정책이 바뀔 때마다 여러 곳을 수정해야 합니다.

1
// ✗ Bad - 분기가 여기저기 흩어져 있음
2
if (Platform.isIOS) {
3
  // iOS 전용 코드
4
}
5

6
// 다른 파일에서...
7
if (!Platform.isIOS) {
8
  // iOS가 아닐 때 코드
9
}

What#

NOTE

Capability: 코드나 기기가 할 수 있는 것 Policy: 코드가 해야 하는 것

구분	Capability	Policy
정의	기술적으로 가능한 것	비즈니스/정책적으로 허용되는 것
예시	카메라 존재 여부, API 지원 여부	앱 스토어 가이드라인, 디자인 결정
변경 시기	OS 업데이트, 하드웨어 변경	정책 변경, 디자인 결정 변경

How#

TIP

Policy 클래스 만들기

1
/// 앱의 정책을 관리하는 클래스
2
class AppPolicy {
3
  /// iOS App Store 가이드라인으로 인해 외부 결제 링크 금지
4
  bool get shouldAllowExternalPurchaseLink => !Platform.isIOS;
5

6
  /// 웹에서는 다운로드 대신 미리보기 표시
7
  bool get shouldShowPreviewInsteadOfDownload => kIsWeb;
8

9
  /// 데스크톱에서는 키보드 단축키 안내 표시
10
  bool get shouldShowKeyboardShortcuts =>
11
      Platform.isWindows || Platform.isMacOS || Platform.isLinux;
12
}
13

14
// 사용 예시
15
class PurchaseButton extends StatelessWidget {
16
  const PurchaseButton({super.key});
17

18
  final _policy = const AppPolicy();
19

20
  @override
21
  Widget build(BuildContext context) {
22
    if (!_policy.shouldAllowExternalPurchaseLink) {
23
      return const SizedBox.shrink(); // iOS에서는 표시 안 함
24
    }
25

26
    return ElevatedButton(
27
      onPressed: () => launchUrl(Uri.parse('https://store.example.com')),
28
      child: const Text('Buy in Browser'),
29
    );
30
  }
31
}

Capability 클래스 만들기

1
/// 기기/플랫폼의 기능을 확인하는 클래스
2
class DeviceCapability {
3
  /// 카메라 사용 가능 여부
4
  Future<bool> get hasCameraCapability async {
5
    // 플랫폼 API로 확인
6
    return await _checkCameraPermission();
7
  }
8

9
  /// 생체 인증 지원 여부
10
  bool get supportsBiometricAuth {
11
    return Platform.isIOS || Platform.isAndroid;
12
  }
13

14
  /// 권한 다이얼로그 플로우 필요 여부
15
  bool get requiresPermissionDialogFlow {
16
    // Android 13+에서 알림 권한 필요
17
    if (Platform.isAndroid) {
18
      return _androidSdkVersion >= 33;
19
    }
20
    // iOS에서도 필요
21
    if (Platform.isIOS) {
22
      return true;
23
    }
24
    return false;
25
  }
26

27
  int get _androidSdkVersion => 33; // 실제로는 플랫폼 채널로 확인
28

29
  Future<bool> _checkCameraPermission() async {
30
    // 실제 권한 확인 로직
31
    return true;
32
  }
33
}

테스트에서 Mock 사용

1
// 테스트 가능한 구조
2
class PurchaseViewModel {
3
  PurchaseViewModel({AppPolicy? policy})
4
      : _policy = policy ?? const AppPolicy();
5

6
  final AppPolicy _policy;
7

8
  bool get showPurchaseButton => _policy.shouldAllowExternalPurchaseLink;
9
}
10

11
// 테스트
12
void main() {
13
  test('iOS에서는 구매 버튼 숨김', () {
14
    final mockPolicy = MockAppPolicy();
15
    when(mockPolicy.shouldAllowExternalPurchaseLink).thenReturn(false);
16

17
    final viewModel = PurchaseViewModel(policy: mockPolicy);
18
    expect(viewModel.showPurchaseButton, false);
19
  });
20
}

Watch out#

WARNING

메서드 이름은 “왜”를 설명하세요

1
// ✗ Bad - 기기 유형으로 이름 지정
2
bool isIOS() => Platform.isIOS;
3

4
// ✓ Good - 의도를 이름에 담음
5
bool shouldBlockExternalPayment() => Platform.isIOS;

나중에 Android에서도 같은 정책이 적용되면, 메서드 이름을 바꾸지 않고 구현만 수정하면 됩니다.

결론: Capability와 Policy 클래스로 플랫폼별 분기를 중앙 관리하면 테스트와 유지보수가 쉬워집니다.

Why#

NOTE

ListView나 ScrollView 같은 기본 스크롤 위젯은 마우스 휠을 자동으로 지원합니다. 하지만 커스텀 스크롤 동작이 필요하면 직접 구현해야 합니다.

How#

TIP

Listener로 스크롤 휠 이벤트 감지

1
class CustomScrollWidget extends StatefulWidget {
2
  const CustomScrollWidget({super.key});
3

4
  @override
5
  State<CustomScrollWidget> createState() => _CustomScrollWidgetState();
6
}
7

8
class _CustomScrollWidgetState extends State<CustomScrollWidget> {
9
  double _scale = 1.0;
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return Listener(
14
      onPointerSignal: (event) {
15
        // 스크롤 이벤트인지 확인
16
        if (event is PointerScrollEvent) {
17
          setState(() {
18
            // 스크롤 방향에 따라 확대/축소
19
            _scale += event.scrollDelta.dy > 0 ? -0.1 : 0.1;
20
            _scale = _scale.clamp(0.5, 3.0);
21
          });
22
        }
23
      },
24
      child: Transform.scale(
25
        scale: _scale,
26
        child: const Center(
27
          child: FlutterLogo(size: 200),
28
        ),
29
      ),
30
    );
31
  }
32
}

결론: Listener 위젯으로 스크롤 휠 이벤트를 감지하면 확대/축소 같은 커스텀 동작을 구현할 수 있습니다.