Flutter - AbsorbPointer, 클릭 터치 방지

안녕하세요 독학코딩입니다. 오늘은 Flutter에서 화면 터치를 방지하는 방법에 대해서 배워보겠습니다. 특정 레벨의 사용자만 사용할 수 있는 기능 혹은 특정 조건에서만 활성화 되는 버튼을 만들기에 좋은 기능이니 잘 알아두시면 좋습니다. 

 

Flutter AbsorbPointer

Absorb는 한글로 "흡수"입니다. Pointer는 보통 마우스 포인터, 클릭을 의미하니 AbsorbPointer는 말 그대로 클릭을 흡수하는 위젯입니다. 

class FirstRoute extends StatefulWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  State<FirstRoute> createState() => _FirstRouteState();
}

class _FirstRouteState extends State<FirstRoute> {

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () {},
          child: Text("클릭 가능"),
        ),
        AbsorbPointer(
          child: ElevatedButton(
            onPressed: () {},
            child: Text("클릭 불가능"),
          ),
        ),
      ],
    );
  }
}

 

AbsorbPointer 사용방법은 너무 간단합니다. 클릭을 방지할 위젯의 parent위젯으로 AbsorbPointer를 사용해주면 됩니다. 그런데 위의 예제로는 클릭이 방지만 되지 클리 방지를 했다가 안했다가는 불가능합니다. 어떻게 해야될까요? 

 

간단합니다. 당연히 AbsorbPointer 위젯 안에 기능이 있겠죠? 

AbsorbPointer(
  absorbing: true,
  child: ElevatedButton(
    onPressed: () {},
    child: Text("클릭 불가능"),
  ),
)

 

AbsorbPointer 내장 변수에 absorbing이 있습니다. 

absorbing: true,

 

absorbing을 true로 해놓으시면 클릭을 방지해둔 것입니다. 설정을 안하시는 것도 default로 true로 설정된 것입니다.

absorbing: false,

 

absorbing를 false로 해두시면 클릭이 가능합니다. 그럼 이 기능을 껏다 켰따 하는건 어떻게 할까요? 

class FirstRoute extends StatefulWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  State<FirstRoute> createState() => _FirstRouteState();
}

class _FirstRouteState extends State<FirstRoute> {
  bool absorb_bool = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () {
            absorb_bool = !absorb_bool;
            setState(() {});
          },
          child: Text("클릭 가능 변경"),
        ),
        AbsorbPointer(
          absorbing: absorb_bool,
          child: ElevatedButton(
            onPressed: () {},
            child: Text("클릭 불가능"),
          ),
        ),
      ],
    );
  }
}

 

간단합니다. StatefulWidget을 사용해서 State를 이용하면 됩니다. absorbing의 변수에 선언한 state, absorb_bool을 배정하고 absorb_bool의 값을 다른 버튼 혹은 조건 등으로 변경하는 기능은 만들면 AbsorbPointer를 클릭 가능하게 또는 클릭 불가능하게 변경할 수 있습니다.