Flutter 튜토리얼 13편: 제스처와 터치 처리

Why#

NOTE

Flutter의 제스처 시스템은 두 가지 레이어로 구성됩니다.
이 구조를 이해해야 적절한 도구를 선택할 수 있습니다.

1
사용자 터치
2
    ↓
3
포인터 이벤트 (저수준)
4
    ↓
5
제스처 인식 (고수준)
6
    ↓
7
콜백 실행

What#

NOTE

Flutter는 포인터 이벤트를 제스처로 변환합니다.

레이어	설명	예시
포인터 이벤트	원시 입력 데이터	화면 접촉, 이동, 해제
제스처	의미 있는 동작	탭, 드래그, 스케일

How#

TIP

포인터 이벤트 종류

이벤트	설명
PointerDownEvent	화면에 접촉 시작
PointerMoveEvent	접촉한 상태로 이동
PointerUpEvent	화면에서 떼어짐
PointerCancelEvent	입력이 취소됨

제스처 종류

1
// 탭 제스처
2
onTap           // 탭 완료
3
onTapDown       // 탭 시작
4
onTapUp         // 탭 해제
5
onTapCancel     // 탭 취소
6

7
// 더블 탭
8
onDoubleTap     // 빠르게 두 번 탭
9

10
// 롱 프레스
11
onLongPress     // 길게 누르기
12
onLongPressStart
13
onLongPressEnd
14

15
// 드래그
16
onVerticalDragStart    // 세로 드래그 시작
17
onVerticalDragUpdate   // 세로 드래그 중
18
onVerticalDragEnd      // 세로 드래그 끝
19

20
onHorizontalDragStart  // 가로 드래그 시작
21
onHorizontalDragUpdate // 가로 드래그 중
22
onHorizontalDragEnd    // 가로 드래그 끝
23

24
// 팬 (전방향 드래그)
25
onPanStart             // 드래그 시작
26
onPanUpdate            // 드래그 중
27
onPanEnd               // 드래그 끝

히트 테스트(Hit Test)

포인터 이벤트가 발생하면 Flutter는 해당 위치의 위젯을 찾습니다.
가장 안쪽 위젯부터 위로 올라가며 이벤트를 전달합니다.

Watch out#

WARNING

onPan과 방향별 드래그 콜백을 함께 사용하면 충돌이 발생합니다.

1
// 오류: Pan과 방향 드래그를 함께 사용
2
GestureDetector(
3
  onPanUpdate: (details) { },         // 전방향
4
  onVerticalDragUpdate: (details) { }, // 세로만
5
  child: Container(),
6
)
7
// 런타임 오류 발생!
8

9
// 해결: 둘 중 하나만 선택
10
GestureDetector(
11
  onPanUpdate: (details) {
12
    // 전방향 드래그 처리
13
  },
14
  child: Container(),
15
)

결론: Flutter는 포인터 이벤트를 제스처로 추상화해 복잡한 입력 처리를 단순화합니다.

Why#

NOTE

커스텀 위젯에 탭 기능을 추가하려면 GestureDetector를 사용합니다.
Container, Text 등 기본 위젯은 터치에 반응하지 않기 때문입니다.

1
// 터치에 반응하지 않음
2
Container(
3
  color: Colors.blue,
4
  child: Text('탭해도 아무 일 없음'),
5
)

What#

NOTE

GestureDetector는 자식 위젯을 감싸서 제스처를 감지하는 위젯입니다.
다양한 콜백을 통해 제스처에 반응할 수 있습니다.

How#

TIP

기본 탭 처리

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

4
  @override
5
  Widget build(BuildContext context) {
6
    return GestureDetector(
7
      onTap: () {
8
        ScaffoldMessenger.of(context).showSnackBar(
9
          const SnackBar(content: Text('탭!')),
10
        );
11
      },
12
      child: Container(
13
        padding: const EdgeInsets.all(16),
14
        decoration: BoxDecoration(
15
          color: Colors.blue,
16
          borderRadius: BorderRadius.circular(8),
17
        ),
18
        child: const Text(
19
          '탭하세요',
20
          style: TextStyle(color: Colors.white),
21
        ),
22
      ),
23
    );
24
  }
25
}

다양한 탭 제스처

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

4
  @override
5
  State<MultiTapExample> createState() => _MultiTapExampleState();
6
}
7

8
class _MultiTapExampleState extends State<MultiTapExample> {
9
  String _lastGesture = '아직 없음';
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return Column(
14
      mainAxisAlignment: MainAxisAlignment.center,
15
      children: [
16
        GestureDetector(
17
          onTap: () {
18
            setState(() => _lastGesture = '탭');
19
          },
20
          onDoubleTap: () {
21
            setState(() => _lastGesture = '더블 탭');
22
          },
23
          onLongPress: () {
24
            setState(() => _lastGesture = '롱 프레스');
25
          },
26
          child: Container(
27
            width: 200,
28
            height: 200,
29
            color: Colors.amber,
30
            alignment: Alignment.center,
31
            child: const Text('여기를 터치하세요'),
32
          ),
33
        ),
34
        const SizedBox(height: 20),
35
        Text('마지막 제스처: $_lastGesture'),
36
      ],
37
    );
38
  }
39
}

탭 위치 감지

1
GestureDetector(
2
  onTapDown: (TapDownDetails details) {
3
    print('탭 위치: ${details.localPosition}');
4
    print('전역 위치: ${details.globalPosition}');
5
  },
6
  child: Container(
7
    width: 300,
8
    height: 300,
9
    color: Colors.green,
10
  ),
11
)

Watch out#

WARNING

GestureDetector에 설정한 콜백만 감지됩니다.
필요한 콜백만 설정하면 불필요한 처리를 줄일 수 있습니다.

1
// onTap만 설정 → 탭만 감지
2
GestureDetector(
3
  onTap: () { },
4
  child: Container(),
5
)
6

7
// onTap과 onDoubleTap 설정
8
// → Flutter가 탭인지 더블탭인지 구분하기 위해 약간의 지연 발생
9
GestureDetector(
10
  onTap: () { },
11
  onDoubleTap: () { },
12
  child: Container(),
13
)

결론: GestureDetector로 커스텀 위젯에 탭 기능을 쉽게 추가할 수 있습니다.

Why#

NOTE

슬라이더, 드래그 앤 드롭, 스와이프 기능을 구현하려면 드래그 제스처를 처리해야 합니다.
드래그는 시작, 업데이트, 종료의 세 단계로 구성됩니다.

What#

NOTE

드래그 제스처는 방향에 따라 세 가지로 나뉩니다.

타입	설명	사용 예
Vertical	세로 방향만	리스트 스크롤
Horizontal	가로 방향만	캐러셀
Pan	전 방향	지도 이동

How#

TIP

세로 드래그 예제

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

4
  @override
5
  State<VerticalDragExample> createState() => _VerticalDragExampleState();
6
}
7

8
class _VerticalDragExampleState extends State<VerticalDragExample> {
9
  double _yOffset = 0;
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return GestureDetector(
14
      onVerticalDragUpdate: (DragUpdateDetails details) {
15
        setState(() {
16
          _yOffset += details.delta.dy;
17
        });
18
      },
19
      child: Container(
20
        color: Colors.grey[200],
21
        child: Center(
22
          child: Transform.translate(
23
            offset: Offset(0, _yOffset),
24
            child: Container(
25
              width: 100,
26
              height: 100,
27
              color: Colors.blue,
28
              child: const Center(
29
                child: Text('드래그', style: TextStyle(color: Colors.white)),
30
              ),
31
            ),
32
          ),
33
        ),
34
      ),
35
    );
36
  }
37
}

전방향 드래그 (Pan)

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

4
  @override
5
  State<PanExample> createState() => _PanExampleState();
6
}
7

8
class _PanExampleState extends State<PanExample> {
9
  Offset _offset = Offset.zero;
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return GestureDetector(
14
      onPanStart: (details) {
15
        print('드래그 시작: ${details.localPosition}');
16
      },
17
      onPanUpdate: (details) {
18
        setState(() {
19
          _offset += details.delta;
20
        });
21
      },
22
      onPanEnd: (details) {
23
        print('드래그 끝, 속도: ${details.velocity}');
24
      },
25
      child: Container(
26
        color: Colors.grey[300],
27
        child: Center(
28
          child: Transform.translate(
29
            offset: _offset,
30
            child: Container(
31
              width: 80,
32
              height: 80,
33
              decoration: const BoxDecoration(
34
                color: Colors.red,
35
                shape: BoxShape.circle,
36
              ),
37
            ),
38
          ),
39
        ),
40
      ),
41
    );
42
  }
43
}

드래그 속도 활용

1
onPanEnd: (DragEndDetails details) {
2
  // 속도를 사용해 관성 효과 구현 가능
3
  final velocity = details.velocity.pixelsPerSecond;
4
  print('X 속도: ${velocity.dx}');
5
  print('Y 속도: ${velocity.dy}');
6
}

Watch out#

WARNING

드래그 중에는 빈번한 setState 호출이 발생합니다.
성능이 중요한 경우 최적화를 고려해야 합니다.

1
// 성능 최적화: RepaintBoundary 사용
2
RepaintBoundary(
3
  child: GestureDetector(
4
    onPanUpdate: (details) {
5
      setState(() {
6
        _offset += details.delta;
7
      });
8
    },
9
    child: CustomPaint(
10
      painter: MyPainter(_offset),
11
    ),
12
  ),
13
)

결론: 드래그 콜백의 delta와 velocity를 활용해 자연스러운 드래그 인터페이스를 구현합니다.

Why#

NOTE

Material Design에서는 터치 시 리플(물결) 효과로 피드백을 제공합니다.
InkWell은 이 리플 효과를 쉽게 추가해주는 위젯입니다.

1
// GestureDetector: 리플 효과 없음
2
// InkWell: Material 리플 효과 포함

What#

NOTE

InkWell은 GestureDetector와 비슷하지만 Material 리플 애니메이션이 포함됩니다.
Material 위젯 트리 안에서 사용해야 합니다.

How#

TIP

기본 InkWell 사용

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

4
  @override
5
  Widget build(BuildContext context) {
6
    return InkWell(
7
      onTap: () {
8
        ScaffoldMessenger.of(context).showSnackBar(
9
          const SnackBar(content: Text('탭!')),
10
        );
11
      },
12
      child: const Padding(
13
        padding: EdgeInsets.all(16),
14
        child: Text('탭하면 리플 효과'),
15
      ),
16
    );
17
  }
18
}

커스텀 리플 색상

1
InkWell(
2
  onTap: () { },
3
  splashColor: Colors.red.withOpacity(0.3),    // 리플 색상
4
  highlightColor: Colors.red.withOpacity(0.1), // 하이라이트 색상
5
  child: Container(
6
    padding: const EdgeInsets.all(16),
7
    child: const Text('커스텀 리플'),
8
  ),
9
)

모서리 둥근 InkWell

1
Material(
2
  color: Colors.transparent,
3
  child: InkWell(
4
    onTap: () { },
5
    borderRadius: BorderRadius.circular(12),
6
    child: Container(
7
      padding: const EdgeInsets.all(16),
8
      decoration: BoxDecoration(
9
        border: Border.all(color: Colors.blue),
10
        borderRadius: BorderRadius.circular(12),
11
      ),
12
      child: const Text('둥근 리플'),
13
    ),
14
  ),
15
)

InkWell vs GestureDetector 비교

1
Row(
2
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
3
  children: [
4
    // GestureDetector - 리플 없음
5
    GestureDetector(
6
      onTap: () => print('GestureDetector 탭'),
7
      child: Container(
8
        padding: const EdgeInsets.all(16),
9
        color: Colors.blue,
10
        child: const Text('GestureDetector'),
11
      ),
12
    ),
13

14
    // InkWell - 리플 있음
15
    Material(
16
      color: Colors.blue,
17
      child: InkWell(
18
        onTap: () => print('InkWell 탭'),
19
        child: const Padding(
20
          padding: EdgeInsets.all(16),
21
          child: Text('InkWell'),
22
        ),
23
      ),
24
    ),
25
  ],
26
)

Watch out#

WARNING

InkWell의 리플 효과는 Material 위젯 위에서만 제대로 표시됩니다.

1
// 나쁜 예: 리플이 Container 아래에 숨겨짐
2
Container(
3
  color: Colors.white,  // 불투명 배경이 리플을 가림
4
  child: InkWell(
5
    onTap: () { },
6
    child: Text('리플 안 보임'),
7
  ),
8
)
9

10
// 좋은 예: Material로 감싸거나 Ink 사용
11
Material(
12
  color: Colors.white,
13
  child: InkWell(
14
    onTap: () { },
15
    child: const Padding(
16
      padding: EdgeInsets.all(16),
17
      child: Text('리플 보임'),
18
    ),
19
  ),
20
)
21

22
// 또는 Ink.image 사용 (이미지 위 리플)
23
Ink.image(
24
  image: const NetworkImage('...'),
25
  fit: BoxFit.cover,
26
  child: InkWell(
27
    onTap: () { },
28
  ),
29
)

결론: Material 디자인 앱에서는 InkWell을 사용해 표준 리플 피드백을 제공합니다.

Why#

NOTE

여러 제스처 인식기가 같은 영역에서 충돌할 수 있습니다.
예를 들어, 리스트 아이템을 탭할 때 스크롤도 감지됩니다.
Flutter는 “제스처 아레나”로 이 충돌을 해결합니다.

What#

NOTE

제스처 아레나(Gesture Arena)는 여러 제스처 인식기가 경쟁해서 승자를 결정하는 시스템입니다.

flowchart TD A[포인터 다운] --> B[제스처 아레나 생성] B --> C[인식기들 경쟁] C --> D{승자 결정} D -->|탭 승리| E[탭 콜백 실행] D -->|드래그 승리| F[드래그 콜백 실행]

How#

TIP

아레나 동작 방식

1
// 탭과 수직 드래그가 충돌하는 경우
2
GestureDetector(
3
  onTap: () => print('탭!'),
4
  onVerticalDragStart: (_) => print('드래그 시작!'),
5
  child: Container(
6
    width: 200,
7
    height: 200,
8
    color: Colors.purple,
9
  ),
10
)
11

12
// 동작:
13
// 1. 터치 시작 → 두 인식기 모두 아레나 진입
14
// 2. 움직임 없이 떼면 → 탭 승리
15
// 3. 세로로 움직이면 → 드래그 승리

중첩된 제스처 처리

1
// 외부: 전체 카드 탭
2
// 내부: 아이콘 버튼 탭
3
GestureDetector(
4
  onTap: () => print('카드 탭'),
5
  child: Card(
6
    child: ListTile(
7
      title: const Text('아이템'),
8
      trailing: IconButton(
9
        onPressed: () => print('아이콘 탭'),
10
        icon: const Icon(Icons.more_vert),
11
      ),
12
    ),
13
  ),
14
)
15
// 아이콘 탭 → 아이콘 버튼 콜백만 실행
16
// 다른 곳 탭 → 카드 탭 콜백 실행

HitTestBehavior로 히트 영역 제어

1
GestureDetector(
2
  // 기본값: deferToChild - 자식이 있는 영역만 감지
3
  behavior: HitTestBehavior.deferToChild,
4
  onTap: () { },
5
  child: Container(
6
    width: 200,
7
    height: 200,
8
    // 투명 영역은 탭 감지 안 됨
9
  ),
10
)
11

12
GestureDetector(
13
  // opaque: 전체 영역 감지 (이벤트 전파 차단)
14
  behavior: HitTestBehavior.opaque,
15
  onTap: () { },
16
  child: Container(
17
    width: 200,
18
    height: 200,
19
  ),
20
)
21

22
GestureDetector(
23
  // translucent: 전체 영역 감지 (이벤트 전파 허용)
24
  behavior: HitTestBehavior.translucent,
25
  onTap: () { },
26
  child: Container(
27
    width: 200,
28
    height: 200,
29
  ),
30
)

Watch out#

WARNING

제스처 인식에는 약간의 지연이 발생할 수 있습니다.

1
// onTap만 있으면 → 즉시 인식
2
GestureDetector(
3
  onTap: () { },
4
  child: Container(),
5
)
6

7
// onTap + onDoubleTap → 탭 후 약간 대기
8
// (더블 탭인지 확인하기 위해)
9
GestureDetector(
10
  onTap: () { },
11
  onDoubleTap: () { },
12
  child: Container(),
13
)

성능이 중요한 경우 필요한 제스처만 등록하세요.

결론: 제스처 아레나가 자동으로 충돌을 해결하지만, 동작 방식을 이해하면 더 정확한 제어가 가능합니다.

Why#

NOTE

단순한 탭 처리를 위해 항상 GestureDetector를 사용할 필요는 없습니다.
Flutter는 다양한 기본 버튼 위젯을 제공합니다.

What#

NOTE

Material Design 버튼들은 기본적으로 리플 효과와 접근성을 지원합니다.

버튼	용도
ElevatedButton	주요 액션, 입체감
FilledButton	중요한 최종 액션
OutlinedButton	보조 액션
TextButton	덜 중요한 액션
IconButton	아이콘만 있는 버튼
FloatingActionButton	화면의 주요 액션

How#

TIP

버튼 예시

1
Column(
2
  children: [
3
    ElevatedButton(
4
      onPressed: () => print('Elevated'),
5
      child: const Text('Elevated Button'),
6
    ),
7
    const SizedBox(height: 8),
8

9
    FilledButton(
10
      onPressed: () => print('Filled'),
11
      child: const Text('Filled Button'),
12
    ),
13
    const SizedBox(height: 8),
14

15
    OutlinedButton(
16
      onPressed: () => print('Outlined'),
17
      child: const Text('Outlined Button'),
18
    ),
19
    const SizedBox(height: 8),
20

21
    TextButton(
22
      onPressed: () => print('Text'),
23
      child: const Text('Text Button'),
24
    ),
25
    const SizedBox(height: 8),
26

27
    IconButton(
28
      onPressed: () => print('Icon'),
29
      icon: const Icon(Icons.favorite),
30
    ),
31
  ],
32
)

비활성화 버튼

1
ElevatedButton(
2
  onPressed: null,  // null이면 비활성화
3
  child: const Text('비활성화'),
4
)

아이콘 포함 버튼

1
ElevatedButton.icon(
2
  onPressed: () { },
3
  icon: const Icon(Icons.add),
4
  label: const Text('추가'),
5
)

Watch out#

WARNING

버튼의 onPressed가 null이면 비활성화되어 탭이 불가능합니다.

1
// 조건부 활성화
2
ElevatedButton(
3
  onPressed: isValid ? () => submit() : null,
4
  child: const Text('제출'),
5
)

결론: 기본 버튼을 활용하면 일관된 디자인과 접근성을 쉽게 확보할 수 있습니다.