[Flutter] flutter_profile

DefaultTabController

• tabBar와 TabBarView사이의 연동을 자동으로 도와주는 컨트롤러

• length → 필수, 탭의 개수 설정

• child → 자식 요소 필요함

• initialIndex → 시작시 어느 탭에서 시작할 것인가

TabBar

• 사용자가 탭을 전환할 수 있는 탭 버튼 UI

• 탭 항목(Tab) 리스트를 표시하며, 현재 선택된 탭을 시각적으로 강조

• tabs → List<Tab> 또는 다른 위젯들

• isScrollable: true → 탭이 많을 때 좌우 스크롤 가능.

TabBarView

• TabBar와 연결된 실제 콘텐츠 화면을 보여주는 부분

• 반드시 DefaultTabController나 TabController와 함께 사용해야 함

• 탭 개수와 children 개수는 일치해야 함.

• children → 각 탭에 해당하는 위젯 리스트

• 교차축(height) 제약이 필수 → Expanded, SizedBox 등으로 감싸줘야 함

CircleAvatar

• 원형 프로필 이미지, 아이콘 또는 텍스트 등을 표시하기 위한 위젯

• 내부적으로 정사각형 영역을 만들고 원형으로 클리핑 처리

• backgroundImage를 이용해 네트워크 또는 에셋 이미지를 원형으로 표시 가능

• child를 지정하면 텍스트나 아이콘 등도 중앙에 배치 가능

• 약간의 내부 padding이 존재하여 child나 이미지가 조금 작아 보일 수 있음

• 일반적인 사각형 이미지 위젯(Image)과 달리 레이아웃 계산 및 스타일이 단순화되어 있음

• mainAxisAlignment: 부모에 따름

• crossAxisAlignment: 부모에 따름

• 가로 → radius × 2 또는 부모의 제약 내 최대 크기

• 세로 → radius × 2 또는 부모의 제약 내 최대 크기

• 정사각형 형태로 내부 공간 확보 → 원형으로 자동 클리핑

• 내부 위젯은 중앙에 정렬

• 부모가 주는 제약보다 클 수 없음

• radius → double? | 원의 반지름. 지정하면 가로/세로 크기는 radius × 2

• minRadius → double? | 최소 반지름 (자동 크기 조정 시 사용)

• maxRadius → double? | 최대 반지름 (자동 크기 조정 시 사용)

• backgroundColor → Color? | 배경 색상

• foregroundColor → Color? | child의 텍스트나 아이콘 색상

• backgroundImage → ImageProvider? | 배경에 사용할 이미지 (원형으로 자동 자름)

• onBackgroundImageError → ImageErrorListener? | 이미지 로드 실패 시 콜백

• child → Widget? | 원 안에 배치할 위젯 (보통 텍스트나 아이콘)

ElevatedButton

• 입체감(그림자)이 있는 기본 버튼 위젯

• 클릭(터치)에 반응하며, 주로 "확인", "제출", "다음" 등의 강조할 작업 버튼

• onPressed → 버튼 클릭 시 실행할 함수, onPressed: () => print('클릭')

• onLongPress → 길게 누를 때 실행할 함수, onLongPress: () => …

• child → 버튼 안에 표시할 위젯, Text, Icon, Row 등

• style → 버튼 스타일 (색상, 크기, 패딩, 테두리 등), style: ElevatedButton.styleFrom(...)

IconButton

• 아이콘을 누를 수 있는 버튼 형태로 만든 위젯

• icon → Icon type, 표시할 아이콘, Icon(Icons.arrow_back_ios)

• onPressed → VoidCallback type, 실행될 함수

• iconSize → 아이콘 크기 (기본 24.0)

• color → Color type, 아이콘 색상

• padding → EdgeInsets type, 내부 여백

• alignment → Alignment type, 아이콘 정렬 방식

Align♻

• 자식 위젯을 자신의 크기(영역) 내에서 지정된 방향으로 정렬

• 부모의 모든 공간을 차지한다

• alignment → Alignment type, 자식의 위치 (기본값: center)

• child → Widget? type, 정렬할 대상 위젯

InkWell♻

• 터치(클릭) 효과를 주는 위젯

• 버튼처럼 보이지 않는 요소에 Ripple 효과(물결 퍼짐)를 주고 싶을 때 사용

• 자식 위젯을 감싸고 터치가 감지되면 물결(ripple) 애니메이션과 함께 콜백 함수를 실행

• 클릭 효과는 부모 크기를 따라간다

• 디자인은 부모에 적용하는게 좋다

• onTap → void Function()? type, 터치 시 실행할 콜백

• borderRadius → 물결 효과가 퍼지는 경계의 둥글기

• splashColor → 탭할 때 퍼지는 물결 색상

• radius → 물결의 최대 반지름

• child → Widget type, 터치 대상 위젯

GridView.builder

• ListView.builder의 그리드 버전

• 아이템 수가 많거나 동적으로 만들어야 할 때 성능상 유리

• 빌더 함수로 아이템을 하나씩 생성

• gridDelegate → SliverGridDelegate type, 그리드 배치 방식

• itemBuilder → IndexedWidgetBuilder type, 람다 or 익명, 각 아이템 만드는 함수

• itemCount → int? type, 아이템 개수

• padding → EdgeInsetsGeometry type, 안쪽 여백

• scrollDirection → Axis type, 스크롤 방향 (세로/가로)

SliverGridDelegateWithFixedCrossAxisCount

• 이름 그대로, crossAxisCount(가로 방향 아이템 수)를 고정(Fixed)해서 그리드를 구성합니다

• crossAxisCount → 한 행에 들어갈 아이템 수 (열 수)

• mainAxisSpacing → 위아래 간격 (행 간 간격)

• crossAxisSpacing → 좌우 간격 (열 간 간격)

• childAspectRatio → 너비 대비 높이 비율 (width / height)
• 1.0이면 정사각형
• 2.0이면 가로로 긴 직사각형
• 0.5면 세로로 긴 직사각형