4. 로그인화면 - 동의화면 만들기

코드 리팩토링 할 겸 동의화면에 대해서 말씀드리겠습니다.

동의화면 같은 경우에는 

https://holybaits-modir.notion.site/132 a2688 a39 a8092 bdefcea510 e0 fd86

서비스 이용약관 | Notion

 

이런 식으로 노션으로 일단은 만들어 놨습니다.

( 이 자료는 로펌을 참고해서 만들었습니다.  확실하지는 않고 흉내만 )

 

완성된 화면입니다.

 

 

먼저 저희가 쓸 내용들을 bool문으로 체크를 위해서 선언해 줍니다.

bool agreeToAllTerms = false; // 전체 동의
bool agreeToRequiredTerms1 = false; // (필수) 약관 동의
bool agreeToRequiredTerms2 = false; //(필수) 개인정보 수집 동의
bool agreeToRequiredTerms3 = false; //(필수) 전금 금융 거래 이용 약관 동의
bool agreeToSelectTerms = false; //(선택) 약관 동의
bool isButtonPressed = false; //다음 버튼

 

 

이제 동의 화면에서는 알아야 되는 게 

버튼을 눌렀을 때 색을 변하게 만드는 메서드

또한 이 메서드를 눌렀을 때 전체동의나 다음버튼에 전달해 주기 위해서

    _StatetoggleAgreement(); 도 같이 전달해 준다. 

  // (필수) 약관 동의 메서드
  void _toggleTermsAgreement() {
    setState(() {
      agreeToRequiredTerms1 = !agreeToRequiredTerms1;
      _StatetoggleAgreement();
    });
  }
  //(필수) 개인정보 수집 동의 메서드
  void _toggleTermsAgreement1() {
    setState(() {
      agreeToRequiredTerms2 = !agreeToRequiredTerms2;
      _StatetoggleAgreement();
    });
  }
  //(필수) 전금 금융 거래 이용 약관 동의 메서드
  void _toggleTermsAgreement2() {
    setState(() {
      agreeToRequiredTerms3 = !agreeToRequiredTerms3;
      _StatetoggleAgreement();
    });
  }

 

 

_StatetoggleAgreement()는 필수 3개를 눌렀을 때는 다음버튼과 전체 약관동의 색도 변하게 만들어야 된다.

//일정 조건이 참일때 버튼 활성화
void _StatetoggleAgreement() {
  setState(() {
    bool allAgreed = agreeToRequiredTerms1 &&
        agreeToRequiredTerms2 &&
        agreeToRequiredTerms3;
    if (allAgreed) {
      isButtonPressed = true;
      agreeToAllTerms = true;
    } else {
      isButtonPressed = false;
      agreeToAllTerms = false;
    }
  });
}

 

 

모든 값이 ture이 되어을 때 전체 동의에 불이 켜져야 되고 다음버튼이 활성화 되게 전체 동의 메서드도 하나 만들어준다.

// 전체동의 처리 메서드
void _toggleAgreement() {
  setState(() {
    agreeToAllTerms = !agreeToAllTerms;
    if (agreeToAllTerms) {
      agreeToRequiredTerms1 = true;
      agreeToRequiredTerms2 = true;
      agreeToRequiredTerms3 = true;
      agreeToSelectTerms = true;
      isButtonPressed = true;
    } else {
      agreeToRequiredTerms1 = false;
      agreeToRequiredTerms2 = false;
      agreeToRequiredTerms3 = false;
      agreeToSelectTerms = false;
      isButtonPressed = false;
    }
  });
}

 

 

이렇게 되면 메서드는 완성했다. ui에서는 어떻게 연결해야 될까 

 

 

위젯으로 메서드를 하나 만들어준다. 

우리는 메서드들이 많기 때문에 동의, 텍스트 등 다양한 자료들을 전달해 준다.

Widget AgreementButton({
  required bool isAgreed,
  required String text,
  required String checkedImage,
  required String uncheckedImage,
  required VoidCallback onTap,
}) {
  return Expanded(
    child: InkWell(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 12),
        height: 48,
        child: Row(
          children: [
            Container(
              width: 28,
              height: 28,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(isAgreed ? checkedImage : uncheckedImage),
                ),
              ),
            ),
            SizedBox(width: 8),
            Text(
              text,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: isAgreed ? Color(0xFF3D3D3D) : Color(0xFF888888),
                fontSize: 14,
                fontFamily: 'Pretendard',
                fontWeight: FontWeight.w400,
                height: 1.0,
                letterSpacing: -0.35,
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

 

 

실제 ui 위젯 안에 들어갈 때는

AgreementButton(
  isAgreed: agreeToRequiredTerms1,
  text: '(필수) 이용 약관 동의',
  checkedImage: 'assets/image/Onbluecheck_icon.png',
  uncheckedImage: 'assets/image/check_icon.png',
  onTap: () {
    _StatetoggleAgreement(); // 상태 변경 함수 호출
    setState(() {
      _toggleTermsAgreement(); // 동의 상태 변경
    });
  },
),

 

이런 식으로 전달하면

 

이러한 위젯이 만들어진다.

이렇게 4개를 만들면 동의 화면은 끝이 난다!