Flutter의 스위치(Switch) 사용법

Flutter에서 Switch 위젯은 사용자가 설정을 켜거나 끌 수 있도록 하는 간단한 방법을 제공합니다. 스위치는 보통 토글 버튼 형태로 구현되며, 사용자가 특정 기능을 활성화하거나 비활성화할 때 유용합니다. 이번 글에서는 Flutter의 Switch 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 Switch 사용법

Switch 위젯의 기본적인 사용법은 매우 간단합니다. value와 onChanged 속성을 사용하여 스위치의 상태와 상태 변경 이벤트를 처리할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Switch Demo')),
        body: Center(
          child: Switch(
            value: _isSwitched,
            onChanged: (bool value) {
              setState(() {
                _isSwitched = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 스위치를 생성하고, 사용자가 스위치를 켜거나 끌 때 _isSwitched 상태가 변경되도록 합니다.

2. SwitchListTile 사용

SwitchListTile 위젯은 Switch와 ListTile을 결합한 형태로, 텍스트와 스위치를 함께 배치할 때 유용합니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SwitchListTile Demo')),
        body: Center(
          child: SwitchListTile(
            title: Text('Enable Notifications'),
            value: _isSwitched,
            onChanged: (bool value) {
              setState(() {
                _isSwitched = value;
              });
            },
            secondary: Icon(Icons.notifications),
          ),
        ),
      ),
    );
  }
}

 

위 코드는 SwitchListTile을 사용하여 스위치와 텍스트를 함께 배치합니다. secondary 속성을 사용하여 스위치 왼쪽에 아이콘을 추가할 수 있습니다.

3. 스위치 색상 변경

Switch 위젯의 색상을 변경하려면 activeColor와 inactiveThumbColor, inactiveTrackColor 속성을 사용합니다.

 

Switch(
  value: _isSwitched,
  onChanged: (bool value) {
    setState(() {
      _isSwitched = value;
    });
  },
  activeColor: Colors.green,
  inactiveThumbColor: Colors.red,
  inactiveTrackColor: Colors.red.withOpacity(0.5),
)

 

위 코드는 스위치가 켜졌을 때의 색상을 초록색으로, 꺼졌을 때의 색상을 빨간색으로 설정합니다.

 

 

반응형

 

4. 비활성화된 스위치

스위치를 비활성화하려면 onChanged 속성에 null을 할당합니다.

Switch(
  value: _isSwitched,
  onChanged: null, // 스위치 비활성화
)

 

위 코드는 스위치를 비활성화하여 사용자가 토글할 수 없도록 합니다.

5. 스위치 상태 초기화

스위치의 초기 상태를 설정하려면 value 속성에 초기값을 할당합니다.

 

bool _isSwitched = true; // 초기 상태를 켜진 상태로 설정

@override
Widget build(BuildContext context) {
  return Switch(
    value: _isSwitched,
    onChanged: (bool value) {
      setState(() {
        _isSwitched = value;
      });
    },
  );
}

 

위 코드는 스위치의 초기 상태를 켜진 상태로 설정합니다.

6. 여러 개의 스위치 처리

여러 개의 스위치를 처리하려면 각 스위치의 상태를 별도로 관리하고, 각 스위치의 상태 변경을 처리하는 방법을 구현해야 합니다.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<bool> _isSwitched = [false, false, false];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Multiple Switches')),
        body: Column(
          children: <Widget>[
            SwitchListTile(
              title: Text('Option 1'),
              value: _isSwitched[0],
              onChanged: (bool value) {
                setState(() {
                  _isSwitched[0] = value;
                });
              },
            ),
            SwitchListTile(
              title: Text('Option 2'),
              value: _isSwitched[1],
              onChanged: (bool value) {
                setState(() {
                  _isSwitched[1] = value;
                });
              },
            ),
            SwitchListTile(
              title: Text('Option 3'),
              value: _isSwitched[2],
              onChanged: (bool value) {
                setState(() {
                  _isSwitched[2] = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 세 개의 스위치를 생성하고, 각 스위치의 상태를 별도로 관리합니다.

결론

Switch 위젯은 Flutter 애플리케이션에서 사용자가 설정을 켜거나 끌 수 있도록 하는 데 매우 유용한 도구입니다. 기본 사용법부터 SwitchListTile, 색상 변경, 비활성화, 초기 상태 설정, 여러 스위치 처리 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. Switch 위젯을 적절히 활용하여 직관적이고 효율적인 사용자 인터페이스를 제공하는 애플리케이션을 만들어보세요.