[Flutter] TextButton widget의 padding 기본값 없애는 방법

someng·2022년 5월 5일
1

Flutter

목록 보기
6/8

Flutter에서 TextButton을 구현할 때
"디자인대로 구현을 분명히 했는데..🤔 왜 TextButton이 더 크게 구현되지?"
하고 당황하는 경우가 종종 있다.

구글링 끝에 찾은, 내가 자주 사용하는 해결법을 정리해 보려고 한다! 🤓

원인

구현된 TextButton을 눌러보면 splashColor가 나타나는데 그 범위가 내가 부여한 범위보다 넓다..! 이건 바로바로 TextButton widget이 디폴트로 갖고 있는 padding 때문이다.
"나는 TextButton의 기본 padding 사용 안하고, 디자인대로 구현하고 시펑!" 이라고 생각한다면 다음과 같은 코드를 추가하면 된다.

해결법

TextButton(
  onPressed: (){},
  child: ,
  style: TextButton.styleFrom(
    minimumSize: Size.zero,
    padding: EdgeInsets.zero,
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
)

위 사진처럼 TextButton의 style 속성에 코드를 추가해주면 된다!!

profile
👩🏻‍💻 iOS Developer

0개의 댓글