> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/button.md).
# 버튼 (Button)
## 일반 버튼
플러터에서 자체적으로 제공하는 기본 위젯으로 TextButton, MaterialButton 등이 있습니다.
### TextButton
텍스트가 들어간 간단한 버튼을 나타냅니다. 사용자의 터치에 반응하며, 텍스트 버튼을 누를 때마다 특정 동작을 수행할 수 있습니다.
```dart
TextButton(
onPressed: () => {
// 버튼 클릭 시 실행될 동작
},
child: Text('Text Button'),
);
```
TextButton은 텍스트 스타일링 및 기능을 수정할 수 있으며, 다양한 커스터마이징 기능을 지원합니다.
### Material Button
머터리얼 디자인의 버튼을 나타냅니다. 머터리얼 버튼은 물결 효과와 함께 사용자의 터치에 응답합니다.
```dart
MaterialButton(
onPressed: () {
// 버튼 클릭 시 실행될 동작
},
splashColor: theme.primaryColor,
child: Text('Material Button'),
);
```
머터리얼 버튼은 물결 효과와 버튼 스타일링을 지원하며, 앱의 일관된 디자인을 유지하는 데 도움이 됩니다.
### Elevated Button
입체감 있는 버튼을 나타냅니다. 사용자의 주목을 끌고 터치에 반응합니다.
```dart
ElevatedButton(
onPressed: () => {
// 버튼 클릭 시 실행될 동작
},
child: Text('Elevated Button'),
);
```
배경색 및 텍스트 스타일을 수정할 수 있으며, 주로 중요한 작업을 나타내는 데 사용됩니다.
### Outlined Button
테두리가 있는 버튼을 나타냅니다. 클릭 가능한 영역이 강조되어 표시되며, 주로 보조 작업을 수행하는 버튼으로 사용됩니다.
```dart
OutlinedButton(
onPressed: () => {
// 버튼 클릭 시 실행될 동작
},
child: Text('Outlined Button'),
);
OutlinedButton.icon(
icon:
Icon(Icons.backspace, size: Theme.of(context).iconTheme.size),
label: Text('Back'),
onPressed: () {},
);
```
* **OutlinedButton** : 테두리가 있는 버튼을 구현합니다.
* **OutlinedButton.icon** : 아이콘을 포함한 테두리가 있는 버튼을 구현합니다.
테두리 색상 및 라인 두께를 지정할 수 있으며, 앱의 디자인에 따라 다양하게 스타일링 할 수 있습니다.
### Floating Action Button
화면의 고정된 위치에 배치되어 사용자에게 빠른 액션 수행을 허용합니다.
```dart
FloatingActionButton(
backgroundColor: theme.primaryColor,
onPressed: () => {
// 버튼 클릭 시 실행될 동작
},
child: Icon(Icons.add),
);
```
텍스트와 아이콘을 함께 사용하여 빠르게 작업을 수행할 수 있으며, 화면의 고정된 위치에 배치하여 사용자 경험을 향상시킵니다.
### Icon Button
아이콘을 사용하여 버튼 기능을 제공합니다. 주로 아이콘과 함께 작은 작업을 수행하는 데 사용됩니다.
```dart
IconButton(
onPressed: () => {
// 버튼 클릭 시 실행될 동작
},
icon: Icon(Icons.check),
);
```
아이콘 스타일링과 함께 아이콘을 눌렀을 때의 동작을 정의할 수 있으며, 앱의 아이콘 기능을 강화하는 데 사용됩니다.
### Dropdown Button
여러 선택지 중 하나를 선택하는 데 사용됩니다. 사용자가 버튼을 누르면 선택지 목록이 나타납니다.
```dart
DropdownButton(
value: dropdownValue,
items: dropdownList.map((String value) {
// 드롭다운 버튼에 들어갈 아이템을 지정합니다.
return DropdownMenuItem(
child: Text('$value'),
value: value,
);
}).toList(),
onChanged: (dynamic value) {
setState(() {
dropdownValue = value;
});
},
);
```
선택지 목록을 커스터마이징 하고, 선택한 값을 저장하는 데 사용됩니다.
## 커스텀 버튼
### TextFlat Button
텍스트가 들어간 간단한 버튼을 나타냅니다. 사용자의 터치에 반응하며, 텍스트 버튼을 누를 때마다 특정 동작을 수행할 수 있습니다.
```dart
TextFlatButton(
onPressed: () => {
// 버튼 클릭 시 실행될 동작
},
text: Text("TextFlat Button"),
);
```
텍스트 스타일링 및 기능을 수정할 수 있으며, 사용자에게 명확한 텍스트 버튼을 제공합니다.
### MiddleSize Button
중간 크기의 버튼을 나타냅니다. 이 버튼은 사용자에게 중요한 작업을 나타내는 데 사용될 수 있으며, onPressed 속성을 통해 동작을 설정할 수 있습니다.
```dart
MiddleSizeButton(
title: "MiddleSize Button",
onPressed: () {
// 버튼 클릭 시 실행될 동작
},
);
```
사용자에게 미리 정의된 크기의 버튼을 제공하며, 디자인을 단순하게 유지하는 데 도움이 됩니다.
### Gradation Button
그라데이션 스타일을 적용할 수 있는 버튼을 나타냅니다. 그라데이션은 버튼을 시각적으로 더 돋보이게 만들어줍니다.
```dart
GradationButton(
onPressed: () {
// 버튼 클릭 시 실행될 동작
},
);
```
그라데이션 효과를 적용하고 사용자에게 시각적으로 눈에 띄는 버튼을 제공합니다.
### OutlineAction Button
테두리 스타일을 적용할 수 있는 버튼을 나타냅니다. 테두리는 버튼의 윤곽을 강조하고 클릭 가능한 영역을 시각적으로 나타냅니다.
```dart
OutlineActionButton(
title: "OutlineAction Button",
onPressed: () => {
// 버튼 클릭 시 실행될 동작
},
);
```
테두리 색상과 스타일을 커스터마이징 할 수 있으며, 사용자에게 선택할 수 있는 옵션을 제공할 때 유용합니다.
### OutlineAction Button with Icon
아이콘을 포함하여 테두리 스타일을 적용할 수 있습니다. 아이콘은 버튼의 기능을 더 잘 표현하는 데 도움이 됩니다.
```dart
OutlineActionButton(
title: "OutlineAction Button with Icon",
icon: Assets.check,
onPressed: () => {
// 버튼 클릭 시 실행될 동작
},
);
```
아이콘과 텍스트를 함께 사용하여 사용자가 쉽게 이해하고 상호작용할 수 있는 버튼을 만들 수 있습니다.
## 애니메이션 버튼
애니메이션 효과를 포함한 버튼을 개발할 수 있습니다.
### Like Button
"좋아요" 버튼을 구현하는 데 사용됩니다. 사용자가 "좋아요" 를 표시하거나 취소할 수 있으며, "좋아요" 상태에 따라 버튼의 모양이 변경됩니다.
```dart
LikeButton(isLiked: true);
```
사용자에게 즉각적인 피드백을 제공하고, 사용자의 상호작용에 따라 버튼을 업데이트합니다.
### LoadingButton
로딩 진행 상황및 완료 여부를 나타내는 버튼입니다. 이 버튼은 주로 시간이 걸리는 작업을 수행하는 동안 사용됩니다.
```dart
LoadingButton(
successIcon: Icons.check,
child: Text('Loading Button', style: TextStyle(color: Colors.white)),
controller: btnController,
onPressed: () => {
loading(btnController),
},
);
```
버튼의 상태를 제어하는 컨트롤러를 통해 사용됩니다. 사용자에게 로딩 중임을 표시하고, 작업이 완료되면 완료 아이콘과 함께 알림을 제공합니다.
## SNS 버튼 (Apple, Google, Facebook, Twitter, Kakao, Naver, LINE)
SNS(Social Networking Service) 계정으로 로그인할 수 있는 다양한 버튼 위젯을 만들 수 있습니다. 예를 들어, 아래와 같이 IconButton 과 SignInButton 을 사용하여 SNS 로그인 버튼을 구현할 수 있습니다.
### IconButton
다양한 SNS 로고를 포함한 아이콘 버튼을 제공합니다. 각 버튼을 클릭하면 해당 SNS로 로그인할 수 있습니다.
```dart
IconButton(
iconSize: 24,
icon: Image.asset('assets/png/apple_logo.png'),
onPressed: () => {
// Apple 로그인 버튼 클릭 시 실행될 동작
},
);
```
위와 같이 각 ***`IconButton`***은 해당 SNS 로고와 함께 사용자에게 시각적으로 인식 가능한 로그인 옵션을 제공합니다.
### SignInButton
특정 SNS 계정으로 로그인할 수 있는 버튼을 구현하는데 사용됩니다. 다양한 SNS 옵션을 제공하며, 각각의 버튼을 클릭하면 해당 SNS 계정으로 로그인할 수 있습니다.
```dart
SignInButton(
Buttons.apple,
text: 'Sign in with Apple',
onPressed: () {
// Apple 계정으로 로그인할 때 실행될 동작
},
);
```
위와 같이 ***`SignInButton`***은 SNS 로그인 옵션을 텍스트와 함께 제공하며, 버튼을 클릭하면 해당 계정으로 로그인할 수 있습니다.
다양한 SNS 로그인 버튼 위젯을 사용하여 사용자가 원하는 SNS 계정으로 로그인하고 앱을 편리하게 이용할 수 있도록 할 수 있습니다. 이러한 버튼 위젯을 통해 사용자 경험을 향상시키고 앱의 기능을 확장해보세요.
다양한 버튼 위젯을 활용하여 Flutter 앱의 사용자 인터페이스를 보다 다채롭게 디자인하고 사용자 경험을 향상시킬 수 있습니다. 또한 다양한 상황에서 사용자 경험을 개선하고 유용한 상호작용을 제공합니다. 앱의 요구사항에 따라 이러한 버튼을 적절하게 활용하여 필요에 맞는 버튼 위젯을 사용해 앱을 개발할 수 있습니다.