키즈_프로젝트

9. 설정 페이지 만들기

깡 딱 2024. 11. 27. 23:08
728x90

설정페이지 만들기 - UI

 

 

 

사실 이 페이지는 프런트가 반인 거 같다. 

모듈 분리만 잘해둬도 이건 그냥 다복붙하면 만들어지는 거 같습니다.

 

 

칼럼값으로 텍스트만 빼고 디자인해 둔 위젯들을 불러와서 적어주면

끝.. 

child: Column(
  children: [
    memberInfoEditWidget('알림 설정'),
    memberInfoEditWidget2('이벤트 혜택 알림', () {}),
    SizedBox(height: 8),
    memberInfoEditWidget('서비스 동의'),
    memberInfoEditWidget2('약관 동의 및 개인정보 처리 동의', () {}),
    memberInfoEditWidget2('개인정보 처리 방침', () {}),
    memberInfoEditWidget2('오픈 소스 라이브러리', () {}),
    memberInfoEditWidget3('어플 버전', () {}),
    SizedBox(height: 230),

    logoutAndWithdrawalWidget(context, () {
      // 회원탈퇴 기능을 추가하세요.
    }),

 

 

 

 

 

디자인 말고 로그아웃 기능과 탈퇴기능만 간단하게 설명하자면

 

로그아웃 버튼을 눌렀을 때 

signOut을 써서 로그아웃 하게 만들고

로그아웃화면으로 이동 

 

여기서 파이어베이스 간단하게 설명하자면

 

FirebaseAuth.instance 부분은 인증 관련 작업을 수행할 수 있게 해 주고

signOut은 사용자의 인증 상태를 종료하는 메서드입니다.

 

현재 텍스트 부분을 별도의 위젯으로 만들지 않은 이유는 높이 값이 다르기 때문입니다. 

로그아웃과 탈퇴하기 버튼은 높이가 동일하지만, 

이 두 버튼을 따로 분리하면 오히려 사용자가 화면을 보기 불편해질 것 같아서 

하나의 위젯에 포함시켰습니다. 이렇게 하면 전체적인 코드를 볼 때 더 쉽게 파악할 수 있을 거 같습니다.

 

Widget logoutAndWithdrawalWidget(BuildContext context, VoidCallback onWithdrawalTap) {
  return Container(
    width: 360,
    height: 98,
    padding: EdgeInsets.only(top: 32, left: 16, right: 16, bottom: 48),
    child: Row(
      children: [
        Expanded(
          child: InkWell(
            onTap: () async {
              // Firebase Auth 로그아웃
              await FirebaseAuth.instance.signOut();

              // 로그인 화면으로 이동
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (context) => Login()), // Login 화면으로 이동
              );
            },
            child: Text(
              '로그아웃',
              textAlign: TextAlign.right,
              style: TextStyle(
                color: Color(0xFFB0B0B0),
                fontSize: 12,
                fontFamily: 'Pretendard',
                fontWeight: FontWeight.w400,
                height: 1.5,
                letterSpacing: -0.30,
              ),
            ),
          ),
        ),
        SizedBox(width: 16),
        Text(
          '|',
          textAlign: TextAlign.right,
          style: TextStyle(
            color: Color(0xFFB0B0B0),
            fontSize: 12,
            fontFamily: 'Pretendard',
            fontWeight: FontWeight.w400,
            height: 1.5,
            letterSpacing: -0.30,
          ),
        ),
        SizedBox(width: 16),
        Expanded(
          child: InkWell(
            onTap: onWithdrawalTap,
            child: Text(
              '회원탈퇴',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color(0xFFB0B0B0),
                fontSize: 12,
                fontFamily: 'Pretendard',
                fontWeight: FontWeight.w400,
                height: 1.5,
                letterSpacing: -0.30,
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

 

1. 알게 된 사실

나는 for문을 이때까지 여기 넣을 수 있는지 몰랐다 ㅋㅋㅋㅋㅋ

이렇게 편한 기능이 있었던가..

 

나는 컨테이너도 for문으로 가능한지몰랐는데

위젯도 전부 함수로 가능한 거 같다. 개꿀..

for (int i = 0; i < 5; i++) // 반복문으로 박스 생성
  Container(
    width: 56,
    height: 48,
    color: Colors.blue, // 박스 색상 설정
  ),

 

 

 

 

+백엔드 추가 예정

관심사 UI 완성

마이페이지 관심사 부분 추가 완료

이 부분은 프런트로 완성되었기 때문에 다음에 백엔드 할 때 다루겠음 

 

여기서도 알게 된 사실이 있는데

 

현재 내가 만든 위젯이 있는데

Widget customTextContainer(String text) {
  return Container(
    height: 26,
    padding: EdgeInsets.symmetric(horizontal: 8.0).copyWith(top: 4.0, bottom: 4.0), // 좌우 8, 위아래 4 패딩 추가
    decoration: ShapeDecoration(
      shape: RoundedRectangleBorder(
        side: BorderSide(width: 1, color: Color(0xFF0095F6)),
        borderRadius: BorderRadius.circular(4),
      ),
    ),
    child: Text(
      text,
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Color(0xFF0095F6),
        fontSize: 14,
        fontFamily: 'Pretendard',
        fontWeight: FontWeight.w500,
        height: 1.3,
        letterSpacing: -0.35,
      ),
    ),
  );
}

 

 

각 텍스트의 길이가 다를 때마다 버튼 크기를 고정하기보다는,

패딩 값을 사용하여 크기를 지정하면 어떤 길이의 텍스트가 들어와도 일관된 모양으로 표시가 될 수 있었습니다.

이 부분은 알면서도 잘 쓰지 않았는데 앞으로 개발은 값이 변경되는 값은 패딩값으로 만드는 것이 좀 더 효율적이라는 것을  알게 되었습니다.

 

 

 

728x90