프로그래밍/Flutter

[ Flutter Widget ] 플러터 기본위젯 - Switch

호랑이탈 2025. 1. 14. 12:24
반응형

Flutter 기본위젯 Switch

 

1.  Switch 정의

Switch는 Flutter에서 사용자가 두 가지 상태(주로 on/off 또는 true/false)를 전환할 수 있는 토글 컨트롤입니다. 일반적으로 사용자는 Switch를 탭하거나 드래그하여 상태를 변경합니다.
Switch는 모바일 및 웹 애플리케이션에서 흔히 사용되는 UI 컴포넌트로, 설정 화면 또는 기능 활성화/비활성화와 같은 간단한 이진 선택을 제공할 때 유용합니다.

2. Switch의 특징

  1. 이진 상태 관리
    • Switch는 두 가지 상태(on/off)만을 표현하며, 복잡한 선택 대신 단순한 상태 변경에 적합합니다.
  2. 직관적인 사용자 경험(UX)
    • 사용자가 시각적으로 즉각적인 피드백을 받을 수 있도록, 상태에 따라 색상과 모양이 변경됩니다.
  3. 디자인 일관성
    • Flutter의 Switch는 Material Design 원칙에 기반하여 디자인되어, 모던하고 일관된 UI를 제공합니다.
  4. 사용자 상호작용
    • 상태 전환 시 애니메이션 효과가 포함되어 있어 자연스러운 인터랙션을 제공합니다.

 

3. Switch의 사용 사례

  • 설정 화면  - 예: 알림 기능 활성화/비활성화, 다크 모드 전환
  • 기능 토글 - 예: GPS 활성화, 자동 업데이트 켜기/끄기
  • UI 커스터마이징 옵션 - 예: 테마 색상 변경, 사용자 인터페이스 구성 변경

 

 

4. Switch의 구성 요소
Switch는 두 가지 주요 부분으로 나뉩니다:

  • Thumb
    • 사용자가 직접 조작하는 둥근 버튼입니다. 상태에 따라 위치와 색상이 바뀝니다.
  • Track
    • Thumb가 이동하는 배경 영역으로, 활성화/비활성화 상태에 따라 색상이 다릅니다.

 

5. Switch의 장점

  • 간결함: 두 가지 상태를 직관적으로 표현하며, 공간을 적게 차지합니다.
  • 가독성: 시각적인 차이가 뚜렷하여 상태를 한눈에 파악할 수 있습니다.
  • 사용자 친화적: 터치와 드래그로 쉽게 조작할 수 있습니다.

 

6. Switch와 Checkbox의 차이점

Switch Checkbox
On/Off 상태를 나타냅니다. 선택/해제를 나타냅니다.
즉시 동작하는 상태 전환에 적합합니다.  여러 옵션 중 선택에 적합합니다.
설정 변경에 주로 사용됩니다. 설문, 선택 목록에 주로 사용됩니다.

 

7. Switch 함수 원형

const Switch({
  super.key,
  required this.value,
  required this.onChanged,
  this.activeColor,
  this.activeTrackColor,
  this.inactiveThumbColor,
  this.inactiveTrackColor,
  this.mouseCursor,
  this.focusColor,
  this.hoverColor,
  this.materialTapTargetSize,
  this.focusNode,
  this.autofocus = false,
  this.dragStartBehavior = DragStartBehavior.start,
})

 

8. 매개변수 설명

매개변수 설명
key 위젯의 고유 키를 설정합니다.
value Switch의 현재 상태를 나타냅니다 (true/false).
onChanged Switch의 상태가 변경될 때 호출되는 콜백 함수입니다.
activeColor Switch가 활성 상태일 때 Thumb의 색상을 지정합니다.
activeTrackColor Switch가 활성 상태일 때 Track의 색상을 지정합니다.
inactiveThumbColor Switch가 비활성 상태일 때 Thumb의 색상을 지정합니다.
inactiveTrackColor Switch가 비활성 상태일 때 Track의 색상을 지정합니다.
mouseCursor 마우스 커서를 커스터마이즈할 수 있습니다.
focusColor Switch가 포커스를 받을 때의 색상을 지정합니다.
hoverColor Switch 위로 마우스를 올렸을 때의 색상을 지정합니다.
materialTapTargetSize 터치 대상 크기를 Material Design 표준에 맞게 설정합니다.
focusNode 포커스 관리용 FocusNode를 설정합니다.
autofocus 화면 로드 시 Switch가 자동으로 포커스를 받을지 설정합니다.
dragStartBehavior 드래그 시작 동작을 지정합니다. 기본값은 DragStartBehavior.start입니다.

 

 

9. Switch 예제

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Switch Example')),
        body: const Center(
          child: SwitchExample(),
        ),
      ),
    );
  }
}

class SwitchExample extends StatefulWidget {
  const SwitchExample({super.key});

  @override
  _SwitchExampleState createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool _isSwitchOn = false;

  @override
  Widget build(BuildContext context) {
    return Switch(
      value: _isSwitchOn,
      onChanged: (bool newValue) {
        setState(() {
          _isSwitchOn = newValue;
        });
      },
      activeColor: Colors.green,
      activeTrackColor: Colors.greenAccent,
      inactiveThumbColor: Colors.red,
      inactiveTrackColor: Colors.redAccent,
      mouseCursor: SystemMouseCursors.click,
      focusColor: Colors.blue,
      hoverColor: Colors.lightBlue,
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      autofocus: true,
      dragStartBehavior: DragStartBehavior.start,
    );
  }
}

 

 

 

반응형