[Flutter] 화면 스크롤 (SingleChildScrollView) [맥북💻]

 목차

1. SingleChildScrollView()
   1. 화면을 넘어가는 위젯이 있으면 에러가 발생
   2. 스크롤 위젯을 넣어 수정
   3. 추가 내용
2. ListView() 와 SingleChildScorllView() 의 차이

 

 

 

✅ SingleChildScrollView()

 

 

1️⃣ 화면을 넘어가는 위젯이 있으면 에러가 발생

1. Column으로 화면을 넘어가는 여러 개의 Container를 생성하면 에러("픽셀이 허용범위를 넘어갔다") 발생

 

 

 

2️⃣ 스크롤 위젯을 넣어 수정 (SingleChildScrollView)

1. Column 위젯을 widget 으로 감싸기
   (** Column을 ListView() 위젯으로 변경해도 정상 작동)
2. 감싼 widget을 SingleChildScrollView() 위젯으로 수정
3. 정상 작동 확인 

1. Column 위젯을 widget 으로 감싸기

2. 감싼 widget을 SingleChildScrollView() 위젯으로 수정

3. 정상 작동 확인

 

 

 

3️⃣ 추가 내용

• SingleChildScrollView() 위젯 내에 Column을 넣어 SizedBox() 위젯 추가
  ** children[] 내에 2개의 SizedBox()로 분리하였기 SizedBox 간의 침범(?) 불가

 

 

 

 

 

✅ ListView() 와 SingleChildScrollView() 의 차이

✔️ ListView

• 목적: "반복되는 여러 아이템"을 리스트 형태로 배치하고 스크롤
• 특징:
  • 기본적으로 스크롤 가능
  • ListView.builder 쓰면 보이는 영역만 렌더링 → 성능 최적화 (많은 아이템 적합)
  • 내부 children이 많아도 효율적

👉 대표적인 용도: 채팅창, 게시판, 피드, 댓글 목록

 

✔️ SingleChildScrollView

• 목적: "단일 위젯(보통 Column/Row 같은 것)"이 화면보다 커질 때 전체를 스크롤 가능하게 만듦
• 특징:
  • child가 하나만 들어감 (보통 Column 같은 레이아웃 위젯을 넣음)
  • 내부에 위젯이 많으면 모두 렌더링 → 성능 최적화 없음
  • "작은 화면에서도 넘치면 스크롤되게" 하고 싶을 때 유용

👉 대표적인 용도:

• 회원가입 폼 (입력칸 많아서 화면 넘어갈 때 스크롤)
• 긴 설명글
• 여러 레이아웃 요소(Column에 버튼, 이미지, 텍스트가 섞여 있을 때)