[Flutter] 특정 영역에서 유저 인풋을 차단하기

프로젝트 진행 시에 Sacffold의 body 속성과 Indexed Stack을 함께 사용하는데 있어 레이아웃 복잡도가 생겨 자식 위젯들이 겹치는 이슈가 발생했다.
거기에 더해 나는 FAB까지 사용을 하는데 endflot위치가 바텀 내비게이션 바와 ui적으로 가까워 터치 이벤트가 겹치는 이슈가 발생했다.

AbsorbPointer란?

AbsorbPointer는 Flutter에서 사용자 입력(터치 이벤트)을 차단하는 데 사용되는 위젯이다.
이 위젯을 사용하면 특정 영역의 모든 사용자 입력을 무시할 수 있다.
이를 통해 해당 영역에 배치된 자식 위젯들이 사용자 입력을 받지 않도록 할 수 있다.

주요 속성

absorbing: 이 속성이 true로 설정되면 AbsorbPointer가 모든 입력 이벤트를 차단한다.
false로 설정하면 자식 위젯이 정상적으로 입력 이벤트를 받을 수 있다.
ignoringSemantics: 이 속성이 true로 설정되면 AbsorbPointer는 자식 위젯의
시맨틱 이벤트(접근성 이벤트)도 무시한다.
기본값은 true다.

사용 예시

다음은 AbsorbPointer의 간단한 사용 예시다.
버튼을 포함한 컨테이너에 AbsorbPointer를 적용하여 버튼이 터치 이벤트를 받지 않도록 한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AbsorbPointer Example'),
        ),
        body: Center(
          child: AbsorbPointer(
            absorbing: true,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    print('Button Pressed');
                  },
                  child: Text('Press Me'),
                ),
                Text('This button is not clickable'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위의 예시에서 AbsorbPointer의 absorbing 속성을 true로 설정하여 버튼을 포함한
모든 자식 위젯들이 터치 이벤트를 무시하도록 했다.
따라서 "Press Me" 버튼을 눌러도 아무런 반응이 없다.

활용 사례

비활성 상태 UI: 로딩 중이거나 특정 조건에서 비활성 상태로 표시해야 하는
UI 요소들을 비활성화하는 데 유용하다.
모달 다이얼로그: 모달 다이얼로그를 표시할 때 배경의 모든 사용자 입력을 차단하기 위해 사용될 수 있다.
조건부 입력 차단: 특정 조건에 따라 입력을 차단하거나 허용하는 동작을 구현할 때 사용될 수 있다.