위젯에서 사용자의 포인터 위치 찾기

Chocomilk·2021년 4월 2일
0
post-thumbnail

App이나 Web에서 위의 사진과 같이 커서가 위젯 위에 있을때를 인지하여 특별한 효과를 주고 싶을때가 있다.
GestureDetector나 InkWell의 경우에는 Touch와 관련된 행동이거나 아니면 스크롤 했을때를 인지하는 경우이다.
그렇기에 Hovering을 확인하고 싶을때는 MouseRegion 위젯을 통해 가능하다.


body : MouseRegion(
          onHover: _onHover,
          onExit: _onExit,
          onEnter: _onEnter,
          cursor: SystemMouseCursors.click,
          child: Widget()
          )
          
 void _onEnter(PointerEvent details){
    print("Entering in the Area");
  }          

 void _onExit(PointerEvent details){
    print("Exiting in the Area");
  }          

 void _onHover(PointerEvent details){
    print("Hovering in the Area");
  }          

MouseRegion에 적용한 함수가 각각의 상황에 따라 실행하게 된다

  • onHover : 사용자의 pointer를 위젯 위에서 돌아다니고 있을 때 실행
  • onExit : 사용자의 Pointer가 위젯 안에서 밖으로 나갔을 때 실행
  • onEnter : 사용자의 Pointer가 위젯 밖에서 안으로 들어갔을 때 실행

cursor 속성은 사용자의 Pointer가 위젯안에서 hovering 할 때 모양이다.
현재까지 공부한 바로는 다음과 같이 속성들이 있다.

  • SystemMousecursors.click - 클릭할때 적용되는 손가락 모양
  • SystemMousecursors.text - 텍스트를 선택할 때 나오는 대문자 I 모양
profile
어제보다 한 발짝 더 나아가려는 Flutter 개발자

0개의 댓글