[Flutter] 플러터 2.0 버튼 hover, pressed, focused, disable, overlay 상태(state) 변화 개발

기존에는 state 별 버튼의 컬러를 parameter로 지정하고
state를 조건문으로 지정해줘야했다.
하지만 flutter 2.0에서는 style 요소 내에서 버튼의 상태(state)에 맞는
시각적 요소를 지정할 수 있게 되었다.
material design이 정의한 버튼의 상태(state)와 state별로 버튼 시각적 요소 지정, overlay 색상을
수정하는 방법을 정리해보려고 한다.

---

1. material design에서 지정하고 있는 버튼의 상태

- enabled : 상호작용 가능한 버튼 상태
- pressed : 사용자가 탭 했을 때
- hover : 사용자가 마우스 커서를 상호작용 가능한 버튼 위에 올려두었을 때
- focus : 사용자가 키보드나 음성과 같은 입력 방법을 사용하여 강조표시한 상태
- disable : 상호작용 불가한 버튼 상태

2. State별로 버튼 시각적 요소 지정

버튼은 ButtonStyle 속성을 통해 버튼의 기본적인 시각적 속성을 재 정의할 수 있다.
버튼의 상태는 사용자의 인터렉션에 따라 MaterialState로 정의되는데
MaterialStateProperty 인터페이스를 통해 버튼의 상태값을 확인할 수 있다.


1) MaterialStateProperty.resolvewith
state 별로 상태 변화 지정

resolvewith는 상태 별로 다른 시각적 속성을 return하는 함수를 받는다.
나는 상태 별로 다른 color 값을 가질 수 있도록 getColor 함수를 정의했다.
resolvewith는 MaterialStateProperty로부터 상태마다 다른 MaterialState Set을 받고
getColor 함수를 통해 state에 맞는 color를 return 한다.

color 뿐 아니라 다른 ButtonStyle의 속성값들도 재정의가 가능하다!

ElevatedButton( style: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith(getColor), ), )

 static Color getColor(Set<MaterialState> states) { if (states.contains(MaterialState.hovered)) { return color['hover']; } else if (states.contains(MaterialState.pressed) || states.contains(MaterialState.focused)) { return color['pressed']; } else if (states.contains(MaterialState.disabled)) { return color['disable']; } else { return color['basic']; } }

** 공식 다큐먼트의 예시

ElevatedButton( style: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith<Color>( (Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) return Theme.of(context).colorScheme.primary.withOpacity(0.5); return null; // Use the component's default. }, ), ), )

2) MaterialStateProperty.all
모든 state에 똑같은 값을 지정한다.

ElevatedButton( style: ButtonStyle( backgroundColor: MaterialStateProperty.all<Color>(Colors.green), ), )

3) MaterialStateProperty.resolveAs
하나의 state에 대해서만 상태 변화 지정

3. Overlay 색상 설정

flutter에서는 버튼을 focus, hover, pressed할 때 물감처럼 퍼지는 효과(ink) 가 있는데
이를 overlay 속성이라고 한다.
overlay 색상도 상태별로 재지정할 수 있으며
따로 지정하지 않으면 기본 overlay 색상으로 버튼 색상이 바뀐다.

ElevatedButton( style: ButtonStyle( overlayColor: MaterialStateProperty.resolveWith(getColor), ), )

---

https://material.io/design/interaction/states.html#pressed

https://api.flutter.dev/flutter/material/MaterialStateProperty-class.html

MaterialStateProperty class - material library - Dart API

Material Design