Flutter; ElevatedButton으로 클릭 효과 구현 (MaterialStateProperty)

클릭시 눌리는 효과(버튼이 크기가 약간 줄어드는 효과)를 구현하기 위한 방법.

 

설명 생략.

ElevatedButton(
          onPressed: () {
          	//TODO: ClickEvent
          },
          style: ButtonStyle(
            alignment: Alignment.center,
            shape: MaterialStateProperty.all(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
            ),
            overlayColor: MaterialStateProperty.resolveWith(
                (states) => Colors.transparent),
            padding: MaterialStateProperty.all(
                const EdgeInsets.symmetric(horizontal: 15, vertical: 7)),
            backgroundColor: MaterialStateProperty.resolveWith(
              (states) {
                if (states.contains(MaterialState.pressed)) {
                  return const Color(0xFF282830);
                }
                return const Color(0xFF2D2D36);
              },
            ),
            foregroundColor: MaterialStateProperty.resolveWith(
              (states) {
                if (states.contains(MaterialState.pressed)) {
                  return const Color(0xFFAFAFB2);
                }
                return const Color(0xFFC3C3C6);
              },
            ),
            textStyle: MaterialStateProperty.resolveWith(
              (states) {
                if (states.contains(MaterialState.pressed)) {
                  return const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                  );
                }
                return const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                );
              },
            ),
          ),
          child: const Text(
            "Button",
          ),
        ),

 

 

아래는 컨테이너로 구현한 위와 동일한 효과의 버튼.

Flutter; Container로 커스텀 애니메이션 버튼 구현하기