본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터-웹: 마우스 호버 -> 커서를 포인터로 변경, Flutter-Web: Mouse hover -> Change cursor to pointer

by 베타코드 2023. 9. 22.
반응형

질문


업데이트 (2021/05/11):

플러터는 이제 네이티브로 호버 이벤트가 구현된 위젯을 가지고 있습니다.

RaisedButton과 같은 위젯에는 MouseCursor와 hoverColor 또는 hoverElevation과 같은 속성이 있습니다.

https://api.flutter.dev/flutter/services/MouseCursor-class.html

또한, 수락된 답변에 언급된대로 어디에서든 InkWell을 사용할 수도 있습니다.


원래 질문:

플러터 내에서 커서 모양을 어떻게 변경할 수 있을까요? Listener() 위젯을 사용하여 마우스 이벤트를 수신할 수 있다는 것은 알고 있지만, 플러터 웹에 대한 호버 이벤트에 대한 정보를 찾지 못했습니다. 아직 해결책을 찾으신 분은 계시나요?


답변


지금 내장 지원에 대한 문서를 찾는 데 어려움을 겪었습니다. 다음은 저를 도와준 내용입니다: https://github.com/flutter/flutter/issues/58260

그리고 이것이 제게 도움이 되었는데, index.html 등을 변경하지 않고도 작동했습니다.

MouseRegion(
  cursor: SystemMouseCursors.click,
    child: GestureDetector(
      child: Icon(
        Icons.add_comment,
        size: 20,
        ),
      onTap: () {},
    ),
  ),

공식 문서도 확인하세요: https://api.flutter.dev/flutter/rendering/MouseCursor-class.html

Widget build(BuildContext context) {
  return Center(
    child: MouseRegion(
      cursor: SystemMouseCursors.text,
      child: Container(
        width: 200,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.blue,
          border: Border.all(color: Colors.yellow),
        ),
      ),
    ),
  );
}

그리고 여기 https://api.flutter.dev/flutter/material/MaterialStateMouseCursor-class.html 또 다른 공식 문서에서 "...위젯이 비활성화되었을 때 SystemMouseCursors.forbidden으로 해결되는 마우스 커서를 정의합니다."라는 멋진 예제가 있습니다.

반응형

댓글