Flutter FloatingActionButton 터치 시 버튼 모양 불일치 해결하기

문제 상황

Flutter에서 FloatingActionButton을 사용할 때, 버튼을 터치하면 사각형 모양의 ripple effect(물결 효과)가 보이는 경우가 있습니다. 버튼은 원형인데 터치 효과가 사각형으로 보이면 UI가 어색해 보이죠.

 

문제의 화면

오른쪽 화면은 터치한 상태의 화면

 

원인

이 현상이 발생하는 이유는 Material Design의 터치 피드백 처리 방식 때문입니다. FloatingActionButton이 Container 안에 직접 들어있을 때는 기본적으로 사각형 영역에 대해 ripple effect가 적용됩니다.

 

아래 코드는 FloatingActionButton이 Container 안에 직접 들어있을 코드 예제입니다.

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(...),
    borderRadius: BorderRadius.circular(28),
  ),
  child: FloatingActionButton(
    onPressed: () => {},
    backgroundColor: Colors.transparent,
    elevation: 0,
    child: Icon(Icons.edit_outlined),
  ),
)

 

 

해결 방법

shape 옵션과 CircleBorder를 활용하여 이 문제를 해결할 수 있습니다.

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(...),
    borderRadius: BorderRadius.circular(28),
  ),
  child: FloatingActionButton(
    onPressed: () => {},
    backgroundColor: Colors.transparent,
    elevation: 0,
    shape: const CircleBorder(),  // CircleBorder을 추가한다.
    child: Icon(Icons.edit_outlined),
  ),
)

 

 

수정한 화면

 

 

만약 원형이 아니라 모서리가 둥근 사각형이라면 RoundedRectangleBorder을 사용하면 됩니다. 

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(...),
    borderRadius: BorderRadius.circular(16),  // 버튼 영역의 모서리 둥글기
  ),
  child: FloatingActionButton(
    onPressed: () => {},
    backgroundColor: Colors.transparent,
    elevation: 0,
    shape: RoundedRectangleBorder(  // RoundedRectangleBorder로 변경한다.
      borderRadius: BorderRadius.circular(16),  // 모서리 둥글기를 버튼 영역과 동일하게 설정
    ),
    child: Icon(Icons.edit_outlined),
  ),
)

 

이때 둥글기 정도는 버튼 영역과 일치해야 합니다.

 

 

버튼을 사각형으로 수정한 화면

 

 

정리

FloatingActionButton의 ripple effect 문제는 UI 완성도를 떨어뜨릴 수 있지만, shape 속성을 이용하면 깔끔하게 해결할 수 있습니다.