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로 커스텀 애니메이션 버튼 구현하기

    플러터에서 버튼의 종류는 TextButton, ElevatedButton, OutlinedButton이 세가지이다. 위 세가지 버튼에도 클릭시 기본 효과가 존재하지만, 내가 원하는 느낌은 눌려서 작아지는 느낌이었다. 그래서 두고두

    sosomia01.tistory.com

     

    댓글