11. 마이프로필 -쇼핑화면 만들기

만드는 과정 소요시간 40분

 

프런트만 하면 얼마 안 걸리는데

모듈 분리까지 해서 좀 걸렸네요..

---

주문/배송 주문내역 컨테이너만들기 및 오류 발생

 

특히 이걸 만드는 게 까다로웠다.

이건   전체  주문/배송 주문내역, 취소/반품/교환 내역 코드를 만든 건데

Container(
  width: 360,
  height: 128,
  color: Colors.white,
  padding: EdgeInsets.all(16),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    // 박스들 사이의 간격 조정
    children: [
      card_widget(
        'assets/image/Mypage_iocn1 img.png', // 이미지 경로
        '주문/배송 주문 내역', // 제목
        '주문내역을 빠르고 간편하게', // 설명
      ),
      SizedBox(width: 12), // 사이즈 박스 12
      card_widget(
        'assets/image/Mypage_iocn2 img.png', // 이미지 경로
        '취소/반품/교환 내역', // 제목
        '제대로 됐는지 불안하다면?', // 설명
      ),
    ],
  ),
),

 

 

발생한 문제가 

컨테이너에 효과 즉  borderSide 값이 1이 있을 때 오류가 났음

    decoration: ShapeDecoration(
      color: Color(0xFFF6F6F6), // 배경 색상
      shape: RoundedRectangleBorder(
        side: BorderSide(width: 1, color: Color(0xFFE7E7E7)), // 경계선
        borderRadius: BorderRadius.circular(8), // 둥근 모서리
      ),
      shadows: [
        BoxShadow(
          color: Color(0x3FF6F6F6), // 그림자 색상
          blurRadius: 12, // 흐림 반경
          offset: Offset(0, 0), // 그림자 위치
          spreadRadius: 0, // 그림자 확장
        ),
      ],
    ),

 

그래서

padding: EdgeInsets.fromLTRB(16, 8, 16, 6), // 패딩 추가

기존의 패딩값에서 2를 뺐다. 이건 항상 생각하고 만들어야 된다는 걸 알게 되었음 

 

 

 

---

새롭게 알게 된 사실

 

또한 리뷰 글씨를 만들면서 알게 된 사실은 textspan을 이용하면

각 텍스트스타일을 각각 따로 넣을 수 있다는 점도 알게 되었다.

TextSpan

Widget reviewContainer() {
  return Container(
    width: 360,
    height: 66,
    color: Colors.white,
    child: Center( // 버튼을 중앙에 배치
      child: Container(
        width: 328,
        height: 42,
        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        decoration: ShapeDecoration(
          color: Color(0xFF0095F6),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // 양쪽 정렬
          children: [
            RichText(
              text: TextSpan(
                children: [
                  TextSpan(
                    text: '지금 ',
                    style: TextStyle(
                      color: Color(0xFFF6F6F6),
                      fontSize: 14,
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w500,
                      height: 1.0,
                      letterSpacing: -0.35,
                    ),
                  ),
                  TextSpan(
                    text: '리뷰',
                    style: TextStyle(
                      color: Color(0xFFFFD51B),
                      fontSize: 14,
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w500,
                      height: 1.0,
                      letterSpacing: -0.35,
                    ),
                  ),
                  TextSpan(
                    text: '를 관리해보세요',
                    style: TextStyle(
                      color: Color(0xFFF6F6F6),
                      fontSize: 14,
                      fontFamily: 'Pretendard',
                      fontWeight: FontWeight.w500,
                      height: 1.0,
                      letterSpacing: -0.35,
                    ),
                  ),
                ],
              ),
            ),
            Text(
              '0건', // 오른쪽 텍스트 추가
              style: TextStyle(
                color: Color(0xFFF6F6F6),
                fontSize: 14,
                fontFamily: 'Pretendard',
                fontWeight: FontWeight.w500,
                height: 1.0,
                letterSpacing: -0.35,
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

 

 

만드는데 크게 어려움은 없었으나 pg사 연결 할 생각 해 기분이 너무너무 좋다..