📍 튜터님과 Widget 공부

Tooltip

Tooltip은 길게 누르거나(모바일)
마우스를 올렸을 때(웹/데스크톱) 짧은 설명을 보여주는 위젯
아이콘 의미 설명, 버튼 보조 설명에 사용

기본 사용

Tooltip(
  message: '즐겨찾기',
  child: Icon(Icons.star),
)

주요 속성

message : 표시할 텍스트 (필수)
child : 감쌀 위젯
waitDuration : 표시되기 전 대기 시간
showDuration : 표시 유지 시간
preferBelow : 아래에 표시할지 여부
verticalOffset : child와의 거리
decoration : 배경 스타일
textStyle : 텍스트 스타일

예시 (스타일 커스터마이징)

Tooltip(
  message: '삭제',
  waitDuration: Duration(milliseconds: 500),
  showDuration: Duration(seconds: 2),
  preferBelow: false,
  decoration: BoxDecoration(
    color: Colors.black87,
    borderRadius: BorderRadius.circular(8),
  ),
  textStyle: TextStyle(color: Colors.white),
  child: Icon(Icons.delete),
)

언제 쓸까?

아이콘만 있는 버튼
의미가 모호한 UI
접근성 보완 (스크린 리더에도 도움)

FittedBox

자식 위젯을 부모 크기에 맞게 비율 유지하면서 스케일링해주는 위젯

기본 사용

FittedBox(
  fit: BoxFit.contain,
  alignment: Alignment.center,
  child: Widget,
)

주요 속성

contain : 잘리지 않음, 여백 생길 수 있음
cover : 꽉 채움, 잘릴 수 있음
fill : 비율 무시, 찌그러질 수 있음
fitWidth : 가로 기준
fitHeight : 세로 기준
none : 스케일 안 함
clipBehavior : 자르기

Clip.none (기본값) → 안 자름
Clip.hardEdge → 즉시 자름, 가장 가벼움
Clip.antiAlias → 가장자리 부드러움
Clip.antiAliasWithSaveLayer → 가장 무거움

언제 쓸까?

텍스트/아이콘이 부모를 넘칠 때
고정 크기 박스 안에 내용 “꽉 차게 / 안 잘리게” 넣고 싶을 때
반응형에서 크기 자동 조절 필요할 때

---

공부 소감

오늘은 과제 기본 기능과 도전 기능까지 완료했다! 내일 나만의 기능 추가까지 진행한 다음에 트러블 슈팅 작성하고 다른 공부 더 해봐야겠다.