flutter & dart - 버튼 활성화와 비활성화 AbsorbPointer

Overview. 

버튼을 활성화 시키거나 비활성화를 시킬수 있는 AbsorbPointer 를 활용해보자

1. AbsorbPointer 란?

 

0. 문서

https://api.flutter.dev/flutter/widgets/AbsorbPointer-class.html

AbsorbPointer class - widgets library - Dart API

 

1. AbsorbPointer 란?

네 말 그대로 터치 이벤트를 제어 할 수 있습니다. 버튼 비활성화나 이럴때 사용할 수 있겠죵?

 

밑을 보시면 stateful 위젯으로 1번 Elavator 버튼과 2번 Elavator 버튼이 있습니다. 1번 버튼은 AbsorbPointer 가 없고

2번 버튼은 AbsorbPointer 를 감싼 형태를 띄우고 있습니다.

 

isCheck 를 활용해서 true 와 false 를 지정하여 setState 로 변경이 가능하겠네요!!

처음 2번 버튼을 눌렀을 시 true 값이기 때문에 버튼이 비활성화 되어있지만 1번 버튼 클릭후 2번 버튼을 눌렀을 시 버튼이 눌러지는 효과를 보실 수 있습니다.

 

바로 코드!! 보고 그냥 넘어가겠습니다.

...

class _Home extends StatefulWidget {
  const _Home({super.key});

  @override
  State<_Home> createState() => _HomeState();
}

class _HomeState extends State<_Home> {
  var isCheck = true;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                print("1번 안 감싼것");
                setState(() {
                  // 재 빌드
                  isCheck = false;
                });
                print("isCheck : $isCheck");
              },
              child: Text("안녕"),
            ),
            AbsorbPointer(
              // true : 버튼 비활성화
              // false : 버튼 활성화
              absorbing: isCheck, // 실행이 안됨 (setState 활용해야함)
              child: ElevatedButton(
                onPressed: () {
                  print("2번 absorbPointer");
                },
                child: Text("클릭"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}