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 프로젝트에서 버튼을 꾸밀 때 유용하게 활용하길 바랍니다!