Flutter AbsorbPointer 위젯으로 터치 이벤트를 막아 UI 제어하는 방법

728x90

Flutter를 이용한 앱 개발 과정에서, 특정 UI 요소의 터치 이벤트를 일시적으로 차단해야 할 때가 있습니다. 이럴 때 유용하게 사용할 수 있는 위젯이 AbsorbPointer입니다. 이번 포스트에서는 AbsorbPointer의 역할과 사용법, 활용 사례에 대해 알아보겠습니

1. AbsorbPointer란?

AbsorbPointer는 Flutter에서 터치 이벤트를 차단하는 데 사용되는 위젯입니다. 이 위젯을 사용하면, 자식 위젯에 전달되는 모든 터치 이벤트를 흡수하여 해당 위젯과 상호작용할 수 없게 만듭니다. 즉, 사용자가 터치하거나 드래그를 시도해도 아무런 반응이 없게 되는 거죠.

간단하게 말하자면, AbsorbPointer는 해당 위젯이 마치 '투명하게' 존재하는 것처럼 만들어 주는 역할을 합니다. 이와 비슷한 역할을 하는 위젯으로는 IgnorePointer가 있는데, 두 위젯의 차이점에 대해서도 알아보겠습니다.

2. AbsorbPointer의 주요 속성

AbsorbPointer는 매우 간단한 위젯으로, 주로 두 가지 속성만을 가지고 있습니다:

absorbing: 기본값은 true로, 터치 이벤트를 흡수할지 여부를 결정하는 속성입니다. false로 설정하면 이벤트가 차단되지 않고, 자식 위젯이 정상적으로 이벤트를 받습니다.
ignoringSemantics: true일 경우, 자식 위젯의 접근성 기능도 무시됩니다. 접근성 서비스(예: 스크린 리더)가 자식 위젯을 인식하지 않게 됩니다.

3. AbsorbPointer와 IgnorePointer의 차이점

AbsorbPointer와 비슷한 기능을 제공하는 위젯인 IgnorePointer도 있습니다. 두 위젯은 터치 이벤트를 차단하는 점에서는 같지만, 차이점은 이벤트 처리 방식에 있습니다.

AbsorbPointer는 터치 이벤트를 '흡수'합니다. 즉, 이벤트가 AbsorbPointer 위젯에서 멈추고 자식 위젯에는 전달되지 않지만, 상위 위젯에는 이벤트가 계속 전달됩니다.
IgnorePointer는 터치 이벤트를 '무시'합니다. 이벤트 자체가 발생하지 않으며, AbsorbPointer와 달리 상위 위젯에도 이벤트가 전달되지 않습니다.

따라서 AbsorbPointer는 자식 위젯의 터치만 차단하고 상위 위젯은 여전히 터치를 감지할 수 있는 반면, IgnorePointer는 완전히 터치 이벤트를 무시하는 역할을 한다고 이해하면 됩니다.

4. AbsorbPointer 사용 예시

이제 AbsorbPointer를 사용한 간단한 예제를 통해 실전에서 어떻게 동작하는지 살펴보겠습니다. 아래 코드는 AbsorbPointer를 사용하여 특정 버튼을 터치할 수 없도록 차단하는 간단한 예제입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isAbsorbing = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AbsorbPointer Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AbsorbPointer(
                absorbing: _isAbsorbing,
                child: ElevatedButton(
                  onPressed: () {
                    print('Button pressed!');
                  },
                  child: Text('This button is ${_isAbsorbing ? 'disabled' : 'enabled'}'),
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isAbsorbing = !_isAbsorbing;
                  });
                },
                child: Text('Toggle AbsorbPointer'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서는 AbsorbPointer를 사용해 첫 번째 버튼의 터치 이벤트를 차단하고 있습니다. 하단의 버튼을 눌러 AbsorbPointer의 absorbing 속성을 true 또는 false로 전환할 수 있습니다. absorbing이 true일 때는 첫 번째 버튼이 터치 이벤트를 흡수해 아무런 동작을 하지 않고, false일 때는 정상적으로 터치 이벤트를 받아 버튼이 눌립니다.

5. AbsorbPointer의 활용 사례

AbsorbPointer는 UI가 복잡해지거나 특정 조건에서 터치 이벤트를 임시로 막아야 할 때 유용하게 사용됩니다. 다음은 AbsorbPointer를 활용할 수 있는 몇 가지 상황입니다.

1) 비활성화된 버튼 처리

UI 디자인에서 비활성화된 버튼을 만들어야 할 때, 단순히 색상을 바꾸는 것 외에 AbsorbPointer로 터치 이벤트 자체를 차단할 수 있습니다. 특히 폼이나 로딩 중일 때, 버튼이 비활성화되도록 구현할 수 있습니다.

2) 로딩 중 스크린 차단

앱에서 데이터를 불러오거나 긴 작업을 수행할 때, 유저가 실수로 다른 버튼을 터치하는 것을 방지하기 위해 AbsorbPointer를 사용할 수 있습니다. 예를 들어, 로딩 화면에서 유저가 다른 곳을 터치하지 못하도록 전체 화면을 AbsorbPointer로 감쌀 수 있습니다.

3) 애니메이션 동안 상호작용 제한

애니메이션이 진행되는 동안 터치 이벤트를 차단해야 할 경우, AbsorbPointer를 사용해 일시적으로 모든 이벤트를 막을 수 있습니다. 애니메이션이 완료되면 다시 이벤트를 받을 수 있도록 absorbing 속성을 조정하면 됩니다.

6. AbsorbPointer의 장단점

장점:

간단한 이벤트 차단: 추가적인 복잡한 코딩 없이 쉽게 터치 이벤트를 차단할 수 있습니다.
상위 위젯과 하위 위젯 구분: 터치 이벤트를 선택적으로 차단할 수 있어 유연하게 UI를 제어할 수 있습니다.

단점:

전체적인 이벤트 차단 불가: AbsorbPointer는 상위 위젯의 터치 이벤트는 차단하지 않기 때문에, 전체 화면에서 터치를 완전히 차단하려면 IgnorePointer나 다른 접근 방식을 사용해야 할 때도 있습니다.

7. 결론

AbsorbPointer는 Flutter에서 UI 상호작용을 세밀하게 제어할 수 있는 강력한 도구입니다. 특정 상황에서 터치 이벤트를 차단하고 싶을 때 간단하게 적용할 수 있어, 로딩 화면이나 애니메이션과 같은 복잡한 상황에서도 유용하게 사용할 수 있습니다. AbsorbPointer와 IgnorePointer의 차이를 잘 이해하고, 적절하게 사용하는 것이 중요합니다.