📍 튜터님과 Widget 공부

✏️ FractionallySizedBox

FractionallySizedBox이란?

부모 위젯의 크기를 기준으로 자식의 가로/세로 비율을 정하는 레이아웃 위젯
픽셀(px)이 아니라 비율(0.0 ~ 1.0) 로 크기 지정
부모가 주는 최대 사이즈를 기준으로 계산됨

기본 구조

FractionallySizedBox(
  widthFactor: 0.8,
  heightFactor: 0.5,
  child: Container(
    color: Colors.blue,
  ),
)

widthFactor, heightFactor는 부모 대비 비율
둘 중 하나만 써도 됨

✏️ ListView

ListView란?

ListView는 여러 개의 위젯을 세로(또는 가로)로 나열하고 스크롤 가능하게 만들어주는 위젯

기본 구조

ListView(
  children: [
    Widget1(),
    Widget2(),
    Widget3(),
  ],
)

children: 리스트에 들어갈 위젯들
스크롤은 자동으로 처리됨

ListView의 주요 생성자

ListView (기본)

모든 children을 한 번에 메모리에 로드
아이템 수가 적을 때 적합

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
  ],
)

ListView.builder

필요한 만큼만 생성 (lazy loading)
아이템이 많을 때 필수

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
);

자주 쓰는 상황
API로 받아온 리스트
무한 스크롤
채팅방 메시지

ListView.separated

아이템 사이에 구분선(separator) 추가 가능

ListView.separated(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
);

구분선은 Divider, SizedBox, 커스텀 위젯 가능

스크롤 방향 설정

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(width: 100),
    Container(width: 100),
  ],
)

Axis.vertical (기본)
Axis.horizontal → 가로 스크롤 리스트

itemExtent

ListView 안에 있는 각 아이템의 “고정 길이”를 지정하는 값
세로 스크롤일 때 → 아이템의 높이
가로 스크롤일 때 → 아이템의 너비

ListView.builder(
  itemExtent: 56,
)

모든 아이템의 크기가 항상 56px로 고정

왜 쓸까?

• 성능 최적화
  itemExtent를 주면 Flutter가:
  아이템 높이를 미리 알고
  스크롤 계산을 단순화해서
  레이아웃 계산을 덜 함

스크롤이 더 부드러워짐

✏️ ListTile

ListTile이란?

아이콘 + 텍스트 + 보조 정보 + 터치 액션을 한 줄(row)로 깔끔하게 만들어주는 위젯

기본 구조

ListTile(
  leading: Icon(Icons.person),
  title: Text('이름'),
  subtitle: Text('설명 텍스트'),
  trailing: Icon(Icons.arrow_forward_ios),
)

위치	역할
leading	왼쪽 아이콘/이미지
title	메인 텍스트 (필수)
subtitle	보조 설명
trailing	오른쪽 아이콘/버튼
onTap	탭 이벤트

---

공부 소감

오늘 본격적으로 팀플 진행해봤담 좋아하는 주제로 어플 만드니깐 재미지다~