Flutter에서 Switch 위젯을 사용하는 방법은 무엇인가요?

Q1: Flutter에서 Switch 위젯이란 무엇인가요?
A1: Switch 위젯은 iOS와 Android에서 흔히 볼 수 있는 스위치 토글 버튼으로, 사용자가 켜기/끄기 상태를 전환할 수 있도록 합니다. 주로 boolean 상태를 나타내고 조작하는 데 사용됩니다.

Q2: Switch 위젯 기본 사용법은 어떻게 되나요?
A2: Switch 위젯은 `value`와 `onChanged` 두 가지 주요 속성이 필요합니다.
```dart
bool isSwitched = false;

Switch(
value: isSwitched,
onChanged: (bool newValue) {
setState(() {
isSwitched = newValue;
});
},
);
```
이처럼 값과 변경 콜백을 설정하여 상태 변화를 반영합니다.

Q3: Switch 위젯에서 상태 관리는 어떻게 해야 하나요?
A3: 보통 `StatefulWidget` 내부에서 boolean 변수를 관리하며, `setState()`를 사용해 값을 변경하면 스위치 상태가 화면에 반영됩니다.

Q4: Switch를 비활성화(disable)하려면 어떻게 해야 하나요?
A4: `onChanged`에 `null`을 할당하면 스위치가 비활성화됩니다. 예:
```dart
Switch(
value: isSwitched,
onChanged: null, // 비활성화
);
```

Q5: Switch 색상은 어떻게 변경하나요?
A5: 기본 색상은 `activeColor`(켜짐 상태 색상), `inactiveThumbColor`(꺼짐 상태 thumb 색상), `inactiveTrackColor`(꺼짐 상태 트랙 색상) 속성으로 조정할 수 있습니다. 예:
```dart
Switch(
value: isSwitched,
onChanged: onChangedCallback,
activeColor: Colors.green,
inactiveThumbColor: Colors.grey,
inactiveTrackColor: Colors.black12,
);
```
Q6: Switch와 SwitchListTile의 차이점은 무엇인가요?
A6: Switch는 스위치만 표시하지만, SwitchListTile은 타이틀 텍스트와 함께 리스트 항목 형태로 스위치를 표시하는 위젯입니다. 레이블과 스위치를 한 번에 배치할 때 유용합니다.

Q7: Switch 사용 시 주의할 점은?
A7:
- 스위치의 상태 변경 시 반드시 상태관리를 해주어야 UI가 올바르게 업데이트됩니다.
- `setState()` 호출 없이 상태를 변경하면 스위치가 반응하지 않습니다.
- 접근성을 고려해 레이블 텍스트를 별도로 추가하거나 SwitchListTile을 사용하는 것이 좋습니다.

Q8: Switch에 커스텀 애니메이션을 추가할 수 있나요?
A8: Switch 위젯 자체는 기본 애니메이션을 내장하지만, 복잡한 애니메이션을 원한다면 직접 커스텀 위젯을 만들거나 `AnimatedSwitcher` 같은 위젯을 활용할 수 있습니다.

Q9: 예제를 보여주세요.
A9:
```dart
class SwitchExample extends StatefulWidget {
@override
_SwitchExampleState createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State {
bool isSwitched = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Switch 예제')),
body: Center(
child: Switch(
value: isSwitched,
onChanged: (value) {
setState(() {
isSwitched = value;
});
},
activeColor: Colors.blue,
inactiveThumbColor: Colors.grey,
),
),
);
}
}
```
이처럼 상태 변수를 선언하고 `setState()` 내에서 값을 바꾸면서 Switch를 구현할 수 있습니다.

플러터에서 지도 기능을 추가하는 방법은 무엇인가요?

플러터에서 위젯의 성능을 최적화하는 방법은 무엇인가요?

Flutter에서 `Switch` 위젯은 사용자가 두 가지 상태(켜짐/꺼짐) 중 하나를 선택할 수 있도록 하는 토글 스위치를 제공합니다.

이 위젯은 주로 설정 화면이나 옵션을 선택할 때 사용됩니다.

`Switch` 위젯을 사용하는 방법에 대해 자세히 알아보겠습니다.

1. 기본 사용법 `Switch` 위젯은 `value`와 `onChanged` 속성을 사용하여 상태를 관리합니다.

`value`는 스위치의 현재 상태를 나타내며, `onChanged`는 사용자가 스위치를 변경할 때 호출되는 콜백 함수입니다.

```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Switch Example')), body: SwitchExample(), ), ); } } class SwitchExample extends StatefulWidget { @override _SwitchExampleState createState() => _SwitchExampleState(); } class _SwitchExampleState extends State { bool _isSwitched = false; @override Widget build(BuildContext context) { return Center( child: Switch( value: _isSwitched, onChanged: (value) { setState(() { _isSwitched = value; }); }, ), ); } } ```

2. 상태 관리 위의 예제에서 `_isSwitched` 변수를 사용하여 스위치의 상태를 관리합니다.

사용자가 스위치를 변경하면 `onChanged` 콜백이 호출되고, `setState`를 통해 UI가 업데이트됩니다.



3. 스타일링 `Switch` 위젯은 기본적으로 제공되는 스타일 외에도 다양한 속성을 통해 커스터마이징할 수 있습니다.

예를 들어, `activeColor`, `inactiveThumbColor`, `inactiveTrackColor` 등을 사용하여 스위치의 색상을 변경할 수 있습니다.

```dart Switch( value: _isSwitched, onChanged: (value) { setState(() { _isSwitched = value; }); }, activeColor: Colors.green, inactiveThumbColor: Colors.red, inactiveTrackColor: Colors.grey, ) ```

4. 텍스트와 함께 사용하기 스위치와 함께 텍스트를 표시하려면 `Row` 위젯을 사용하여 스위치와 텍스트를 나란히 배치할 수 있습니다.

```dart Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Switch is ${_isSwitched ? "ON" : "OFF"}'), Switch( value: _isSwitched, onChanged: (value) { setState(() { _isSwitched = value; }); }, ), ], ) ```

5. 다크 모드 지원 Flutter는 다크 모드를 지원하므로, 스위치의 색상은 시스템의 테마에 따라 자동으로 조정됩니다.

이를 통해 사용자에게 일관된 경험을 제공할 수 있습니다.



6. 접근성 `Switch` 위젯은 접근성을 고려하여 설계되었습니다.

스위치의 상태를 설명하는 `semanticLabel` 속성을 추가하여 스크린 리더가 상태를 설명할 수 있도록 할 수 있습니다.

```dart Switch( value: _isSwitched, onChanged: (value) { setState(() { _isSwitched = value; }); }, semanticLabel: _isSwitched ? 'Turn off' : 'Turn on', ) ```

7. Flutter에서 `Switch` 위젯은 간단하면서도 강력한 기능을 제공하여 사용자 인터페이스를 직관적으로 만들 수 있습니다.

상태 관리, 스타일링, 접근성 등을 고려하여 다양한 방식으로 활용할 수 있습니다.

위의 예제를 바탕으로 필요에 맞게 커스터마이징하여 사용할 수 있습니다.