2. Agree_Page 동의화면 만들기

UI/UX

 

제작소요 12일 ( 디자인 틀 제작 및 약관 동의 화면) 

피그마 반응형 제작 - UI UX 김00 

 

---

프론트 엔드

Column

 

body 부분은 수직 정렬로 설정

 

상단바 부분은 상단바에 적지 않고 Column부분에 적어줌

( 즉 Scaffold 부분에 넣은 것이 아니라 body 부분에 넣었다는 이야기 )

 

밑에 줄 만드는 부분은  

width: double.infinity,

 

전체 부분을 차지하는 코드를 적어 반응형 제작  

 

 

그후 패딩 값 주고 Row 값 주고

뒤로가기 버튼은 직접 만들 었기 때문에 back_icon 이라는 이름을 정해주고 코드에 넣기 

 

밑에는 상단바를 만들어 준 코드 ( 상단바에 안집어 넣고 바디에 넣은 이유는 유지보수를 더 용이하게 하기 위해서임 )

Container(
  // 앱 바 - 완
  width: double.infinity,
  height: 54,
  decoration: BoxDecoration(
    border: Border(
        bottom: BorderSide(
      width: 1,
      color: Color(0xFFE7E7E7),
    )),
  ),
  child: Padding(
      padding: EdgeInsets.only(top: 15, bottom: 15, left: 24),
      child: Row(
        children: [
          Container(
            // 뒤로가기 버튼 - 완
            width: 24,
            height: 24,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(
                        'assets/image/back_icon.png'))),
            child: MaterialButton(
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          )
        ],
      )),
),

 

 

클릭했을때 메서드는 !?

다이얼로그를 닫거나, 새로운 화면에서 원래 화면으로 돌아갈 때 자주 사용

먼저 center로 전체값을 중앙에 뜨게하고

전체 값을 다음 버튼 위 부터 뒤로가기 버튼 아래에 있는 줄까지 잡고

그안에 패딩 값으로 빨간색 박스 부분을 넣었음

여기 부분은 column 값으로 잡고 

반응형으로 만들기 위해서 

mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,

 

https://beomseok95.tistory.com/310

참고자료

 

 

텍스트 같은 경우에는 피그마 정보를 가져오고

height 같은 경우에는 

 

33.6 / 28을 하면 = 1.2 나옴  

왜 나눠야되는지는 모르겠음

Text(
  // 제목 - 완
  '모디랑\n이용약관 동의',
  textAlign: TextAlign.left,
  style: TextStyle(
    color: Color(0xFF3D3D3D),
    fontSize: 28,
    fontFamily: 'Pretendard',
    fontWeight: FontWeight.w700,
    height: 1.2,
    letterSpacing: -0.7,
  ),
),

 

 

 

 

InkWell은 자식 위젯에 터치 이벤트 등이 발생하였을 때 어떻게 처리할 지(위젯 변화, 페이지 전환 등)를 설정하는 위젯을 통해서 클릭 이벤트를 만들었음 

 

 

---

백엔드 ( 메서드 )

 

변수 선언

bool _isAgreed = false; // 사용자의 동의 상태를 관리하는 변수
bool _isTermsAgreed = false; // 이용 약관 동의 상태를 추적하는 변수
bool _isPrivacyAgreed = false; // 이용 약관 동의 상태 추적 변수 2
bool _isPrivacyAgreed2 = false; // 이용 약관 동의 상태 추적 변수 3
bool _isPrivacyAgreed3 = false; // 이용 약관 동의 상태 추적 변수 4
bool isButtonPressed = false;

 

사실 변수명은 엉망이다. 바꾸기전에 적은 글이라 이해해야됨 

 

 

전체 버튼을 클릭 했을때

모든 값 true 값 반대일 경우 false 값

// 전체동의 처리 메서드
void _toggleAgreement() {
  setState(() {
    _isAgreed = !_isAgreed; // 전체 동의 상태를 토글
    // 전체 동의 상태에 따라 개별 동의 변수들과 버튼 활성화 상태를 설정
    if (_isAgreed) {
      _isTermsAgreed = true;
      _isPrivacyAgreed = true;
      _isPrivacyAgreed2 = true;
      _isPrivacyAgreed3 = true;
      isButtonPressed = true; // 전체 동의 시 버튼 활성화
    } else {
      _isTermsAgreed = false;
      _isPrivacyAgreed = false;
      _isPrivacyAgreed2 = false;
      _isPrivacyAgreed3 = false;
      isButtonPressed = false; // 전체 동의가 아니면 버튼 비활성화
    }
  });
}

 

 

필수 버튼이 참일때 버튼 색과 버튼 활성화 메서드

//일정 조건이 참일때 버튼 활성화
void _StatetoggleAgreement() {
  setState(() {
    bool allAgreed = _isTermsAgreed&& _isPrivacyAgreed && _isPrivacyAgreed2;

    if (allAgreed) {
      // 모든 조건이 참일 때
      isButtonPressed = true;
    } else {
      // 이외의 경우에는 isButtonPressed를 false로 설정합니다.
      isButtonPressed = false;
    }
  });
}

 

사실 이 코드는 고쳐야된다

void  _toggleTermsAgreement() {
  setState(() {
    _isTermsAgreed = !_isTermsAgreed;
    _StatetoggleAgreement();
  });
}

코드를 보면 동의 하기를 눌렀는지 안눌렀는지 판단 하는것인데 

 

_isTermsAgreed = !_isTermsAgreed;

이런식으로 _StatetoggleAgreement  함수에 바로 넣어서 메서드를 만들려고 했다.

 되겠지 생각 했는데 상태 변화를 감지하는 변수 들이라 변수가 먹질 않았다.

그래서 함수_StatetoggleAgreement를 쓰지 않고 _toggleTermsAgreement 함수를 만들어서 사용 한 것이다.

더쉽게 한마디로 설명하면 _StatetoggleAgreement 이코드로 한번에코드를 제어 할려고 했는데 

안되서 _toggleTermsAgreement 이메서드를 이용했다. 그래서 코드가 더러워진건 사실..

 

---

 

지금 보고 안 사실인데 

(필수) 텍스트 3개를 클릭했을때 전체 약관 동의 버튼이 안켜진다.

내가 _isAgreed 이값을 메서드에 넣지 않았나보다. 넣으면 정상작동 됩니다~

 

---