Flutter 튜토리얼 16편: 키보드 포커스와 단축키

Why#

NOTE

키보드 입력은 화면의 특정 요소로 전달되어야 합니다.
포커스 시스템은 어떤 위젯이 키보드 입력을 받을지 결정합니다.

1
키보드 입력 → 포커스된 위젯 → 이벤트 처리

What#

NOTE

포커스 시스템은 포커스 트리를 통해 키보드 입력을 라우팅합니다.
주요 개념은 다음과 같습니다.

개념	설명
포커스 트리	위젯 트리를 미러링하는 포커스 노드 트리
포커스 노드	포커스를 받을 수 있는 단일 노드
주 포커스	현재 키보드 입력을 받는 노드
포커스 스코프	포커스 노드 그룹을 관리하는 특수 노드
포커스 순회	Tab 키로 포커스를 이동하는 과정

How#

TIP

기본 Focus 위젯 사용

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

3
class FocusableBox extends StatefulWidget {
4
  const FocusableBox({super.key});
5

6
  @override
7
  State<FocusableBox> createState() => _FocusableBoxState();
8
}
9

10
class _FocusableBoxState extends State<FocusableBox> {
11
  bool _isFocused = false;
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return Focus(
16
      onFocusChange: (hasFocus) {
17
        setState(() {
18
          _isFocused = hasFocus;
19
        });
20
      },
21
      child: GestureDetector(
22
        onTap: () {
23
          // 탭 시 포커스 요청
24
          Focus.of(context).requestFocus();
25
        },
26
        child: AnimatedContainer(
27
          duration: const Duration(milliseconds: 200),
28
          width: 200,
29
          height: 100,
30
          decoration: BoxDecoration(
31
            color: _isFocused ? Colors.blue[100] : Colors.grey[200],
32
            border: Border.all(
33
              color: _isFocused ? Colors.blue : Colors.grey,
34
              width: _isFocused ? 2 : 1,
35
            ),
36
            borderRadius: BorderRadius.circular(8),
37
          ),
38
          child: Center(
39
            child: Text(
40
              _isFocused ? '포커스됨!' : '클릭하세요',
41
              style: TextStyle(
42
                fontWeight: _isFocused ? FontWeight.bold : FontWeight.normal,
43
              ),
44
            ),
45
          ),
46
        ),
47
      ),
48
    );
49
  }
50
}

Focus 위젯 주요 속성

속성	설명
onFocusChange	포커스 상태 변경 콜백
onKeyEvent	키 이벤트 핸들러
autofocus	자동 포커스 여부
canRequestFocus	포커스 요청 가능 여부
skipTraversal	Tab 순회에서 제외 여부

Watch out#

WARNING

FocusNode를 build() 메서드 안에서 생성하면 안 됩니다.
매번 새로운 노드가 생성되어 포커스가 유실됩니다.

1
// ❌ 잘못된 방법
2
@override
3
Widget build(BuildContext context) {
4
  return Focus(
5
    focusNode: FocusNode(), // 매번 새 노드 생성!
6
    child: Container(),
7
  );
8
}
9

10
// ✅ 올바른 방법
11
class _MyWidgetState extends State<MyWidget> {
12
  late FocusNode _focusNode;
13

14
  @override
15
  void initState() {
16
    super.initState();
17
    _focusNode = FocusNode(debugLabel: 'MyFocusNode');
18
  }
19

20
  @override
21
  void dispose() {
22
    _focusNode.dispose();
23
    super.dispose();
24
  }
25

26
  @override
27
  Widget build(BuildContext context) {
28
    return Focus(
29
      focusNode: _focusNode,
30
      child: Container(),
31
    );
32
  }
33
}

결론: Focus 위젯으로 포커스 가능한 요소를 만들고, onFocusChange로 상태 변화를 감지합니다.

Why#

NOTE

프로그래밍 방식으로 포커스를 제어해야 할 때가 있습니다.
검증 실패 시 해당 필드로 포커스 이동, 대화상자 열릴 때 자동 포커스 등이 필요합니다.

1
이벤트 발생 → focusNode.requestFocus() → 포커스 이동

What#

NOTE

FocusNode는 포커스 상태를 관리하는 장수명 객체입니다.
requestFocus(), unfocus(), hasFocus 등의 메서드와 속성을 제공합니다.

How#

TIP

FocusNode 활용

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

4
  @override
5
  State<FocusControlDemo> createState() => _FocusControlDemoState();
6
}
7

8
class _FocusControlDemoState extends State<FocusControlDemo> {
9
  late FocusNode _redFocus;
10
  late FocusNode _greenFocus;
11
  late FocusNode _blueFocus;
12

13
  @override
14
  void initState() {
15
    super.initState();
16
    _redFocus = FocusNode(debugLabel: 'Red');
17
    _greenFocus = FocusNode(debugLabel: 'Green');
18
    _blueFocus = FocusNode(debugLabel: 'Blue');
19
  }
20

21
  @override
22
  void dispose() {
23
    _redFocus.dispose();
24
    _greenFocus.dispose();
25
    _blueFocus.dispose();
26
    super.dispose();
27
  }
28

29
  @override
30
  Widget build(BuildContext context) {
31
    return Column(
32
      children: [
33
        Row(
34
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
35
          children: [
36
            _buildFocusableBox(_redFocus, Colors.red),
37
            _buildFocusableBox(_greenFocus, Colors.green),
38
            _buildFocusableBox(_blueFocus, Colors.blue),
39
          ],
40
        ),
41
        const SizedBox(height: 24),
42
        Row(
43
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
44
          children: [
45
            ElevatedButton(
46
              onPressed: () => _redFocus.requestFocus(),
47
              child: const Text('빨강 포커스'),
48
            ),
49
            ElevatedButton(
50
              onPressed: () => _greenFocus.requestFocus(),
51
              child: const Text('초록 포커스'),
52
            ),
53
            ElevatedButton(
54
              onPressed: () => _blueFocus.requestFocus(),
55
              child: const Text('파랑 포커스'),
56
            ),
57
          ],
58
        ),
59
        const SizedBox(height: 16),
60
        ElevatedButton(
61
          onPressed: () {
62
            // 현재 포커스 해제
63
            FocusManager.instance.primaryFocus?.unfocus();
64
          },
65
          child: const Text('포커스 해제'),
66
        ),
67
      ],
68
    );
69
  }
70

71
  Widget _buildFocusableBox(FocusNode focusNode, Color color) {
72
    return Focus(
73
      focusNode: focusNode,
74
      child: Builder(
75
        builder: (context) {
76
          final isFocused = Focus.of(context).hasFocus;
77
          return Container(
78
            width: 80,
79
            height: 80,
80
            decoration: BoxDecoration(
81
              color: isFocused ? color : color.withOpacity(0.3),
82
              border: Border.all(
83
                color: isFocused ? Colors.black : Colors.grey,
84
                width: isFocused ? 3 : 1,
85
              ),
86
              borderRadius: BorderRadius.circular(8),
87
            ),
88
          );
89
        },
90
      ),
91
    );
92
  }
93
}

FocusNode 주요 API

API	설명
requestFocus()	이 노드로 포커스 요청
unfocus()	포커스 해제
hasFocus	포커스 보유 여부
hasPrimaryFocus	주 포커스 보유 여부
addListener()	포커스 변경 리스너 등록
debugLabel	디버깅용 레이블

Watch out#

WARNING

unfocus() 호출 시 포커스가 완전히 사라지지 않습니다.
다른 노드로 포커스가 이동합니다.

1
// unfocus의 disposition 옵션
2
focusNode.unfocus(
3
  // 부모 스코프로 포커스 이동 (기본값)
4
  disposition: UnfocusDisposition.scope,
5
);
6

7
focusNode.unfocus(
8
  // 이전에 포커스되었던 자식으로 이동
9
  disposition: UnfocusDisposition.previouslyFocusedChild,
10
);

포커스 트리에 다른 스코프가 없으면 루트 스코프로 이동하여 Tab 순회가 깨질 수 있습니다.

결론: FocusNode로 포커스를 프로그래밍 방식으로 제어하고, 반드시 dispose()에서 해제합니다.

Why#

NOTE

특정 키 입력에 반응하는 커스텀 동작이 필요합니다.
방향키로 선택 이동, Escape로 대화상자 닫기 등을 구현해야 합니다.

1
키 입력 → onKeyEvent → 처리 또는 전파

What#

NOTE

Focus 위젯의 onKeyEvent 콜백으로 키 이벤트를 처리합니다.
KeyEventResult.handled를 반환하면 이벤트가 더 이상 전파되지 않습니다.

How#

TIP

키 이벤트 처리 기본

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

4
  @override
5
  State<KeyEventDemo> createState() => _KeyEventDemoState();
6
}
7

8
class _KeyEventDemoState extends State<KeyEventDemo> {
9
  String _lastKey = '키를 누르세요';
10
  int _selectedIndex = 0;
11
  final List<String> _items = ['사과', '바나나', '체리', '딸기', '포도'];
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return Focus(
16
      autofocus: true,
17
      onKeyEvent: (node, event) {
18
        // KeyDownEvent만 처리 (반복 입력 방지)
19
        if (event is! KeyDownEvent) {
20
          return KeyEventResult.ignored;
21
        }
22

23
        setState(() {
24
          _lastKey = event.logicalKey.keyLabel;
25
        });
26

27
        // 방향키 처리
28
        if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
29
          setState(() {
30
            _selectedIndex = (_selectedIndex - 1).clamp(0, _items.length - 1);
31
          });
32
          return KeyEventResult.handled;
33
        }
34

35
        if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
36
          setState(() {
37
            _selectedIndex = (_selectedIndex + 1).clamp(0, _items.length - 1);
38
          });
39
          return KeyEventResult.handled;
40
        }
41

42
        // Enter 키로 선택 확인
43
        if (event.logicalKey == LogicalKeyboardKey.enter) {
44
          ScaffoldMessenger.of(context).showSnackBar(
45
            SnackBar(content: Text('${_items[_selectedIndex]} 선택됨!')),
46
          );
47
          return KeyEventResult.handled;
48
        }
49

50
        return KeyEventResult.ignored;
51
      },
52
      child: Column(
53
        children: [
54
          Text('마지막 키: $_lastKey'),
55
          const SizedBox(height: 16),
56
          ...List.generate(_items.length, (index) {
57
            return Container(
58
              padding: const EdgeInsets.all(8),
59
              margin: const EdgeInsets.symmetric(vertical: 4),
60
              decoration: BoxDecoration(
61
                color: index == _selectedIndex ? Colors.blue[100] : null,
62
                border: Border.all(
63
                  color: index == _selectedIndex ? Colors.blue : Colors.grey,
64
                ),
65
                borderRadius: BorderRadius.circular(4),
66
              ),
67
              child: Text(_items[index]),
68
            );
69
          }),
70
          const SizedBox(height: 16),
71
          const Text('↑↓ 이동, Enter 선택'),
72
        ],
73
      ),
74
    );
75
  }
76
}

KeyEventResult 옵션

값	설명
handled	이벤트 처리됨, 전파 중단
ignored	이벤트 무시, 부모로 전파
skipRemainingHandlers	나머지 핸들러 건너뜀

Watch out#

WARNING

키 이벤트는 주 포커스에서 시작하여 루트까지 전파됩니다.
handled를 반환하면 네이티브 컨트롤도 이벤트를 받지 못합니다.

1
onKeyEvent: (node, event) {
2
  // TextField 내부에서 이 핸들러가 호출되면
3
  // handled 반환 시 TextField에 입력이 안 됨
4

5
  // 특정 조합만 처리하고 나머지는 무시
6
  if (HardwareKeyboard.instance.isControlPressed &&
7
      event.logicalKey == LogicalKeyboardKey.keyS) {
8
    _save();
9
    return KeyEventResult.handled;
10
  }
11

12
  // 일반 입력은 TextField로 전달되도록 ignored 반환
13
  return KeyEventResult.ignored;
14
}

결론: onKeyEvent로 키 입력을 처리하고, KeyEventResult로 이벤트 전파를 제어합니다.

Why#

NOTE

Tab 키로 논리적인 순서로 포커스가 이동해야 합니다.
관련 요소들을 그룹화하여 그룹 내에서 먼저 순회하도록 할 수 있습니다.

1
그룹 A (버튼1 → 버튼2) → 그룹 B (입력1 → 입력2) → 그룹 C

What#

NOTE

FocusTraversalGroup은 포커스 순회 그룹을 정의합니다.
FocusTraversalPolicy로 순회 순서를 커스터마이징할 수 있습니다.

How#

TIP

기본 포커스 순회 그룹

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

4
  @override
5
  Widget build(BuildContext context) {
6
    return Column(
7
      children: [
8
        // 그룹 1: 네비게이션
9
        FocusTraversalGroup(
10
          child: Row(
11
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
12
            children: [
13
              ElevatedButton(onPressed: () {}, child: const Text('홈')),
14
              ElevatedButton(onPressed: () {}, child: const Text('검색')),
15
              ElevatedButton(onPressed: () {}, child: const Text('설정')),
16
            ],
17
          ),
18
        ),
19
        const Divider(),
20
        // 그룹 2: 폼 입력
21
        FocusTraversalGroup(
22
          child: Column(
23
            children: [
24
              const TextField(decoration: InputDecoration(labelText: '이름')),
25
              const SizedBox(height: 8),
26
              const TextField(decoration: InputDecoration(labelText: '이메일')),
27
              const SizedBox(height: 8),
28
              ElevatedButton(onPressed: () {}, child: const Text('제출')),
29
            ],
30
          ),
31
        ),
32
      ],
33
    );
34
  }
35
}

커스텀 순회 순서

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

4
  @override
5
  Widget build(BuildContext context) {
6
    return FocusTraversalGroup(
7
      policy: OrderedTraversalPolicy(),
8
      child: Row(
9
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
10
        children: [
11
          // 숫자가 작은 순서대로 순회: 2 → 1 → 3
12
          FocusTraversalOrder(
13
            order: const NumericFocusOrder(2),
14
            child: ElevatedButton(
15
              onPressed: () {},
16
              child: const Text('TWO'),
17
            ),
18
          ),
19
          FocusTraversalOrder(
20
            order: const NumericFocusOrder(1),
21
            child: ElevatedButton(
22
              onPressed: () {},
23
              child: const Text('ONE'),
24
            ),
25
          ),
26
          FocusTraversalOrder(
27
            order: const NumericFocusOrder(3),
28
            child: ElevatedButton(
29
              onPressed: () {},
30
              child: const Text('THREE'),
31
            ),
32
          ),
33
        ],
34
      ),
35
    );
36
  }
37
}

FocusTraversalPolicy 종류

정책	설명
ReadingOrderTraversalPolicy	읽기 순서 (기본값)
OrderedTraversalPolicy	명시적 순서 지정
WidgetOrderTraversalPolicy	위젯 트리 순서

Watch out#

WARNING

skipTraversal을 true로 설정하면 Tab 순회에서 제외되지만, requestFocus()로는 여전히 포커스할 수 있습니다.

1
Focus(
2
  skipTraversal: true, // Tab으로 이동 불가
3
  child: MyWidget(),
4
)
5

6
// 하지만 프로그래밍 방식으로는 포커스 가능
7
focusNode.requestFocus();
8

9
// 완전히 포커스 불가능하게 하려면
10
Focus(
11
  canRequestFocus: false, // 어떤 방식으로도 포커스 불가
12
  child: MyWidget(),
13
)

결론: FocusTraversalGroup으로 포커스 그룹을 만들고, OrderedTraversalPolicy로 순서를 커스터마이징합니다.

Why#

NOTE

Ctrl+S로 저장, Ctrl+Z로 실행 취소 같은 단축키가 필요합니다.
Shortcuts와 Actions는 키 조합과 동작을 분리하여 관리합니다.

1
키 조합 (Shortcuts) → Intent → Action (Actions) → 실행

What#

NOTE

Shortcuts 위젯은 키 조합을 Intent로 매핑합니다.
Actions 위젯은 Intent를 Action으로 매핑하여 실행합니다.

How#

TIP

Intent와 Action 정의

1
// 1. Intent 정의 - 사용자의 의도를 표현
2
class IncrementIntent extends Intent {
3
  const IncrementIntent();
4
}
5

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

10
class ResetIntent extends Intent {
11
  const ResetIntent();
12
}
13

14
// 2. Action 정의 - 실제 동작 구현
15
class IncrementAction extends Action<IncrementIntent> {
16
  IncrementAction(this.onIncrement);
17

18
  final VoidCallback onIncrement;
19

20
  @override
21
  void invoke(covariant IncrementIntent intent) {
22
    onIncrement();
23
  }
24
}
25

26
class DecrementAction extends Action<DecrementIntent> {
27
  DecrementAction(this.onDecrement);
28

29
  final VoidCallback onDecrement;
30

31
  @override
32
  void invoke(covariant DecrementIntent intent) {
33
    onDecrement();
34
  }
35
}

Shortcuts와 Actions 연결

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

4
  @override
5
  State<ShortcutsDemo> createState() => _ShortcutsDemoState();
6
}
7

8
class _ShortcutsDemoState extends State<ShortcutsDemo> {
9
  int _counter = 0;
10

11
  void _increment() => setState(() => _counter++);
12
  void _decrement() => setState(() => _counter--);
13
  void _reset() => setState(() => _counter = 0);
14

15
  @override
16
  Widget build(BuildContext context) {
17
    return Shortcuts(
18
      shortcuts: const <ShortcutActivator, Intent>{
19
        // 키 조합 → Intent 매핑
20
        SingleActivator(LogicalKeyboardKey.arrowUp): IncrementIntent(),
21
        SingleActivator(LogicalKeyboardKey.arrowDown): DecrementIntent(),
22
        SingleActivator(LogicalKeyboardKey.keyR, control: true): ResetIntent(),
23
      },
24
      child: Actions(
25
        actions: <Type, Action<Intent>>{
26
          // Intent → Action 매핑
27
          IncrementIntent: IncrementAction(_increment),
28
          DecrementIntent: DecrementAction(_decrement),
29
          ResetIntent: CallbackAction<ResetIntent>(
30
            onInvoke: (intent) => _reset(),
31
          ),
32
        },
33
        child: Focus(
34
          autofocus: true,
35
          child: Column(
36
            mainAxisAlignment: MainAxisAlignment.center,
37
            children: [
38
              Text(
39
                '$_counter',
40
                style: const TextStyle(fontSize: 48),
41
              ),
42
              const SizedBox(height: 24),
43
              const Text('↑: 증가, ↓: 감소, Ctrl+R: 초기화'),
44
            ],
45
          ),
46
        ),
47
      ),
48
    );
49
  }
50
}

단축키 정의 방식

방식	사용 시점
SingleActivator	단일 키 + 수정자 (권장)
LogicalKeySet	여러 키 조합
CharacterActivator	문자 기반 입력

Watch out#

WARNING

Shortcuts와 Actions는 포커스된 위젯의 조상에 있어야 합니다.
포커스가 다른 곳에 있으면 단축키가 작동하지 않습니다.

1
// ❌ Focus가 Actions 바깥에 있어서 작동 안 함
2
Column(
3
  children: [
4
    Focus(autofocus: true, child: TextField()),
5
    Actions(
6
      actions: {...},
7
      child: Shortcuts(
8
        shortcuts: {...},
9
        child: Container(),
10
      ),
11
    ),
12
  ],
13
)
14

15
// ✅ Focus가 Actions 안에 있어서 작동함
16
Actions(
17
  actions: {...},
18
  child: Shortcuts(
19
    shortcuts: {...},
20
    child: Focus(
21
      autofocus: true,
22
      child: Column(
23
        children: [TextField(), Container()],
24
      ),
25
    ),
26
  ),
27
)

결론: Intent로 의도를, Action으로 동작을 분리하고, Shortcuts와 Actions로 연결합니다.

Why#

NOTE

간단한 단축키는 Intent와 Action을 정의하는 것이 번거로울 수 있습니다.
CallbackShortcuts는 직접 콜백을 연결하여 코드를 간소화합니다.

1
키 조합 → 콜백 함수 (직접 실행)

What#

NOTE

CallbackShortcuts는 키 조합에 콜백을 직접 매핑합니다.
FocusableActionDetector는 포커스, 마우스, 단축키를 한 번에 처리합니다.

How#

TIP

CallbackShortcuts 사용

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

4
  @override
5
  State<SimpleShortcutsDemo> createState() => _SimpleShortcutsDemoState();
6
}
7

8
class _SimpleShortcutsDemoState extends State<SimpleShortcutsDemo> {
9
  int _count = 0;
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return CallbackShortcuts(
14
      bindings: <ShortcutActivator, VoidCallback>{
15
        const SingleActivator(LogicalKeyboardKey.arrowUp): () {
16
          setState(() => _count++);
17
        },
18
        const SingleActivator(LogicalKeyboardKey.arrowDown): () {
19
          setState(() => _count--);
20
        },
21
        const SingleActivator(LogicalKeyboardKey.escape): () {
22
          setState(() => _count = 0);
23
        },
24
      },
25
      child: Focus(
26
        autofocus: true,
27
        child: Center(
28
          child: Text('Count: $_count', style: const TextStyle(fontSize: 32)),
29
        ),
30
      ),
31
    );
32
  }
33
}

FocusableActionDetector 사용

1
class CustomButton extends StatefulWidget {
2
  const CustomButton({
3
    super.key,
4
    required this.label,
5
    required this.onPressed,
6
  });
7

8
  final String label;
9
  final VoidCallback onPressed;
10

11
  @override
12
  State<CustomButton> createState() => _CustomButtonState();
13
}
14

15
class _CustomButtonState extends State<CustomButton> {
16
  bool _isFocused = false;
17
  bool _isHovered = false;
18

19
  @override
20
  Widget build(BuildContext context) {
21
    return FocusableActionDetector(
22
      onFocusChange: (focused) => setState(() => _isFocused = focused),
23
      onShowFocusHighlight: (show) => setState(() => _isFocused = show),
24
      onShowHoverHighlight: (show) => setState(() => _isHovered = show),
25
      actions: <Type, Action<Intent>>{
26
        ActivateIntent: CallbackAction<ActivateIntent>(
27
          onInvoke: (intent) => widget.onPressed(),
28
        ),
29
      },
30
      shortcuts: const <ShortcutActivator, Intent>{
31
        SingleActivator(LogicalKeyboardKey.enter): ActivateIntent(),
32
        SingleActivator(LogicalKeyboardKey.space): ActivateIntent(),
33
      },
34
      child: GestureDetector(
35
        onTap: widget.onPressed,
36
        child: AnimatedContainer(
37
          duration: const Duration(milliseconds: 150),
38
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
39
          decoration: BoxDecoration(
40
            color: _isHovered ? Colors.blue[100] : Colors.grey[100],
41
            border: Border.all(
42
              color: _isFocused ? Colors.blue : Colors.grey,
43
              width: _isFocused ? 2 : 1,
44
            ),
45
            borderRadius: BorderRadius.circular(8),
46
          ),
47
          child: Text(
48
            widget.label,
49
            style: TextStyle(
50
              fontWeight: _isFocused ? FontWeight.bold : FontWeight.normal,
51
            ),
52
          ),
53
        ),
54
      ),
55
    );
56
  }
57
}

LoggingActionDispatcher로 디버깅

1
class LoggingActionDispatcher extends ActionDispatcher {
2
  @override
3
  Object? invokeAction(
4
    covariant Action<Intent> action,
5
    covariant Intent intent, [
6
    BuildContext? context,
7
  ]) {
8
    print('Action: $action, Intent: $intent');
9
    return super.invokeAction(action, intent, context);
10
  }
11
}
12

13
// 사용
14
Actions(
15
  dispatcher: LoggingActionDispatcher(),
16
  actions: {...},
17
  child: child,
18
)

Watch out#

WARNING

플랫폼별 단축키 충돌에 주의해야 합니다.
macOS는 Cmd를, Windows/Linux는 Ctrl을 사용합니다.

1
// 플랫폼별 수정자 처리
2
SingleActivator(
3
  LogicalKeyboardKey.keyS,
4
  // macOS에서는 Cmd, 그 외에서는 Ctrl
5
  meta: Platform.isMacOS,
6
  control: !Platform.isMacOS,
7
)
8

9
// 또는 ControlOrMeta 사용
10
shortcuts: const <ShortcutActivator, Intent>{
11
  SingleActivator(
12
    LogicalKeyboardKey.keyS,
13
    control: true,  // Windows/Linux
14
    meta: true,     // macOS에서 Cmd로 처리됨
15
  ): SaveIntent(),
16
}

결론: 간단한 단축키는 CallbackShortcuts로, 복합 위젯은 FocusableActionDetector로 구현합니다.