[플러터]Flutter / Switch 위젯 만들기, 사용하기(on, off 버튼 / 토글 버튼)

이번 포스팅에서는 간단하게 플러터에서 제공하고 있는 각기 다른 디자인의 스위치 3종류를 알아볼 것이다.

 

플러터에서 제공하는 스위치

일단은 그럼 가장 먼저 스위치 위젯에 대하여 알아야 할 것이다.

Switch 위젯이란?

switch 위젯은 우리가 흔히 생각하는 on, off 로 바뀌는 토글 버튼의 모습을 하고 있는 위젯이다.

하위 속성이 엄청 많지만 간단하게 몇 가지만 알아보자.

 

필수 하위 속성: value, onChanged

 

하위 속성(4개만): activeColor, activeTrackColor, inactiveThumbColor, inactiveTrackColor

 

하나씩 알아보도록 하자.

 

필수 속성:

value

 

value는 불리언 타입의 필수 속성으로, 스위치가 켜져 있는지(true), 꺼져 있는지(false)를 결정한다.

밸류에 넣을 값은 직접 만든다고 봐야 한다.

 

onChanged

 

onChanged는 스위치 값이 변경될 때 호출되는 콜백 함수로, 즉 위의 value 값이 바뀌면 호출된다는 말이다.

 

 

기본 속성:

activeColor, activeTrackColor

 

activeColor는 스위치가 활성화되어 있을 때 스위치 thumb(스위치의 동그란 버튼) 의 색상을 설정할 수 있게 해 준다.

activeTrackColor는 스위치가 활성화되었을 때 track(스위치의 배경 트랙, 즉 thumb이 움직이는 선)의 색상을 설정할 수 있게 해 준다.

 

inactiveThumbColor, inactiveTrackColor

 

inactiveThumbColor는 스위치가 비활성화되었을 때 thumb의 색상을 설정할 수 있게 해 준다.

inactiveTrackColor는 스위치가 비활성화되었을 때 track부분의 색상을 설정할 수 있게 해 준다.

 

그 외에도 엄청 많긴 한데 다 적으면 몇백 줄이 넘어갈 것 같으니 알아서 찾아보길 바란다.

 

https://api.flutter.dev/flutter/material/Switch-class.html?_gl=1*tts7s*_ga*NDk3MjMzMTc5LjE3MjYwNTczMDE.*_ga_04YGWK0175*MTcyNjA1NzMwMS4xLjEuMTcyNjA1NzMzOC4wLjAuMA..

Switch class - material library - Dart API

 

암튼 이제 사용해 보자. 

Switch

import 'package:flutter/material.dart';

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

  @override
  State<SwitchWidget> createState() => _SwitchWidgetState();
}

class _SwitchWidgetState extends State<SwitchWidget> {

  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Switch(
            value: isChecked,
            onChanged: (value) {
              setState(() {
                isChecked = value;
              });
            },),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
              child: Text('마테리얼 3 스위치', style: TextStyle(fontSize: 18),),
            )
          ],
        ),
      ),
    );
  }
}

 

현재 이 코드는 필수 속성만 넣어 만든 코드인 기본 스위치 코드이다.

코드를 보면 역시나 화면이 바뀌기 때문에 StatefulWidget으로 선언이 되어있다.

Switch(
  value: isChecked,
  onChanged: (value) {
  setState(() {
    isChecked = value;
  });
},),

 

value 값에 넣어줄 불리언을 선언을 해놨다.

Switch 문을 열면 필수 값으로 value 와 onChanged를 넣게 되어있다.

 

value에는 위에서 만들어둔 불리언 값을 넣어주면 된다.

그리고 onChanged는 value값을 인자값으로 받아오게 하고 중괄호를 연 뒤 setState로 화면을 다시 그리게 설정해 주고 그 안에 불리언 값이 버튼이 바뀔 때마다 value 값에 따라 바뀌게 불리언 값과 value 값을 같다고 선언했다.

 

 

근데 이 기본 제공 되는 스위치는 좀 안 예쁘게 생긴 것 같다. 예전 버전의 스위치를 보면 되게 예쁜데..

이런 문제를 해결하기 위해선 이 스위치의 테마를 예전 버전으로 낮춰주면 된다.

 

Switch (Material 2)

import 'package:flutter/material.dart';

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

  @override
  State<SwitchWidget> createState() => _SwitchWidgetState();
}

class _SwitchWidgetState extends State<SwitchWidget> {

  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Theme(
              data: ThemeData(
                useMaterial3: false
              ),
              child: Switch(
                value: isChecked,
                onChanged: (value) {
                setState(() {
                  isChecked = value;
                });
              },),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
              child: Text('마테리얼 2 스위치', style: TextStyle(fontSize: 18),),
            )
          ],
        ),
      ),
    );
  }
}

 

전코드와 뭐가 다른가 싶겠지만 아주 조금 달라진 것이 있다.

Theme(
  data: ThemeData(
    useMaterial3: false
  ),
  child: Switch(
    value: isChecked,
    onChanged: (value) {
    setState(() {
      isChecked = value;
    });
  },),
),

 

Switch 위젯을 Theme 위젯으로 감싼 것이다. 

Theme 위젯으로 감싸서 어떠한 동작을 한 것이냐? data속성 안에 있는 useMaterial3 속성을 false로 바꿈으로써 현재 스위치의 디자인을 예전 Material2 디자인으로 다운그레이드 한거다. 그 부분만 제외하면 다 똑같다. 그냥 디자인만 다르다고 생각하면 된다.

 

 

이렇게 Switch 위젯으로 두 가지 디자인의 버튼을 만들어봤다.

세 번째로 만들어볼 스위치는 마테리얼 디자인을 사용하는 스위치가 아닌 쿠퍼티노 디자인을 사용하는 스위치를 만들 것이다.

CupertinoSwitch

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  State<SwitchWidget> createState() => _SwitchWidgetState();
}

class _SwitchWidgetState extends State<SwitchWidget> {

  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoSwitch(
              value: isChecked,
              activeColor: CupertinoColors.activeBlue,
              onChanged: (value) {
                setState(() {
                  isChecked = value;
                });
              },
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
              child: Text('IOS 스위치', style: TextStyle(fontSize: 18),),
            )
          ],
        ),
      ),
    );
  }
}

 

쿠퍼티노 스위치라고 해서 엄청 큰 변화가 있는 건 아니다

그냥 다 똑같다. 좀 다른 것이 있다면 색깔인데 기본 색은 마음에 안 들어서 activeColor 값으로 색을 지정해 줬다.

색 바꾸기 전

색 바꾼 후

 

이렇게 간단하게 3가지의 스위치 위젯들을 알아보았다. 도움이 되었길 바라며 이만 포스팅 마치겠다. 

반응형