Flutter Hover 처리하기

김민진·2022년 11월 10일
0

flutter_개발내용

목록 보기
11/11

앱만 개발할때는 몰랐다.

버튼에 hover 라는 처리가 있다는것을

앱을 개발할때는 사실 눌르면 눌림처리 혹은 페이지 전환이 다 였으니까..

웹은 hover라는 영역이 존재하였다.

나는 hover를 구현하기 위해 TextButton을 사용하였다.

(사실 hover 구현을 위해 별짓을 다 했다. MouseRegion 부터 시작해서 포인트 잡기 등등...)

return TextButton(
      onPressed: onPressed,
      style: ButtonStyle(
        overlayColor: MaterialStateProperty.resolveWith((states) {
          return Colors.transparent;
        }),
        splashFactory: NoSplash.splashFactory,
        shape: MaterialStateProperty.resolveWith((states) {
          if (!isSelected) {
            if (states.contains(MaterialState.hovered) ||
                states.contains(MaterialState.pressed)) {
              return RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                  side: BorderSide(color: const FMThemeColor().pri_bt_02!));
            } else {
              return RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                  side: BorderSide(color: const FMThemeColor().grey40!));
            }
          }
        }),
      ),

일단 예시로 작은 코드 하나를 가져와보았다.

사실 호버 뿐만 아니라 다른 이벤트 처리를 위해서는

MaterialState

이 녀석이 매우 중요하다.

자세한 내용은 https://material.io/design/interaction/states.html#usage 여기서 확인이 가능하다

저 state에는

  1. hovered
  2. focused
  3. pressed
  4. dragged
  5. selected
  6. scrolledUnder
  7. disabled
  8. error

등이 있는데

나는 hover,focuse,pressed,disabled,selected 정도만 사용했다.

사실 저 코드에서 selected 의 상태를 체크하지 못하길래 isSelected를 추가하여 사용함

사용법은 매우 간단하다.
TextButton을 선언해준뒤
shape 에 MaterialStateProperty.resolveWith((states){}) 이것을 넘겨주면 된다.

states.contains(MaterialState.hovered) 

위 코드를 이용하여 현재의 상태를 비교한뒤

알맞은 디자인을 내보내주면 된다.

사실 웹을 하면서 처음 사용해본건데.

앞으로 앱에서도 많은 사용을 할 것 같다 이 위젯 하나만 있으면 버튼의 상태관리는 끝~

profile
dart,c#,java 개발자! 잡다하게 해서 문제될게 없다!

0개의 댓글