토글 버튼 (Toggle Button)

Flutter는 사용자와의 상호작용을 강화하고 앱의 기능을 확장하기 위한 다양한 위젯을 제공합니다. 이 중에서 Toggle Button 위젯은 특히 상태 전환 및 설정 변경에 유용합니다. 이 글에서는 Flutter의 다양한 Toggle Button 위젯을 살펴보고 활용하는 방법을 소개하겠습니다.

Standard Toggle Button

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

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

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

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

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

Toggle Buttons

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

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을 사용하여 앱의 기능을 개선하고 사용자와의 상호작용을 개선하세요.