[Widget] MaterialStateProperty of Button

✔️ State 에 따라서 Button의 state에 맞는 시각적인 요소를 지정할 수 있다.

 

Material Design에서 지정하고 있는 버튼의 상태

 

- enabled : 상호작용 가능한 버튼 상태

- pressed : 사용자가 탭 했을 때

- hover : 사용자가 마우스 커서를 상호작용 가능한 버튼 위에 올려두었을 때

- focus : 사용자가 키보드나 음성과 같은 입력 방법을 사용해서 강조표시한 상태 

- disable : 상호작용 불가한 버튼 상태

 

 

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

 

1) MaterialStateProperty.resolvewith : State 별로 상태 변화를 지정할 수 있다.

 

(개인적인 코드 방식)

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']; 
   } 
 }

 

(공식 Document)

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에 대해서만 상태 변화 지정

 

 

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