📍 튜터님과 Widget 공부

📝 AbsorbPointer

AbsorbPointer란?

AbsorbPointer는 터치 / 클릭 / 제스처 이벤트를 가로채서 자식 위젯에 전달하지 않는 위젯
UI는 그대로 보이지만 사용자 입력만 차단

특징

화면에 보이지만 눌리지 않음
레이아웃, 애니메이션, 스크롤 영향 없음
포커스·터치 이벤트만 차단

기본 구조

AbsorbPointer(
  absorbing: true,
  child: Widget,
);

absorbing 속성

값	동작
true	모든 포인터 이벤트 차단
false	정상 동작

동작 원리

터치 이벤트가 AbsorbPointer에서 소멸
자식 위젯까지 전달되지 않음
아래 레이어 위젯도 이벤트 못 받음

사용 목적

버튼 연타 방지
로딩 중 입력 차단
서버 요청 중 UI 고정
상태에 따른 임시 비활성화

📝 Transform

Transform란?

Transform은 위젯의 위치·크기·회전·기울기 등을 변형해서 그리는 위젯
레이아웃은 그대로 두고, 화면에 그리는 방식만 바꿈

핵심 포인트

레이아웃 계산 이후 적용
실제 크기/위치는 변하지 않음
보이는 모습만 변함
클릭 영역은 원래 위치 기준

기본 구조

Transform(
  transform: Matrix4,
  child: Widget,
);

주요 생성자

Transform.translate

위치 이동

Transform.translate(
  offset: Offset(20, 10),
  child: Widget,
);

Transform.scale

확대 / 축소

Transform.scale(
  scale: 1.2,
  child: Widget,
);

Transform.rotate

회전

Transform.rotate(
  angle: 0.5,
  child: Widget,
);

alignment

변형 기준점 설정

Transform.scale(
  scale: 1.5,
  alignment: Alignment.topLeft,
  child: Widget,
);

값	기준
center	중앙 (기본값)
topLeft	좌상단
bottomRight	우하단

Matrix4 사용 (고급)

이동

Transform(
  transform: Matrix4.translationValues(20, 0, 0),
  child: Widget,
);

회전

Transform(
  transform: Matrix4.rotationZ(0.3),
  child: Widget,
);

스케일

Transform(
  transform: Matrix4.diagonal3Values(1.2, 1.2, 1),
  child: Widget,
);

skew (기울이기)

Transform(
  transform: Matrix4.skewX(0.2),
  child: Widget,

📝 클론 코딩

넷플릭스 어플 보며 레이아웃 구조 연습

공부 소감

이제 플러터로 레이아웃 짜는 것 어렵지 않게 구현할 수 있을 것 같다.
내일은 상태 관리 패키지를 공부해서 어렵게 값 넘기는 걸 쉽게 바꿔봐야겠다.