📝 텍스트, 이미지, 아이콘 위젯

Text

Text란?

화면에 글자를 표시할 때 사용하는 기본 위젯
간단한 문자열부터 다양한 스타일, 정렬, 줄 수 조절까지 지원

기본 생성자

const Text(
  String this.data, {
  super.key,
  this.style,
  this.strutStyle,
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  @Deprecated(
    'Use textScaler instead. '
    'Use of textScaleFactor was deprecated in preparation for the upcoming nonlinear text scaling support. '
    'This feature was deprecated after v3.12.0-2.0.pre.',
  )
  this.textScaleFactor,
  this.textScaler,
  this.maxLines,
  this.semanticsLabel,
  this.textWidthBasis,
  this.textHeightBehavior,
  this.selectionColor,
})

주요 속성

style: 텍스트 스타일 설정 (크기, 색상, 굵기 등)
textAlign: 텍스트 정렬 (left, right, center 등)
maxLines: 최대 줄 수 제한
overflow: 넘치는 텍스트 처리 (예: TextOverflow.ellipsis)

사용법

// 스타일 없이 기본 사용
Text("안녕하세요")


Text(
  '제목입니다',
  // 폰트 스타일 적용
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
  // 정렬. TextAlign enum 사용
  // (열거형)은 고정된 수의 상수 값들을 나타내는 특별한 종류의 클래스
  align: TextAlign.center,
	overflow: TextOverflow.ellipsis,
	maxLines: 1,
)

Image

이미지를 앱에 표시할 때 사용하는 위젯

생성자들

// 기본 생성자
// image 속성에 AssetImage, NetworkImage 등 객체 사용
Image(image: NetworkImage('https://picsum.photos/200/300'));

// 네트워크 이미지 - 인터넷에서 이미지 불러오기
// Image 기본생성자(위)를 편하게 사용가능
Image.network('https://picsum.photos/200/300');

// 에셋 이미지(프로젝트 내 정적 이미지) 사용
// 에셋 이미지는 프로젝트 내 이미지 넣고 pubspec.yaml에 
// 에셋 이미지가 있는 경로 추가해주어야함
Image.asset('assets/test.png');

// 파일 이미지 - 기기 내부 저장소에서 이미지 불러오기(예: 다운로드 폴더, 갤러리 사진 등)
Image.file(File('휴대폰 저장소 내 경로'));

Asset 이미지 사용하기

1. 이미지 넣을 폴더 생성
2. 이미지 추가
3. pubspec.yaml 에 경로 추가

   명시적으로 필요한 파일만 포함함으로써 앱의 용량을 줄이고, 불필요한 리소스 포함을 방지

4. Image 위젯 사용

Image.asset('assets/sample.png')

주요 속성

fit: 이미지 비율 및 맞춤 (BoxFit.cover, contain, fill 등)
width, height: 이미지 크기 지정

Icon

Flutter에서 제공하는 기본 아이콘을 표시하는 데 사용

// IconData 를 생성자의 첫번째 파라미터로 전달
// 직접 IconData 객체를 만들어서 사용할 일은 없고 
// Icons 클래스 내 정의된 정적 멤버변수 사용
// Icon(Icons.star)
class Icon extends StatelessWidget {
 /// Creates an icon.
 const Icon(
   this.icon, {
   super.key,
   ...

정적(static) 멤버 변수란?

클래스가 생성되지 않아도 접근 가능한 변수
프로그램 시작시 부터 종료시 까지 존재

정의되어 있는 아이콘 목록들

https://api.flutter.dev/flutter/material/Icons-class.html
https://api.flutter.dev/flutter/cupertino/CupertinoIcons-class.html
CupertinoIcons 는 iOS 스타일 아이콘
리엑트 아이콘같은 느낌

주요 속성

icon: 표시할 아이콘 종류 (Icons.camera, Icons.home 등)
color: 아이콘 색상
size: 아이콘 크기

📝 Colum, Row

Colum

Colum이란?

자식 위젯들을 세로(수직) 방향으로 나열하는 레이아웃 위젯

• 위에서 아래로 순서대로 배치
• 자식 수는 제한 없음 (단, 화면을 넘기면 overflow 발생 가능)
• 부모 위젯으로부터 너비 제약이 없는 경우, Column은 자식 중 가장 너비가 넓은 위젯의 너비를 가짐

주요 속성

children : 배치할 위젯들의 리스트 정의
mainAxisAlignment: 수직 방향 정렬 (start, center, spaceBetween 등)
start: 위쪽 정렬
end: 아래쪽 정렬
center: 수직 가운데 정렬
spaceBetween: 위젯들 사이에 동일한 간격을 배치하고, 양 끝에는 간격 없음
spaceAround: 위젯들 사이에 동일한 간격을 배치하고, 첫 번째 위젯 앞과 마지막 위젯 뒤에는 그 간격의 절반만큼 배치
spaceEvenly: 모든 위젯과 위젯 사이, 그리고 처음과 끝에도 동일한 간격을 배치
crossAxisAlignment: 수평 정렬 (start, center, stretch 등)
start: 왼쪽 정렬
end: 오른쪽 정렬
center: 수평 가운데 정렬
stretch: 위젯들이 교차 축 방향으로 가능한 공간을 모두 채우도록 확장

Row

Row란?

자식 위젯들을 가로(수평) 방향으로 나열하는 레이아웃 위젯

• 왼쪽에서 오른쪽으로 위젯을 나열
• 자식 수는 제한 없음 (단, 화면을 넘기면 overflow 발생 가능)
• 부모 위젯으로부터 높이 제약이 없는 경우, 자식 중 가장 높이가 높은 위젯의 너비를 가짐

주요 속성

children : 배치할 위젯들의 리스트 정의
mainAxisAlignment: 수평 방향 정렬 (start, center, spaceBetween 등)
start: 왼쪽 정렬
end: 오른쪽 정렬
center: 수평 가운데 정렬
spaceBetween: 위젯들 사이에 동일한 간격을 배치하고, 양 끝에는 간격 없음
spaceAround: 위젯들 사이에 동일한 간격을 배치하고, 첫 번째 위젯 앞과 마지막 위젯 뒤에는 그 간격의 절반만큼 배치
spaceEvenly: 모든 위젯과 위젯 사이, 그리고 처음과 끝에도 동일한 간격을 배치
crossAxisAlignment: 수직 정렬 (start, center, stretch 등)
start: 위쪽 정렬
end: 아래쪽 정렬
center: 수직 가운데 정렬
stretch: 위젯들이 교차 축 방향으로 가능한 공간을 모두 채우도록 확장

SingleChildScrollView

SingleChildScrollView란?

자식 위젯 하나를 스크롤 가능하도록 만드는 위젯

• Column이나 Row 안의 내용이 화면보다 클 때 overflow를 방지하고 스크롤 가능하게 만듬
• 보통 Column과 함께 사용

주요 속성

child: 스크롤 할 위젯 배치
scrollDirection: 스크롤 방향 설정 (기본: Axis.vertical)

SingleChildScrollView(
	// Axis.vertical 또는 Axis.horizontal. 기본값 vertical
  // scrollDirection: Axis.vertical, 
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Image.network('https://picsum.photos/200/300', fit: BoxFit.cover),
      Image.network('https://picsum.photos/200/300', fit: BoxFit.cover),
      Image.network('https://picsum.photos/200/300', fit: BoxFit.cover),
    ],
  ),

📝 SizedBox, Container

SizedBox

SizedBox란?

고정된 너비(width)와 높이(height)를 갖는 박스를 생성하는 위젯

• 자녀 위젯의 크기를 지정할 때
• 간격(공백) 만들 때 사용

주요 속성

width, height: 너비와 높이를 지정
child: SizedBox 내부에 위치할 자식 위젯

사용 방법

// 간격 만들기
SizedBox(height: 20)

// 고정 크기 안에 위젯 배치
SizedBox(
  width: 200,
  height: 100,
  child: ElevatedButton(onPressed: (){}, child: Text('Hi')),
)

// 고정 크기 안에 위젯 배치
SizedBox(
  width: double.infinity, // 무한히 확대하겠다는 의미!
  height: 100,
  child: ElevatedButton(onPressed: (){}, child: Text('Hi')),
)

Container

Container란?

SizedBox + 레이아웃, 스타일, 정렬 등 다양한 기능을 가진 다목적 위젯
padding, margin, color, alignment, decoration 등 UI 스타일 설정 가능
크기가 지정되지 않으면 부모위젯의 크기를 물려받음

주요 속성

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(color: Colors.green, width: 10),
    borderRadius: BorderRadius.circular(20),
  ),
  child: Container(color: Colors.black),
)

width, height : 컨테이너의 너비와 높이를 지정
color : 배경색 설정 (⭐️ 단독 사용 시 decoration과 함께 사용할 수 없음)
padding : 자식 위젯 내부 여백 (내용과 테두리 사이 공간)
margin : 외부 여백 (Container 자신과 바깥 위젯 사이의 공간)
alignment : 자식 위젯의 정렬 위치를 지정합니다.
decoration :
→ 배경, 테두리, 그림자, 둥근 모서리 등 스타일을 설정합니다.
→ 예: BoxDecoration(borderRadius: BorderRadius.circular(8)) child
→ Container 내부에 위치할 단일 자식 위젯입니다.
→ 예: child: Text('Hello')

---

SizedBox vs Container 언제 써야할까요?

SizedBox를 사용하는 경우

단순히 공간을 만들거나 위젯의 크기만 지정할 때
스타일, 패딩, 정렬이 필요 없고 간단한 간격만 줄 때
예: 위젯 사이에 height: 16 간격 만들기

Container를 사용하는 경우

크기뿐 아니라 스타일링이 필요한 경우
배경색(color), 모서리 둥글게(borderRadius), 그림자(boxShadow) 등
padding, margin, 정렬, decoration 등 다양한 속성을 써야 할 때
복합적인 UI를 꾸밀 때 필수
padding 만 사용 시 Padding 이라는 위젯도 사용가능

Container는 여러가지 기능을 제공하기 때문에 SizedBox에 비해서 성능적으로는 좋지 않음

📝 Expanded, Spacer, Center

Expanded

Expanded란?

Row, Column 내에서 남은 공간을 차지하도록 자식 위젯을 확장해주는 위젯

• 남은 공간을 "비율대로" 나눠서 채움 (flex 속성으로 비율 조절 가능)
• 자식 위젯이 가능한 최대 크기까지 확장되도록 만듦
• 여러 개의 Expanded가 있을 경우, flex 값에 따라 공간을 나눔
• 반드시 Column, Row children 내에서만 사용 가능

Row(
  children: [
    Expanded(flex: 2, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

Spacer

Spacer란?

Expanded 와 동일하나 자녀위젯은 가지지 못함

• 빈 공간만 차지함 (중간 간격용)
• 내부에 child 없음 (자식 불가)
• Expanded(child: SizedBox.shrink()) 와 동일한 역할
• 여러 개의 Spacer를 두면 flex 비율에 따라 간격 조정 가능

📝 Stack, Align

Stack

Stack이란?

여러 위젯을 겹쳐서 배치할 수 있는 위젯

• 자식들을 children 속성에 배치하여 겹치기 가능
• 기본 정렬은 좌측 상단 (top-left)
• Positioned와 함께 자식의 위치를 지정할 수 있음
  - Positioned: Stack 내부에서 자식 위젯의 위치를 직접 지정하는 위젯
  - top, bottom, left, right 속성으로 지정
  - width, height 속성으로 크기도 지정가능
  

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.green),
    Container(width: 150, height: 150, color: Colors.blue),
    Container(width: 100, height: 100, color: Colors.yellow),
    Positioned(
      right: 10,
      bottom: 10,
      child: Container(width: 50, height: 50, color: Colors.blueGrey),
    ),
  ],
)

주요 속성

• children: 겹쳐서 배치할 위젯 리스트
• alignment: 기본 정렬 기준 (Alignment.topLeft 기본값)
• clipBehavior: 넘치는 부분 자를지 설정 (Clip.none, Clip.hardEdge 등)
  - Clip.none 자식이 부모 영역을 벗어나도 잘리지 않음 (기본값)
  - Clip.hardEdge 벗어난 영역을 딱 잘라냄
  - Clip.antiAlias 가장자리 부드럽게 잘라냄 (곡선에 부드러움 적용), 잘 안씀
  - Clip.antiAliasWithSaveLayerantiAlias + 퍼포먼스는 조금 더 낮음, 잘 안씀
  - 가로세로 200인 스택에서의 bottom: -20 인 컨테이너 (좌 none, 우 hardEdge)
  

Align & Center

Align이란?

• 부모 안에서 자식을 원하는 방향으로 정렬
• Stack 외의 위젯 내에서도 사용 가능 (예, Container)

Stack(
  children: [
    Align(
      alignment: Alignment.centerRight,
      child: Text('정렬'),
    ),
  ],
)

Center란?

• 가장 간단한 중앙 정렬 위젯
• Stack 외의 위젯 내에서도 사용 가능 (예, Container)
• 사실상 Align(alignment: Alignment.center) 과 동일

Center(child: Text('정렬'))

📝 GestureDetector, ElevatedButton

ElevatedButton

ElevatedButton이란?

• 머티리얼 스타일의 기본 버튼 위젯
• 눌렀을 때 약간 튀어나온 듯한 입체 효과(Elevation)가 적용

주요 속성

• onPressed: 버튼 클릭 시 실행할 함수
• child: 버튼 안에 표시할 위젯 (텍스트, 아이콘 등)
• style: 색상, 테두리, 폰트 크기, 모양 등 스타일 지정

void onButtonClick(){
	print("버튼 터치됨");
}
...
ElevatedButton(
  // 버튼의 스타일은 ElevatedButton.styleFrom 메서드로 정의 가능
  // 중요 파라미터
  //     - backgroundColor : 배경색
  //     - foregroundColor : 전경색 (글자, Icon)
  //     - shape : 모양. 주로 RoundedRectangleBorder 클래스를 통해 모서리 둥글기만 수정
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.red,
    foregroundColor: Colors.black,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  onPressed: onButtonClick,
  child: Text('data'),
)

익명함수 (Anonymous Function)

이름이 없는 함수
딱 한 번만 쓸 함수를 작성할 때 유용
이벤트 콜백(onPressed 등)과 같은 곳에 짧은 동작을 실행할 때 사용

void onButtonClick(){
	print("버튼 터치됨");
}

ElevatedButton(
  onPressed: onButtonClick,
  child: Text('data'),
)

ElevatedButton(
  onPressed: () {
	  print("버튼 터치됨")
  },
  child: Text('data'),
)

GestureDetector

GestureDetector이란?

사용자의 터치, 제스처(탭, 더블탭, 스와이프 등) 를 감지하여 반응하는 위젯

모든 시각적 요소를 클릭 가능하게 만들고 싶을 때 사용

주요 속성

• onTap: 탭(클릭) 이벤트
• onDoubleTap: 더블탭 이벤트
• onLongPress: 길게 누르기
• 그 외 onPanUpdate (드래그 중 움직임 감지) onVerticalDragStart, onHorizontalDragUpdate (방향별 스와이프 제스처) 등 대부분의 사용자 제스처를 처리할 수 있는 속성들이 존재
• child : 이벤트 대상이 될 위젯

GestureDetector(
  onTap: () {
    print("이미지 터치됨");
  },
  onDoubleTap: () {
    print("이미지 두번 터치됨");
  },
  onLongPress: () {
    print("이미지 길게 터치됨");
  },
  child: Image.network('https://picsum.photos/200/300'),
)

📝 기초 위젯 복습

기능/역할	대표 위젯들	설명
앱 뼈대 구성	MaterialApp, Scaffold, AppBar	앱의 기본 구조와 상단 앱바 설정
기본 출력 요소	Text, Image, Icon	텍스트, 이미지, 아이콘 출력
1열/1행 배치	Column, Row	자식 위젯들을 수직/수평으로 나열
간격/크기 조절	SizedBox, Container, Padding	크기 지정, 여백 추가, 배경 및 정렬
공간 분할	Expanded, Spacer	남은 공간을 유연하게 분할하거나 비워둠(Column, Row 내에서만)
겹치기/정렬	Stack, Positioned, Align, Center	위젯을 겹치거나 원하는 위치로 배치
입력/반응 처리	GestureDetector, ElevatedButton	클릭, 제스처 입력 등 사용자 상호작용 처리

공부 소감

html이랑 구성 방식은 다르지만 사용하는 용어는 비슷한 것 같다.
기본 위젯에 대한 강의가 끝났는데 빨리 심화 과정으로 넘어가서
화면 구성을 해보고 싶다