Flutter ElevatedButton - overlayColor 다양한 효과 주기

flutter의 elevatedButton을 꾸미는 스타일을 보면 overlayColor라는 효과가 있다. '

 

/// The highlight color that's typically used to indicate that
/// the button is focused, hovered, or pressed.
final MaterialStateProperty<Color?>? overlayColor;

위와 같이 색상을 입력하면 됩니다 라는 식의 설명이 쓰여있다. 그렇다면 어떻게 이걸 잘 이용해서 다양한 효과를 줄 수 있을까? 

 

 

MaterialState

ElevatedButton(
            onPressed: () {},
            style: ButtonStyle(
              overlayColor: MaterialStateProperty.resolveWith(
                (states) {
                  return states.contains(MaterialState.pressed)
                      ? style.backgroundColor?.withOpacity(0.1)
                      : null;
                },
              ),
            ),
            child: const Text(
              'Elevated Button',
              style: TextStyle(fontSize: 20),
            ),
          ),

 

방법은 바로 위와 같다. "MaterialState.기능" 을 통해 버튼 스타일을 지정해 주면 된다.

MaterialState 에는 hovered, focused, pressed, dragged, selected, scrolledUnder, disable, error 등이 있다.

원하는 기능을 써서 효과를 잘 주면 될 것 같다!