[Solution Challege] Medisight 개발 #3 (간격 지정 위젯)

구현

역할
- 마이페이지 화면 구성
- 내비게이션바 화면 전환 오류 수정

 

간격 지정 위젯

(자세한 내용 참고)

1. const Spacer() → 디바이스 크기에 따라 비율적으로 간격을 주고 싶을 때 사용
2. const SizedBox(height: 25) → 지정된 간격을 주고 싶을 때 사용
3. const Padding(padding: EdgeInsets.only(bottom: 25))

 

어려웠던 점

1. 리스트뷰 안 요소(텍스트와 이미지)에 간격 넣기 →  Padding() 안에 Text()나 Image() 위젯을 넣기

const Padding(
  padding: EdgeInsets.only(right: 20),
  child: Icon(Icons.arrow_right),
),

 

2. 리스트뷰를 Column 안에 넣었을 때 hasSize 오류가 남 → ListView의 부모 위젯 높이가 무한대이기 때문에 발생한 오류로, ListView가 차지하는 공간 크기를 설정해줘야 한다. 리스트뷰를 Expaned() 위젯에 넣어주어서 해결 (자세한 설명 참고)

 

3. Column의 위젯들의 시작 위치 맞추기 → crossAxisAlignment: CrossAxisAlignment.start 사용 (자세한 설명 참고)

 

4. BottomNavigation을 tab하여 화면 변경하기 → onItemTabbed()에 tab한 index를 넘겨줌