Flutter v3.22.2
Dart v3.4.3
DevTools v2.34.3
우선은 동의하느냐 안 하느냐의 문제이기 때문에 bool로 접근하여 빌드해보았습니다.
필수동의 2개, 선택동의 1개가 있으며
필수동의 2개를 반드시 true값으로 만들어줘야 확인버튼을 활성화시켜
다음 페이지로 넘어가는 기능을 구현해 보겠습니다
// agreement_condition_text.dart
bool isAllChecked = false;
bool isRequireChecked = false;
bool isConditionChecked = false;
bool isInfoChecked = false;
bool isThirdChecked = false;
void updateAllChecked() {
isAllChecked = isConditionChecked && isInfoChecked && isThirdChecked;
}
void updateRequireChecked() {
isRequireChecked = isConditionChecked && isInfoChecked;
}
void resetState() {
isAllChecked = false;
isRequireChecked = false;
isConditionChecked = false;
isInfoChecked = false;
isThirdChecked = false;
}
먼저 알아보기 쉽게 총 다섯 가지의 bool값을 선언해 줍니다.
isAllChecked는 가장 위에 존재하는 버튼이며
isRequireChecked는 필수동의항목을 체크하였는지에 대한 bool값입니다.
updateAllChecked이란 함수는
isConditionChecked(필수항목)와 isInfoChecked(필수항목)와 isThirdChecked(선택항목)의 값이 ture가 될 때 isAllchecked를 true로 만드는 함수 입니다. 반대로 isAllchecked가 true면 나머지 3개의 bool들에게 영향을 미칩니다.
그리고
역시 updateRequireChecked란 함수는
isConditionChecked(필수항목)와 isInfoChecked(필수항목)의 값이 true가 될때 isRequireChecked가 true가 됩니다.
이 또한 반대로 isRequireChecked가 true면 나머지 2개의 bool들에게 영향을 미칩니다.
마지막으로
resetState라는 함수를 선언해 주었는데
이는 약관동의 페이지를 벗어난 뒤 다시 약관동의 페이지로 진입하였을 때 이전에 bool값들이 그대로 남아있는 걸 방지하고자
전 bool값들을 초기화시켜주는 함수입니다.
이 페이지를 토대로
버튼들을 구현해 보겠습니다. 저는 아이폰의 토글키 버튼이 마음에 들어 CupertinoSwitch로 진행하였습니다.
전체동의
CupertinoSwitch(
value: isAllChecked,
onChanged: (bool value) {
setState(() {
isAllChecked = value;
isConditionChecked = value;
isInfoChecked = value;
isThirdChecked = value;
isRequireChecked = value;
});
},
)
코드 해석을 해보자면
CupertinoSwitch라는 함수가 기본적으로 가지고 있는 value와 onChanged를 선언해 줍니다. 왜냐하면
쿠퍼티노스위치 자체가 필수로 value(bool)와 onChanged를 받게 돼있거든요..
참고로 내가 사용하는 함수 또는 변수 위에 마우스 커서를 올려두고 있으면 이 코드에서 어떤 걸 필수로 요하는지 또는 어떤걸 사용할 수 있는지 나옵니다. (안드로이드 스튜디오 기준) 모르시는 분들은 안 읽히더라도 한두 번 얹어보셔서 읽어라도 보시면 좋을 것 같습니다.
저도 잘 모르지만 얹어놓고 읽어보긴 하거든요..
여기서
"value :"란 지금 현재 CupertinoSwitch의 상태를 나타냅니다.
isAllChecked라는 bool값이 true인지 false인지 결정합니다.
그리고
"onChanged :() {}"는 스위치의 상태가 변경될 때 호출되는 콜백 함수입니다.
사용자가 스위치를 켜거나 끌 때 onChanged 함수가 호출되며, 함수는 스위치의 새로운 상태(value라는 매개변수로 전달됨)를 받습니다.
여기서 초보인 제가 짚고 넘어가고 싶은 점.
이 좌 우의 차이점이 보이시나요?
왼쪽은 onChanged의 매개변수인 "value"의 값이 명시돼있지 않다는 것입니다.
반대로 오른쪽은 "value"의 값이 명시가 돼있습니다.
이는
어지간하면 오른쪽처럼 타입을 명시해 주는 게 협업을 할 때에나, 먼 훗날 내가 쓴 코드를 다시 훑어볼 때에나 도움이 되기 때문에
매개변수의 타입을 정확히 지정해 주는 게 좋습니다.
Dart는 정적 언어타입이므로 타입을 명시적으로 지정하면 오류가 발생하였을 시 더 명확한 오류메시지도 제공받을 수 있습니다.
물론 왼쪽처럼 적어놔도 Dart의 타입추론 덕분에 오류가 발생하지 않지만,
가독성, 타입검사, 명시적 타입이 3가지의 장점이 있기 때문에 타입을 명시해 주는 게 좋습니다.
그리고
"onChanged"의 출력단에
"setState( () {} )"를 선언해 주어 true, false값이 뒤바뀔 때 위젯을 리빌드 하도록 해주고,
value 매개변수(스위치의 새로운 상태)에 따라
- isAllChecked
- isConditionChecked
- isInfoChecked
- isThirdChecked
- isRequireChecked
이 다섯 가지의 bool들을 "value"값으로 맞춰 줍니다.
이용약관동의 (필수)
CupertinoSwitch(
value: isConditionChecked,
onChanged: (bool value) {
setState(() {
isConditionChecked = value;
updateRequireChecked();
updateAllChecked();
});
},
)
이용약관동의는 필수로 체크해야 하는 항목이기 때문에
"updateRequireChecked();"도 함께 선언해 줍니다. 이렇게 되면
"isConditionChecked"와 "isInfoChecked"가 둘 다 활성화(true) 돼야 "isRequireChecked"도 true가 되는데
이용약관동의만 체크하였기 때문에 "isRequireChecked"는 true가 되지 않고 호출되지 않습니다.
정보수집동의 (필수)
CupertinoSwitch(
value: isInfoChecked,
onChanged: (bool value) {
setState(() {
isInfoChecked = value;
updateRequireChecked();
updateAllChecked();
});
},
)
위 코드와 동일합니다.
제3자제공동의 (선택)
CupertinoSwitch(
value: isThirdChecked,
onChanged: (bool value) {
setState(() {
isThirdChecked = value;
updateAllChecked();
});
},
)
제3자제공동의는 선택사항이기 때문에
"updateRequireChecked()" 함수를 호출해 줄 필요가 없습니다.
다만 전체동의를 눌렀을 때 활성화 되는 버튼이기 때문에
"updateAllChecked()" 함수만 호출해 줍니다.
여기까지가 버튼별 true, false 및 조건부 true, false를 해보았습니다.
사실 여기까지는 참, 거짓의 이해도만 있으면 충분히 할 수 있기 때문에 최초의 bool 들과 함수만 잘 선언해 주면 문제없을 부분인 것 같습니다!
다음번엔 텍스트를 클릭하였을 시 아래로 본문내용이 나오게 되는 "ExpansionTile"에 대해서 알아보겠습니다.
*제가 써놓은 최종 코드는 2편에 기재하겠습니다.
많이 부족하나 혹시나 필요하시면 참고 부탁드립니다.
'Flutter > App Making Learn' 카테고리의 다른 글
[플러터] 소셜로그인 카카오톡 1 [Flutter] social login with Kakao 1 (0) | 2024.06.18 |
---|---|
[플러터] 약관 동의 페이지 만들기2 (접히는 TextBox "ExpansionTile") (1) | 2024.06.12 |
플러터 당근마켓 앱 카피코딩3 (피드정리) (0) | 2024.05.06 |
플러터 당근마켓 앱 카피코딩2 (좋아요 기능 구현, 피드리스트) (0) | 2024.05.02 |
플러터 당근마켓 앱 카피코딩1 (appBar, body, floatingActionButton, bottomNavigationBar) (1) | 2024.04.30 |