[Flutter] flutter_recipe

AppBar

• 화면 상단에 고정되는 머리글(툴바) 영역 위젯

• 앱 제목, 네비게이션 아이콘, 액션 버튼 등을 배치하는 데 사용됨

• 주로 Scaffold 위젯의 appBar 속성에 넣어 사용

• Scaffold의 appBar 속성 (가장 대표적)

• 직접 화면 위젯 내에서 커스텀 앱바로도 사용 가능 (예: Column 최상단에 배치)

• 커스텀 앱바가 필요할 때 PreferredSize 위젯과 조합하여 사용 가능

• 가로 → 화면 전체 너비 차지

• 세로 → 기본 높이 약 56 logical pixels (디자인 가이드에 따라 자동 조절)

• 내부 요소는 수평 정렬:
• leading: 왼쪽
• title: 가운데 (기본은 플랫폼에 따라 다름)
• actions: 오른쪽

• 가로 → 부모인 Scaffold 상단 전체 너비

• 세로 → 고정 높이, 상태바 높이 포함 시 SafeArea 자동 적용

• title → Widget? | 가운데 배치되는 제목 (보통 Text)

• leading → Widget? | 왼쪽 아이콘/버튼 (예: 뒤로가기)

• actions → List<Widget>? | 오른쪽에 배치되는 액션 버튼 목록

• backgroundColor → Color? | 배경색 (기본값: 테마 색상)

• elevation → double | 그림자 깊이 (기본값: 4.0)

• centerTitle → bool? | 제목 중앙 정렬 여부 (플랫폼별 기본값 다름)

• automaticallyImplyLeading → bool | 기본 자동 leading 생성 여부 (기본값: true)

Icon♻

• 벡터 기반의 아이콘을 표시하는 위젯

• IconData를 기반으로 Material, Cupertino, 커스텀 아이콘 사용 가능

• 기본값: 24.0

• 버튼, 앱바, 메뉴 등에서 시각적 요소로 사용

• 텍스트 옆이나 단독으로 의미 전달을 강화할 때

• 부모 제약 내에서 중심 정렬됨

• 일반적으로 가운데 정렬되는 경우가 많음

• 가로/세로: 부모가 주는 제약을 따름

• size 속성으로 명시 가능 (기본값: 24.0)

• tight constraints 하에서는 해당 영역 내에 맞춰 축소됨

• icon → IconData | 보여줄 아이콘 데이터 (예: Icons.add) (필수)

• size → double? | 아이콘 크기 (기본값: 24.0)

• color → Color? | 아이콘 색상 (기본값: 상위 위젯에서 상속)

• semanticLabel → String? | 접근성용 설명 텍스트

• textDirection → TextDirection? | 아이콘 방향 지정 (LTR/RTL)

✅ 핵심 차이점 요약

ListView♻

• 스크롤 가능한 세로 리스트(목록)를 만드는 대표 위젯

• Column과 비슷하지만, 스크롤이 가능하다는 차이점이 있음

• 화면 밖의 아이템도 접근 가능하며, 많은 데이터를 효율적으로 렌더링 가능

• 다양한 생성자(ListView.builder, separated, custom)를 통해 동적 리스트도 구현 가능

• 기본 스크롤 방향은 세로(Axis.vertical)이지만, 가로로도 만들 수 있음

• shrinkWrap, physics, controller 등을 이용해 다양한 레이아웃 및 동작 커스터마이징 가능

• ListView() → 직접 아이템 위젯 리스트를 전달하여 생성

• ListView.builder() → itemBuilder 콜백으로 필요할 때 아이템을 생성

• children → List<Widget> | 직접 넣을 위젯 목록

• scrollDirection → Axis (기본값: Axis.vertical) | 스크롤 방향 (수직/수평)

• shrinkWrap → bool (기본값: false) | true면 자식 크기에 맞춰 축소 (성능 저하 주의)

• reverse → bool (기본값: false) | true면 리스트 반대 방향 정렬 및 스크롤

• controller → ScrollController? | 스크롤 위치 제어 및 감시

• physics → ScrollPhysics? | 스크롤 동작 방식 설정 (예: 바운스 효과)

• itemBuilder → IndexedWidgetBuilder | 동적 아이템 생성 함수 (ListView.builder 사용 시)

• itemCount → int? | 아이템 총 개수 (builder 사용 시 필요)

AspectRatio

• 가로세로 비율을 유지하며 위젯의 크기를 조절할 때 사용

• 부모 위젯의 크기를 기준으로, 지정된 비율에 맞춰 자식 위젯의 크기와 배치를 조정

• aspectRatio = width / height

• 종종 Column, GridView 등에서 이미지나 카드의 비율 고정이 필요할 때 사용

• aspectRatio → 가로 ÷ 세로 비율 (예: 16/9, 1.0 등)
• aspectRatio: 2/1: 가로:세로 비율이 2:1인 가로로 긴 사각형을 만듭니다.

• child → 비율에 따라 배치할 자식 위젯

ClipRRect

• 자식 위젯을 둥근 모서리를 가진 사각형(rounded rectangle)으로 클리핑하는 위젯

• borderRadius 값을 이용해 각 모서리의 둥근 정도를 설정 가능

• 이미지, 컨테이너 등 사각형 모양의 위젯에 곡선 마스크 효과를 줄 때 주로 사용

• 실제로 위젯의 모양을 바꾸는 것이 아니라, 렌더링 시 클리핑을 적용함 (hit test는 원형/곡선 외부 클릭 무시되지 않음)

• decoration이 아닌 시각적 자르기를 위한 용도이므로, Container와 함께 자주 사용됨

• mainAxisAlignment: 자식 위젯의 정렬 방식에 따름

• crossAxisAlignment: 자식 위젯의 정렬 방식에 따름

• 가로 → 자식 위젯의 너비에 따름

• 세로 → 자식 위젯의 높이에 따름

• ClipRRect는 레이아웃에 영향을 주지 않으며, 자식 위젯의 크기 그대로 유지

• 모서리의 둥근 정도는 borderRadius로 설정

• 부모나 자식 위젯의 크기에 따라 클리핑 영역이 정해짐

• borderRadius → BorderRadius | 자식 위젯의 둥근 모서리 반경 (예: BorderRadius.circular(12))

• clipBehavior → Clip (기본값: Clip.antiAlias) | 클리핑 품질 및 방식 (antiAlias는 부드럽게 처리)

• child → Widget | 클리핑할 자식 위젯

Container♻️

• 자식 위젯을 꾸미거나 정렬하거나 크기를 제약할 수 있는 사각형 상자(Box) 역할

• "스타일 + 정렬 + 크기 제약 + 패딩 + 마진 + 데코레이션"이 가능한 다목적 박스

• 자식이 없으면 남은 모든 공간을 차지함

• 자식이 있으면 자식 크기 만큼만 공간을 차지함

• 레이아웃 구조 잡기

• 스타일링 및 간단한 장식 적용

• 자식 위젯 위치 조정 및 크기 지정

• 기본적으로 자식 위젯 크기에 맞춰짐

• 별도의 정렬 기능은 없으며, 자식 위치 조정은 alignment 속성으로 설정

• 가로
• 부모 위젯의 제약을 따르며, width 지정 가능 (지정하지 않으면 자식 크기 또는 부모 제약 따름)

• 세로
• 부모 위젯 제약 따름, height 지정 가능 (지정하지 않으면 자식 크기 또는 부모 제약 따름)

1. 부모의 제약조건에 따름

2. 부모의 크기만큼 차지함

3. 자식이 있으면 자식 크기 만큼 차지함

4. 자신의 크기가 있으면 자신의 크기를 가짐

5. 자식이 없더라도 부모가 정렬을 해주면 자신의 크기를 가질 수 있음

• child → Widget? | 내부에 표시할 단일 자식 위젯

• width → double? | 너비 (지정하지 않으면 자식 크기 또는 부모 제약 따름)

• height → double? | 높이 (지정하지 않으면 자식 크기 또는 부모 제약 따름)

• padding → EdgeInsetsGeometry? | 내부 여백 (자식과 테두리 사이 거리)

• margin → EdgeInsetsGeometry? | 외부 여백 (Container와 다른 위젯 사이 거리)

• alignment → AlignmentGeometry? | 자식 위젯 정렬 (Alignment.center, Alignment.topLeft 등)

• color → Color? | 배경색 (단, decoration과 함께 쓸 때는 decoration.color 사용)

• decoration → Decoration? | BoxDecoration으로 배경, 테두리, 그림자 등 꾸밈 설정 가능

• transform → Matrix4? | 위치/회전/크기 등 변형 적용 가능

• constraints → BoxConstraints? | 세밀한 크기 제약
• child가 있으면 child 크기에 맞춤
• child가 없으면 부모 크기에 맞춤