각 버튼마다 고유한 특징과 용도를 가지고 있으며, 상황에 맞는 버튼을 선택하여 사용하는 것이 중요합니다.
이 블로그에서는 Flutter에서 제공하는 주요 버튼 종류와 각 버튼의 특징, 활용법에 대해 자세히 살펴보겠습니다.
1. 기본 버튼
ElevatedButton: 가장 일반적인 버튼으로, 눌렀을 때 눌린 느낌을 주는 3D 효과를 제공합니다. 주요 기능이나 중요한 작업을 수행하는 버튼으로 사용하기 적합합니다.
ElevatedButton(
onPressed: () {
print('ElevatedButton 클릭됨');
},
child: Text('ElevatedButton'),
),
OutlinedButton: 테두리만 있는 버튼으로, 주요 기능 외의 보조적인 작업을 수행하는 버튼으로 사용하기 적합합니다.
OutlinedButton(
onPressed: () {
print('OutlinedButton 클릭됨');
},
child: Text('OutlinedButton'),
),
TextButton: 텍스트만 있는 간단한 버튼으로, 덜 중요하거나 자주 사용하는 작업을 수행하는 버튼으로 사용하기 적합합니다.
TextButton(
onPressed: () {
print('TextButton 클릭됨');
},
child: Text('TextButton'),
),
IconButton: 아이콘만 있는 버튼으로, 공간을 절약하고 간단한 작업을 수행하는 버튼으로 사용하기 적합합니다.
IconButton(
onPressed: () {
print('IconButton 클릭됨');
},
icon: Icon(Icons.home),
),
FloatingActionButton: 화면 오른쪽 아래에 표시되는 버튼으로, 주요 기능이나 중요한 작업을 강조하기 위해 사용됩니다.
FloatingActionButton(
onPressed: () {
print('FloatingActionButton 클릭됨');
},
child: Icon(Icons.add),
),
2. 특수 버튼
RawMaterialButton: 기본적인 버튼 기능만 제공하는 버튼으로, 원하는 디자인을 직접 구현해야 합니다.
RawMaterialButton(
onPressed: () {
print('RawMaterialButton 클릭됨');
},
child: Text('RawMaterialButton'),
fillColor: Colors.blue,
splashColor: Colors.yellow,
),
CustomButton: 완전히 사용자 정의 가능한 버튼으로, 원하는 기능, 디자인, 애니메이션 등을 자유롭게 구현할 수 있습니다.
class CustomButton extends StatelessWidget {
const CustomButton({
Key? key,
required this.onPressed,
required this.child,
}) : super(key: key);
final VoidCallback onPressed;
final Widget child;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed,
child: Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(30.0),
),
child: child,
),
);
}
}
3. 버튼 속성
각 버튼 종류에는 공통적으로 사용할 수 있는 다양한 속성들이 있습니다.
- onPressed: 버튼 클릭 시 실행할 함수를 지정합니다.
- child: 버튼에 표시할 위젯을 지정합니다.
- style: 버튼의 스타일을 설정합니다. 배경색, 글자색, 여백, 모양 등을 변경할 수 있습니다.
- padding: 버튼 주변 여백을 설정합니다.
- splashColor: 버튼 눌렀을 때 표시되는 물결 효과 색상을 설정합니다.
- tooltip: 버튼에 대한 설명 텍스트를 설정합니다.
4. 활용 예시 (계속)
Scaffold(
appBar: AppBar(
title: Text('버튼 예시'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
print('기본 버튼 클릭됨');
},
child: Text('기본 버튼'),
),
SizedBox(height: 20.0),
OutlinedButton(
onPressed: () {
print('테두리 버튼 클릭됨');
},
child: Text('테두리 버튼'),
),
SizedBox(height: 20.0),
TextButton(
onPressed: () {
print('텍스트 버튼 클릭됨');
},
child: Text('텍스트 버튼'),
),
SizedBox(height: 20.0),
IconButton(
onPressed: () {
print('아이콘 버튼 클릭됨');
},
icon: Icon(Icons.favorite),
),
SizedBox(height: 20.0),
FloatingActionButton(
onPressed: () {
print('플로팅 버튼 클릭됨');
},
child: Icon(Icons.add),
),
],
),
),
);
이 코드는 다양한 버튼 종류를 화면 중앙에 배치하고, 각 버튼을 클릭했을 때 메시지를 출력하는 예시입니다.
실제 상황에서는 각 버튼에 적절한 기능을 연결하고, 디자인을 조정하여 사용자 인터페이스를 구현해야 합니다.
5. 마무리
Flutter는 다양한 버튼 종류와 속성을 제공하여 개발자가 원하는 디자인과 기능을 쉽게 구현할 수 있도록 지원합니다.
적절한 버튼을 선택하고 활용하여 사용자 경험을 향상시키고 매력적인 인터페이스를 만들 수 있습니다.
이 블로그 포스팅이 Flutter에서 버튼을 사용하는 데 도움이 되었기를 바랍니다.
궁금한 점이나 추가적으로 알고 싶은 내용이 있으면 언제든지 질문해주세요.
'Flutter > Widget' 카테고리의 다른 글
플러터에서 FAB 확장이란? FloatingActionButton(FAB) (0) | 2024.07.17 |
---|---|
플러터에서 CustomButton 만들기: 심화 가이드 및 활용 예시 (0) | 2024.07.17 |
플러터에서 FloatingActionButton 사용하기: 가이드 및 활용 예시 (0) | 2024.07.17 |
플러터에서 RawMaterialButton 사용하기: 가이드 및 활용 예시 (0) | 2024.07.16 |
플러터에서 OutlinedButton 사용하기: 가이드 및 활용 예시 (0) | 2024.07.16 |