Flutter 실용가이드 - 위젯 CheatSheet

요약#

참고 자료#

이 문서의 위젯 이미지는 Flutter 공식 문서에서 가져왔습니다.

• Widget catalog - Flutter 공식 위젯 카탈로그

이 문서의 목적#

이 문서는 Flutter 개발 중 “어떤 위젯을 사용해야 하지?”라는 질문에 빠르게 답하기 위한 시각적 참조 가이드입니다. 공식 Widget Catalog의 이미지를 카테고리별로 정리하여 원하는 UI를 구현할 위젯을 쉽게 찾을 수 있습니다.

사용 방법

• 원하는 UI 형태를 이미지로 먼저 찾습니다
• 위젯 이름을 클릭하면 공식 API 문서로 이동합니다
• 이미지 아래의 한 줄 설명으로 용도를 파악합니다

Material Design 위젯#

Material Design은 Google이 만든 디자인 시스템으로, Android 앱에서 주로 사용됩니다. Flutter는 Material 3을 기본으로 지원합니다.

App Structure#

미리보기	위젯	설명
	AppBar	화면 상단에 제목과 액션을 표시하는 컨테이너
	BottomAppBar	화면 하단에 내비게이션과 주요 액션을 표시
-	Scaffold	Material Design의 기본 레이아웃 구조 제공
	MaterialApp	Material Design 앱의 최상위 위젯

---

Buttons#

미리보기	위젯	설명
	Buttons	ElevatedButton, FilledButton, OutlinedButton, TextButton
	ElevatedButton	눌렀을 때 elevation이 높아지는 채워진 버튼
	OutlinedButton	테두리가 있는 버튼, TextButton에 테두리 추가
	FloatingActionButton	주요 액션을 위한 원형 플로팅 버튼
	ExtendedFAB	텍스트가 포함된 확장 플로팅 버튼
	IconButton	아이콘 형태의 클릭 가능한 버튼
	SegmentedButton	여러 옵션 중 하나를 선택하는 분할 버튼

---

Navigation#

미리보기	위젯	설명
	NavigationBar	앱의 주요 목적지 간 전환을 위한 하단 바
	BottomNavigationBar	탭 한 번으로 최상위 뷰를 전환하는 하단 바
	NavigationDrawer	앱 좌측에서 슬라이드되어 나오는 내비게이션 패널
	Drawer	Scaffold에서 사용하는 사이드 패널
	NavigationRail	태블릿/데스크톱용 좌측 내비게이션 레일
	TabBar	탭 형식의 내비게이션 바

---

Input & Selection#

미리보기	위젯	설명
	TextField	텍스트를 입력받는 필드
	Checkbox	여러 옵션 중 하나 이상을 선택하는 체크박스
	Radio	여러 옵션 중 하나만 선택하는 라디오 버튼
	Switch	on/off 상태를 전환하는 토글 스위치
	Slider	범위 내에서 값을 선택하는 슬라이더
	DatePicker	날짜를 선택하는 캘린더 인터페이스
	TimePicker	시간을 선택하는 시계 인터페이스

---

Feedback & Status#

미리보기	위젯	설명
	AlertDialog	사용자에게 정보를 제공하거나 결정을 요청하는 대화상자
	SnackBar	화면 하단에 잠깐 표시되는 메시지
	BottomSheet	화면 하단에서 올라오는 보조 콘텐츠 패널
	CircularProgressIndicator	원형 로딩 인디케이터
	LinearProgressIndicator	선형 진행 인디케이터
	Badge	숫자나 상태를 표시하는 작은 배지
	Tooltip	요소에 마우스를 올리면 표시되는 설명 텍스트

---

Data Display#

미리보기	위젯	설명
	Card	둥근 모서리와 그림자가 있는 콘텐츠 컨테이너
	ListTile	리스트의 한 행을 나타내는 고정 높이 위젯
	DataTable	행과 열로 데이터를 표시하는 테이블
	Chip	작은 정보 블록, 선택이나 필터링에 사용
	Divider	콘텐츠를 구분하는 얇은 수평선
	Menu	선택 옵션을 표시하는 임시 메뉴
	PopupMenuButton	클릭하면 팝업 메뉴가 표시되는 버튼
	CarouselView	가로로 스크롤되는 카드 캐러셀
-	Stepper	단계별 진행 과정을 표시하는 위젯

---

Extras#

미리보기	위젯	설명
	GridView	2차원 그리드로 아이템을 배치
	ListView	스크롤 가능한 리스트
-	RefreshIndicator	당겨서 새로고침 기능 래퍼

---

Cupertino (iOS) 위젯#

Cupertino 위젯은 Apple의 Human Interface Guidelines를 따르는 iOS 스타일 위젯입니다. iOS 앱을 만들 때 네이티브와 동일한 look and feel을 제공합니다.

App Structure#

미리보기	위젯	설명
	CupertinoApp	Cupertino 디자인을 사용하는 앱의 최상위 위젯
-	CupertinoPageScaffold	iOS 스타일 기본 페이지 레이아웃 구조
	CupertinoNavigationBar	iOS 스타일 상단 내비게이션 바
	CupertinoSliverNavigationBar	iOS 11 스타일 large title 내비게이션 바
	CupertinoTabScaffold	iOS 스타일 탭 기반 앱 구조
	CupertinoTabBar	iOS 스타일 하단 탭 바

---

Buttons & Controls#

미리보기	위젯	설명
	CupertinoButton	iOS 스타일 버튼
	CupertinoSwitch	iOS 스타일 on/off 토글 스위치
	CupertinoSlider	iOS 스타일 값 슬라이더
	CupertinoCheckbox	macOS 스타일 체크박스
	CupertinoRadio	macOS 스타일 라디오 버튼
	CupertinoSlidingSegmentedControl	iOS 13 스타일 세그먼트 컨트롤

---

Input#

미리보기	위젯	설명
	CupertinoTextField	iOS 스타일 텍스트 입력 필드
	CupertinoSearchTextField	iOS 스타일 검색 필드
	CupertinoTextFormFieldRow	CupertinoFormRow 안에 CupertinoTextField를 감싼 폼 필드
	CupertinoFormRow	iOS 스타일 폼 행
	CupertinoFormSection	iOS 스타일 폼 섹션

---

Pickers#

미리보기	위젯	설명
	CupertinoPicker	iOS 스타일 휠 피커
	CupertinoDatePicker	iOS 스타일 날짜 피커
	CupertinoTimerPicker	iOS 스타일 타이머 피커

---

Dialogs & Sheets#

미리보기	위젯	설명
	CupertinoAlertDialog	iOS 스타일 알림 대화상자
	CupertinoDialogAction	CupertinoAlertDialog에서 사용하는 버튼
	CupertinoActionSheet	iOS 스타일 하단 액션 시트
	CupertinoContextMenu	iOS 스타일 컨텍스트 메뉴 (long press)
	CupertinoFullscreenDialogTransition	iOS 스타일 전체 화면 대화상자 트랜지션

---

Lists & Indicators#

미리보기	위젯	설명
	CupertinoListSection	iOS 스타일 리스트 섹션
	CupertinoListTile	iOS 스타일 리스트 행
	CupertinoListTileChevron	리스트 아이템의 chevron 아이콘
	CupertinoActivityIndicator	iOS 스타일 로딩 스피너
	CupertinoScrollbar	iOS 스타일 스크롤바

---

Text Selection Tools#

미리보기	위젯	설명
	CupertinoTextSelectionToolbar	iOS 스타일 텍스트 선택 툴바
	CupertinoTextMagnifier	텍스트 선택 시 확대경
	CupertinoDesktopTextSelectionToolbar	macOS 스타일 텍스트 선택 툴바

---

Transitions#

미리보기	위젯	설명
	CupertinoPageTransition	iOS 스타일 페이지 전환 애니메이션
	CupertinoNavigationBarBackButton	iOS 스타일 내비게이션 바 뒤로가기 버튼

---

레이아웃 위젯#

레이아웃 위젯은 자식 위젯의 위치와 크기를 결정합니다. Flutter UI의 뼈대를 구성하는 핵심 위젯들입니다.

Single Child 레이아웃#

미리보기	위젯	설명
	Container	padding, margin, 배경색, 테두리 등을 제공하는 다목적 컨테이너
	Center	자식을 정중앙에 배치
	Align	자식을 특정 위치에 정렬
	Padding	자식 주변에 여백 추가
	ConstrainedBox	자식에게 추가 제약 조건 부여
-	LimitedBox	제약이 없을 때만 크기 제한
	SizedBox	특정 크기의 빈 박스 또는 자식 크기 강제
-	FittedBox	자식을 부모에 맞게 스케일/정렬
-	AspectRatio	자식의 가로세로 비율 유지
-	FractionallySizedBox	부모 크기의 비율로 자식 크기 결정
-	IntrinsicWidth	자식의 intrinsic width로 크기 결정
-	IntrinsicHeight	자식의 intrinsic height로 크기 결정
-	Baseline	자식의 baseline에 따라 위치 결정
-	Offstage	자식을 레이아웃에서 숨기기
-	OverflowBox	부모 제약을 무시하고 자식에게 다른 제약 부여
-	Transform	자식을 페인팅 전에 변환 (회전, 스케일 등)

---

Multi Child 레이아웃#

미리보기	위젯	설명
	Row	자식들을 가로 방향으로 배치
	Column	자식들을 세로 방향으로 배치
	Stack	자식들을 겹쳐서 배치
-	IndexedStack	Stack에서 한 번에 하나의 자식만 표시
-	Wrap	여러 줄/열로 자식들을 배치 (자동 줄바꿈)
-	Flow	flow 레이아웃 알고리즘으로 배치
-	Table	테이블 형태로 자식들 배치
	Expanded	Row/Column의 남은 공간을 채움
	LayoutBuilder	부모 크기에 따라 다른 위젯 빌드
-	CustomMultiChildLayout	커스텀 delegate로 여러 자식 배치
-	CustomSingleChildLayout	커스텀 delegate로 단일 자식 배치

---

애니메이션 위젯#

애니메이션 위젯은 UI에 움직임과 전환 효과를 추가합니다. Implicit Animation¹과 Explicit Animation² 두 가지 유형이 있습니다.

Implicit Animation (암시적 애니메이션)#

속성 값이 변경되면 자동으로 애니메이션되는 위젯입니다. 가장 사용하기 쉬운 애니메이션 방식입니다.

미리보기	위젯	설명
	AnimatedContainer	Container의 속성이 바뀌면 자동 애니메이션
	AnimatedOpacity	투명도 변화를 자동 애니메이션
-	AnimatedAlign	정렬 위치 변화를 자동 애니메이션
-	AnimatedPadding	padding 변화를 자동 애니메이션
-	AnimatedPositioned	Stack 내 위치 변화를 자동 애니메이션
-	AnimatedSize	크기 변화를 자동 애니메이션
-	AnimatedDefaultTextStyle	텍스트 스타일 변화를 자동 애니메이션
-	AnimatedPhysicalModel	PhysicalModel의 속성 변화를 자동 애니메이션
-	AnimatedCrossFade	두 자식 간 크로스페이드 전환
-	AnimatedList	아이템 삽입/삭제 시 자동 애니메이션되는 리스트
-	AnimatedModalBarrier	뒤 위젯과의 상호작용을 막는 애니메이션 배리어

---

Explicit Animation (명시적 애니메이션)#

AnimationController³를 사용하여 직접 제어하는 애니메이션입니다. 더 세밀한 제어가 필요할 때 사용합니다.

미리보기	위젯	설명
	FadeTransition	투명도 애니메이션
-	ScaleTransition	스케일 애니메이션
-	RotationTransition	회전 애니메이션
-	SlideTransition	위치 이동 애니메이션
-	SizeTransition	크기 변화 애니메이션
-	AlignTransition	정렬 애니메이션
-	PositionedTransition	Stack 내 위치 애니메이션
-	RelativePositionedTransition	상대적 위치 애니메이션
-	DecoratedBoxTransition	Decoration 애니메이션
-	DefaultTextStyleTransition	텍스트 스타일 애니메이션
-	MatrixTransition	Matrix4 변환 애니메이션
-	AnimatedWidget	Listenable 값 변화 시 재빌드되는 기본 클래스
-	AnimatedBuilder	애니메이션 빌더 위젯

---

Hero Animation#

미리보기	위젯	설명
	Hero	화면 전환 시 위젯이 날아가는 애니메이션

---

스크롤링 위젯#

스크롤 가능한 콘텐츠를 만드는 위젯입니다.

기본 스크롤 위젯#

미리보기	위젯	설명
	ListView	가장 흔히 사용되는 스크롤 가능한 리스트
	GridView	2차원 그리드 스크롤 뷰
-	PageView	페이지 단위로 스크롤
-	SingleChildScrollView	단일 자식을 스크롤 가능하게 함
-	CustomScrollView	Sliver를 사용한 커스텀 스크롤 효과
-	NestedScrollView	중첩 스크롤 뷰
-	ReorderableListView	드래그로 항목 순서 변경 가능한 리스트
-	DraggableScrollableSheet	드래그로 크기 조절 가능한 스크롤 시트

---

스크롤 유틸리티#

미리보기	위젯	설명
-	Scrollable	스크롤 동작의 기반 클래스
	Scrollbar	Material Design 스크롤바
-	ScrollConfiguration	하위 트리의 스크롤 동작 설정
-	NotificationListener	스크롤 Notification 감지

---

Sliver 위젯#

Sliver는 스크롤 가능한 영역의 일부를 구현하는 특수 위젯입니다. CustomScrollView⁴ 안에서 사용됩니다.

미리보기	위젯	설명
	SliverAppBar	스크롤에 따라 확장/축소되는 AppBar
-	SliverList	선형 배열로 자식들을 배치하는 sliver
-	SliverGrid	2차원으로 자식들을 배치하는 sliver
-	SliverFixedExtentList	고정 높이 항목의 sliver 리스트
-	SliverFillRemaining	viewport 남은 공간을 채우는 sliver
-	SliverToBoxAdapter	일반 Box 위젯을 sliver로 감싸기
-	SliverPadding	sliver에 padding 적용
-	SliverPersistentHeader	스크롤 시 상단에 고정되는 헤더
-	SliverFadeTransition	sliver의 opacity 애니메이션
-	SliverChildBuilderDelegate	builder 콜백으로 sliver 자식 생성
-	SliverChildListDelegate	명시적 리스트로 sliver 자식 제공

입력 및 폼 위젯#

사용자 입력을 받는 위젯입니다.

미리보기	위젯	설명
-	Form	여러 폼 필드를 그룹화하는 선택적 컨테이너
-	FormField	단일 폼 필드의 기본 클래스
-	Autocomplete	텍스트 입력 시 자동완성 옵션 제공
	DropdownButton	드롭다운 선택 메뉴

시각 효과 위젯#

시각적 효과를 추가하는 위젯입니다.

미리보기	위젯	설명
	Opacity	자식을 부분적으로 투명하게
-	BackdropFilter	뒤의 콘텐츠에 필터(blur 등) 적용
-	ClipRect	사각형으로 자식 클리핑
-	ClipOval	타원형으로 자식 클리핑
-	ClipPath	경로로 자식 클리핑
-	DecoratedBox	Decoration을 페인트하는 위젯
-	RotatedBox	90도 단위로 자식 회전
-	CustomPaint	paint 단계에서 커스텀 그리기

제스처 및 상호작용 위젯#

사용자 제스처와 상호작용을 처리하는 위젯입니다.

미리보기	위젯	설명
	GestureDetector	다양한 제스처 감지 (탭, 드래그 등)
	Draggable	드래그 가능한 위젯
-	LongPressDraggable	long press로 드래그 시작
-	DragTarget	Draggable을 받는 타겟
	Dismissible	스와이프로 해제 가능한 위젯
-	InteractiveViewer	팬/줌 상호작용 제공
-	AbsorbPointer	hit testing 중 포인터 이벤트 흡수
-	IgnorePointer	hit testing 시 자식을 무시

비동기 빌더 위젯#

비동기 데이터를 처리하는 위젯입니다.

미리보기	위젯	설명
	FutureBuilder	Future 상태에 따라 위젯 빌드
	StreamBuilder	Stream 상태에 따라 위젯 빌드

유틸리티 위젯#

기타 유용한 위젯입니다.

미리보기	위젯	설명
-	Icon	Material Design 아이콘 표시
-	Image	이미지 표시
-	Text	단일 스타일의 텍스트 표시
-	RichText	여러 스타일의 텍스트 표시
	FlutterLogo	Flutter 로고 위젯
-	Placeholder	개발 중 위치 표시용 박스
-	Navigator	화면 전환 스택 관리
-	MediaQuery	미디어 쿼리 데이터 제공
-	Theme	하위 트리에 시각적 테마 적용
-	Semantics	접근성을 위한 의미 정보 제공
-	MergeSemantics	하위 위젯의 semantics 병합
-	ExcludeSemantics	하위 위젯의 semantics 제외
-	KeyboardListener	키보드 이벤트 감지
	WidgetsApp	앱에 필요한 기본 위젯들의 래퍼
-	AssetBundle	이미지, 문자열 등 에셋 리소스 관리

위젯 선택 가이드#

한계#

• 모든 위젯의 세부 속성과 사용법은 공식 API 문서를 참조해야 합니다.
• 일부 위젯은 공식 문서에 미리보기 이미지가 없어 텍스트 링크만 제공됩니다.
• 위젯은 Flutter 버전에 따라 추가되거나 deprecated될 수 있습니다.