# 토글 버튼 (Toggle Button)

## Standard Toggle Button

<figure><img src="/files/Dk0na3zDR4O3QfYx5yUL" 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="/files/uaKByvjnkUP8Ij5cEZ0U" alt=""><figcaption></figcaption></figure>

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

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

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

## Toggle Buttons

<figure><img src="/files/BebwiR0rVsNmtMT8F78T" 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을 사용하여 앱의 기능을 개선하고 사용자와의 상호작용을 개선하세요.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/toggle-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.