# 토글 버튼 (Toggle Button)

## Standard Toggle Button

<figure><img src="https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FfO0anMJnsh1DNNKothA7%2F%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB%E1%84%90%E1%85%A9%E1%84%80%E1%85%B3%E1%86%AF.gif?alt=media&#x26;token=19c3604d-b2af-46ca-b474-eb151cfe3f05" alt=""><figcaption></figcaption></figure>

기본형 토글 버튼은 가장 간단한 형태의 토글 버튼을 생성합니다. 다음은 Standard Toggle Button의 예제입니다.

```dart
StandardToggleButton(
  onChanged: (bool) {},
  activeColor: Colors.green,
  inactiveColor: Colors.grey,
  width: 50.0,
  height: 30.0,
  activeText: '',
  inactiveText: '',
  borderRadius: 20,
  enabled: enabled,
);
```

위 코드에서는 StandardToggleButton을 생성하고, 활성화 및 비활성화 상태의 색상, 크기, 텍스트 등을 설정할 수 있습니다.

## Material Toggle Button&#x20;

<figure><img src="https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FxKJS1thoymLrS76VDV7x%2F%E1%84%86%E1%85%A5%E1%84%90%E1%85%A5%E1%84%85%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AF%20%E1%84%90%E1%85%A9%E1%84%80%E1%85%B3%E1%86%AF.gif?alt=media&#x26;token=940d7480-ea9b-45f0-a37a-52eb0ef1befd" alt=""><figcaption></figcaption></figure>

머터리얼 디자인의 토글 버튼은 머터리얼 디자인 가이드라인에 따라 디자인된 토글 버튼을 생성합니다.

```dart
MaterialToggleButton(
  onChanged: (bool) {},
  value: isSwitched,
);
```

위 코드에서는 MaterialToggleButton을 생성하고, 현재 상태를 제어할 value 속성을 설정합니다.

## Toggle Buttons

<figure><img src="https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F6a9HTMDLPoTmXGfJwYJD%2F%E1%84%90%E1%85%A9%E1%84%80%E1%85%B3%E1%86%AF%20%E1%84%87%E1%85%A5%E1%84%90%E1%85%B3%E1%86%AB.gif?alt=media&#x26;token=767c15bd-5e49-4528-95ae-c65bf03d0daa" alt=""><figcaption></figcaption></figure>

다중 선택이 가능한 토글 버튼은 여러 항목 중에서 하나 이상을 선택할 수 있는 토글 버튼 그룹을 생성합니다.

```dart
ToggleButtons(
  textStyle: TextStyle(fontSize: 20),
  color: agnesTheme.primaryColor,
  selectedColor: Colors.cyan,
  selectedBorderColor: Colors.cyan,
  fillColor: Colors.white,
  borderColor: agnesTheme.primaryColor,
  borderRadius: BorderRadius.circular(12),
  borderWidth: 3,
  isSelected: isSelected,
  children: <Widget>[
    Icon(Icons.access_alarms),
    Text('a'),
    Text('2'),
    Text('!'),
    Icon(Icons.check),
  ],
  onPressed: (index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
);
```

위 코드에서는 ToggleButtons를 생성하고, 텍스트 및 아이콘과 함께 사용자에게 여러 선택 옵션을 제공합니다.

Flutter의 Toggle Button 위젯은 사용자와의 상호작용을 향상시키고 설정 변경을 용이하게 만드는 데 유용합니다. 각각의 위젯은 다양한 디자인 및 설정 옵션을 제공하여 앱의 사용자 경험을 향상시키는 데 도움을 줍니다.

위에서 설명한 내용을 참고하여 Flutter 앱에서 다양한 형태의 Toggle Button 위젯을 구현하고 활용하는 방법을 소개했습니다. Toggle Button을 사용하여 앱의 기능을 개선하고 사용자와의 상호작용을 개선하세요.