1. SizedBox width가 적용되지 않는 이유
문제 상황:
ListView 안에 SizedBox(width: 120)을 넣었는데 폭이 적용되지 않음.
원인:
ListView는 가로 방향으로 무한대(width=∞) 공간을 허용하기 때문에,
자식 위젯의 width 제약이 무시됨.
해결 방법:
- Center나 Align으로 감싸면 부모 제약이 적용됨
- 또는 Row(mainAxisSize: MainAxisSize.min) 사용
- 스크롤 필요 없으면 Column 사용
정리
Center( child: SizedBox(width: 120, height: 250, child: ...), )
2. PageView.builder 활용 및 왼쪽 정렬
문제 상황:
PageView.builder로 카드 UI를 만들었더니 중앙에서 시작함.
원인:
PageView의 기본 배치가 중앙 기준(center)으로 설정되어 있음.
해결 방법 1 (왼쪽 정렬):
Align( alignment: Alignment.centerLeft, child: SizedBox(width: 400, height: 250, child: ...), )
해결 방법 2 (Align 제거 버전):
PageView.builder( controller: PageController(viewportFraction: 0.6), itemBuilder: (context, index) { return Padding( padding: EdgeInsets.only(left: index == 0 ? 0 : 8), child: SizedBox( width: 400, height: 250, child: ClipRRect( borderRadius: BorderRadius.circular(50), child: Image.network('https://picsum.photos/200/300?random=$index'), ), ), ); }, )
핵심 포인트
- viewportFraction : 한 화면당 카드 비율
- Align : 시작 위치를 제어할 수 있음
- Padding : 첫 번째 카드 여백 제어 가능
3. JSON 직렬화 & 역직렬화 (Json.fromJson / toJson)
문제 상황:
JSON 문자열을 객체로 변환할 때 타입 오류 발생 (int → String).
원인:
JSON의 "price": 30000 은 int인데, 클래스에서 String으로 선언함.
해결 코드:
class Json { String title; String author; int price; // 숫자형으로 변경 Json({required this.title, required this.author, required this.price}); Json.fromJson(Map<String, dynamic> map) : this( title: map['title'], author: map['author'], price: map['price'], ); Map<String, dynamic> toJson() => { 'title': title, 'author': author, 'price': price, }; }
실행 흐름:
JsonDecode() → 문자열 → Map<String, dynamic>
Json.fromJson() → Map → 객체
toJson() → 객체 → Map
jsonEncode() → Map → 문자열
오늘의 핵심 요약
주제핵심 포인트
| UI 제약(Constraints) | 부모 위젯의 크기 정책이 자식에 직접 영향을 줌 |
| PageView.builder | viewportFraction, Align, Padding으로 레이아웃 조절 |
| JSON 변환 | 타입 일치가 필수 (int ↔ String 주의) |
내일 학습 목표
PageView에 카드 텍스트/가격/평점 오버레이 추가
JSON 배열 형태(List<Map<String, dynamic>>) 다루기
Flutter UI 내 데이터 바인딩 실습