Flutter_13. Stateful, Switch, setState, Button

스위치는 스위치의 값을 알고 있을 전역 변수가 필요하다.

자세한 소개는 아래 링크 참고 :)

 

https://api.flutter.dev/flutter/material/Switch-class.html

Switch class - material library - Dart API

 

 

 

 

Switch, setState

 

 

 

1) 스위치 변수 late로 선언하고, initState에서 초기값 설정

 

 

2) body에 Switch 추가해보기

Switch(
    value: 스위치 상태값 변수,
    onChanged: (value){
      스위치 상태값 변수 = value;
    }
)

 

 

 

3) 화면 확인 - 스위치를 클릭해도 상태가 변하지 않는다!!!!!!!!

 

 

4) 스위치 클릭 할때 setState

 

 

 

5) 다시 저장하고 화면 확인 - 클릭하면 ON/OFF가 잘 저장되어 출력됨!

 

 

 

 

 

Switch, Button Color Change

 

 

1) 전역 변수 late 선언 및 initState()

버튼 클릭 또는 스위치 클릭 할 때 마다 버튼 칼라 변경하기
- Color 타입의 버튼 칼라 변수 선언
- bool 타입으로 스위치와 버튼 상태 변수 선언

 

 

2) 화면 셋팅 - 버튼과 스위치 추가

 

 

3) 함수 onClick()

버튼을 클릭 할 때마다, 버튼의 상태를 true/false로 변경하여 저장한다.
그 저장 값을 Switch에 사용되는 onChanged 함수에 같이 보내준다.

    // --- Function ---

    _onClick(){

        if(_buttonState){

            _buttonState = false;

        }else{

            _buttonState = true;

        }

    _onChanged(_buttonState);

}

 

 

4) 함수 onChanged(_buttonState)

onChange에서는 버튼 상태값을 스위치의 상태값으로 저장한다.
그리고 스위치의 상태값에 따라 버튼 칼라를 변경해준다.
🌈 스위치 화면출력과 버튼의 칼라를 변경해주어야 함으로 setState 필요! 🌈

    // --- Function ---

    _onChanged(bool value){

        setState(() {

            _switchValue = value;

            if(_switchValue){

                _buttonColor = Colors.red;

            }else{

                _buttonColor = Colors.blue;

            }

        });

    }

 

 

 

5) 화면 확인

- 버튼 클릭 시 스위치도 계속 on/off
- 스위치가 off일 경우, 버튼의 칼라는 blue
- 스위치가 on일 경우, 버튼의 칼라는 red

 

 

반응형