앱만 개발할때는 몰랐다.
버튼에 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에는
등이 있는데
나는 hover,focuse,pressed,disabled,selected 정도만 사용했다.
사실 저 코드에서 selected 의 상태를 체크하지 못하길래 isSelected를 추가하여 사용함
사용법은 매우 간단하다.
TextButton을 선언해준뒤
shape 에 MaterialStateProperty.resolveWith((states){}) 이것을 넘겨주면 된다.
states.contains(MaterialState.hovered)
위 코드를 이용하여 현재의 상태를 비교한뒤
알맞은 디자인을 내보내주면 된다.
사실 웹을 하면서 처음 사용해본건데.
앞으로 앱에서도 많은 사용을 할 것 같다 이 위젯 하나만 있으면 버튼의 상태관리는 끝~