디자인시스템 버튼 비활성화를 구현하면서 마주친 트러블 슈팅

🧐 문제상황

 
정규식(번호, 이메일)에 맞는 값이 들어오면 버튼 활성화, 그렇지 않으면 버튼 비활성화를 구현했어야했다.  이때 확장성을 고려하여 단순 버튼 구현이 아닌 디자인 시스템을 구축하고 구축한 디자인 시스템의 UI컴포넌트를 가져다 쓰고 있는 상황이었다.
 

 
그런데 버튼을 비활성화할 때마다 계속 버튼이 사라지는 것이었다..ㅠ 구글링 및 코드를 뚫어지게 바라본 결과 이유를 찾게되었다.
 

---

☺️ 문제 원인 분석 및 해결

 
현재 내가 구축한 디자인시스템에서 isDisabled == true 이면 onPressed 액션을 null을 주어 버튼을 비활성화 했었다. 
 
https://stackoverflow.com/questions/78922775/flutter-elevated-button-not-displayed-after-setting-onpressed-to-null

Flutter Elevated Button not displayed after setting onPressed to null

위 스택오버플로우에 따르면 onPressed에 null을 설정하면, 기본적으로 ElevatedButton은 비활성화 상태로 전환되는데 이때 스타일 설정에서 disabled 상태에 대한 색상을 명시하지않으면 기본 disabledBackgroundColor 를 따르게 되어 기본 색상은 primary색상의 불투명도 약 0.3으로 바뀌게 된다. 따라서 검정 배경화면인 내 뷰에서 마치 사라지는 것처럼 보였던 것이다.
 

이미 내 코드에서는 isDisabled 상태에 따라 배경색을 분기처리하고 있는 코드가 있었기 때문에 disabledBackgroundColor를 설정해주기에는 로직적으로 수정해야할 부분이 많았다.
 

코드 변경과 로직변경 최소화하기 위해 위와 같이 잔꾀를 부려보았다. 아예 null을 주어 비활성화를 시키는 대신 비어있는 액션( (){} ) 을 주어 현재 코드는 유지하면서도 버튼이 디폴트 disabledBackgroundColor 로 배경색이 바뀌는 현상을 막아주었더니 원하는대로 버튼 활성화/비활성화 UI가 구현되었다.  오예 :)