[Flutter] ElevatedButton 시각적인 효과 완전히 제거

2024.08.19 작성

OS : macOs
개발환경 : Android Studio
개발언어 : Dart
프레임워크 : Flutter

ElevatedButton

버튼 눌렀을 때 아래와 같이 물결 효과(?)가 자꾸 나타났다.

보기 싫어....ㅠ ㅠ

기존 코드는 아래와 같다.

child: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.transparent,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(25),
                                ),
                                elevation: 0,
                                splashFactory: NoSplash.splashFactory
                            ),
                           

elevation랑 splashFactory 설정했지만, 그래도 계속 물결 효과가 나타났다.

그래서 아래와 같이 코드를 바꿨다. 이게 좋은 코드인지는 잘 모르겠다~~

child: ElevatedButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(Colors.transparent),
                          overlayColor: MaterialStateProperty.resolveWith<Color?>(
                                (Set<MaterialState> states) {
                              if (states.contains(MaterialState.pressed)) {
                                return Colors.transparent;
                              }
                              return null;
                            },
                          ),
                          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(25),
                            ),
                          ),
                          elevation: MaterialStateProperty.all(0),
                          shadowColor: MaterialStateProperty.all(Colors.transparent),
                          splashFactory: NoSplash.splashFactory,
                        ),

아무튼... 이렇게 설정하니까 이제 아래와 같이 물결 효과가 나타나지 않았다.

굿!!!

(+참고)
버튼 둘 다 눌렀을 때 같은 곳으로 이동하는 이유는 내가 임시로 그렇게 했기 때문이다.
오류 아님.