Flutter에서 ButtonStyle 마스터하기 – 완벽 가이드

Flutter에서 버튼은 앱의 주요 상호작용 요소 중 하나입니다. 하지만 기본 버튼 스타일을 그대로 사용하는 경우 디자인이 다소 밋밋할 수 있습니다. 이번 글에서는 Flutter의 ButtonStyle을 활용해 다양한 스타일을 적용하는 방법을 정리해보겠습니다.

Flutter의 버튼 스타일링을 다룰 때 ButtonStyle을 이해하는 것이 핵심입니다. 이를 통해 색상, 크기, 패딩, 테두리, 그림자 등의 다양한 속성을 커스터마이징할 수 있습니다.

---

ButtonStyle 기본 개념

Flutter의 ButtonStyle은 ElevatedButton, TextButton, OutlinedButton 등에 공통적으로 적용할 수 있는 스타일 속성을 정의하는 클래스입니다. 즉, 버튼을 꾸밀 때 하나의 스타일을 여러 버튼에 적용할 수 있어 유지보수에 유리합니다.

ButtonStyle을 활용하면 다음과 같은 요소들을 제어할 수 있습니다:

• backgroundColor – 배경 색상
• foregroundColor – 텍스트 및 아이콘 색상
• overlayColor – 버튼을 터치했을 때 나타나는 색상 효과
• shadowColor – 그림자 색상
• elevation – 버튼의 입체감 정도
• padding – 내부 여백
• shape – 버튼의 모양 (둥근 모서리, 직사각형 등)
• side – 버튼 테두리 스타일

이제 각 속성을 예제 코드와 함께 살펴보겠습니다.

---

1. 기본 버튼 스타일 설정

Flutter에서 버튼을 스타일링하는 가장 간단한 방법은 style 속성을 활용하는 것입니다. 예를 들어, 다음과 같이 ButtonStyle을 직접 정의할 수 있습니다.

ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
    foregroundColor: MaterialStateProperty.all(Colors.white),
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(vertical: 12, horizontal: 24)),
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
  ),
  child: Text("기본 버튼"),
)

이 코드에서는 버튼의 배경색을 파란색, 글씨 색상을 흰색으로 설정했고, 여백과 텍스트 스타일을 지정했습니다.

---

2. 다양한 버튼 유형 스타일링

(1) ElevatedButton 스타일링

ElevatedButton은 기본적으로 그림자가 있는 입체적인 버튼입니다. 그림자 효과(elevation)를 조정하면 더 강조된 버튼을 만들 수 있습니다.

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
    shadowColor: Colors.black,
    elevation: 8, // 입체감 조정
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10), // 둥근 모서리
    ),
    padding: EdgeInsets.symmetric(vertical: 14, horizontal: 28),
  ),
  child: Text("입체 버튼"),
)

여기서 shadowColor와 elevation을 조절하여 버튼의 입체감을 조정했습니다.

---

(2) TextButton 스타일링

TextButton은 일반적으로 그림자 없이 깔끔한 텍스트만 있는 버튼입니다. 다음처럼 스타일을 적용할 수 있습니다.

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
    textStyle: TextStyle(fontSize: 16),
  ),
  child: Text("텍스트 버튼"),
)

---

(3) OutlinedButton 스타일링

테두리가 있는 OutlinedButton도 쉽게 커스터마이징할 수 있습니다.

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    foregroundColor: Colors.red,
    side: BorderSide(color: Colors.red, width: 2), // 테두리 색상 및 두께 설정
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
    padding: EdgeInsets.symmetric(vertical: 12, horizontal: 20),
  ),
  child: Text("테두리 버튼"),
)

이 버튼은 테두리 색상을 강조하는 스타일을 적용했습니다.

---

3. MaterialStateProperty로 다양한 상태별 스타일 설정

MaterialStateProperty를 사용하면 버튼의 상태에 따라 동적으로 스타일을 변경할 수 있습니다.

예를 들어, 버튼이 눌렸을 때 색상을 다르게 지정할 수 있습니다.

ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.pressed)) {
        return Colors.orange; // 눌렸을 때 색상
      }
      return Colors.blue; // 기본 색상
    }),
  ),
  child: Text("상태 변경 버튼"),
)

이 방식은 버튼의 다양한 상태를 관리하는 데 유용합니다.

---

4. 공통 ButtonStyle 정의하여 여러 버튼에 적용하기

반복적으로 ButtonStyle을 작성하는 것은 비효율적입니다. 이를 해결하려면 ThemeData를 활용하여 앱 전체의 버튼 스타일을 통일할 수 있습니다.

final ButtonStyle commonButtonStyle = ElevatedButton.styleFrom(
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8),
  ),
);

ElevatedButton(
  onPressed: () {},
  style: commonButtonStyle,
  child: Text("공통 버튼 1"),
);

ElevatedButton(
  onPressed: () {},
  style: commonButtonStyle,
  child: Text("공통 버튼 2"),
);

이렇게 하면 일관된 스타일을 유지하면서, 필요할 때마다 스타일을 수정하기 편리합니다.

---

마무리하며

Flutter에서 버튼 스타일을 효과적으로 다루는 방법을 알아봤습니다. ButtonStyle을 사용하면 원하는 디자인을 자유롭게 적용할 수 있으며, MaterialStateProperty를 활용하면 상태별 스타일 조정도 가능합니다.

이번 기회에 ElevatedButton, TextButton, OutlinedButton을 직접 실습해 보며, 자신만의 스타일을 만들어보는 것도 좋은 연습이 될 것입니다. 앞으로 Flutter 프로젝트에서 버튼을 꾸밀 때 유용하게 활용하길 바랍니다!