[Flutter 5일차]

ttt00·2026년 4월 14일

Flutter

목록 보기
6/11

Flutter 복습

StatelessWidget

상태가 변하지 않음
build() : 화면 그리는 함수

StatefulWidget

상태가 변하는 위젯
-> 사용자의 조작, 시간에 따라 화면이 변해야함

HomeScreen(껍데기)

_HomeScreenState(실제 내용)

-> 클래스를 2개로 나눠
위젯을 효율적으로 관리함

앱 실행 흐름

  1. main() : 시작점
  2. runApp() : 실행 함수
  3. MaterialApp : 앱 전체 감싸는 위젯
  4. HomeScreen() : 첫 화면 지정

레이아웃 위젯 - 화면 배치

1. Column : 세로 배치 (위 -> 아래)

children : [] 여러 위젯을 받음

2. Row : 가로 배치 (왼쪽 -> 오른쪽)

mainAxis (주축)

  • start : 위로 몰아 배치
  • center : 가운데로 모아 배치
  • spaceBetween : 양끝에 붙이고 나머지 균등 분배
  • spaceEvenly : 모든 간격을 균등하게
  • spaceAround : 양쪽 끝 간격은 절반, 나머지 균등

crossAxis (교차축)

SizedBox : 여백 생성

(=> CSS의 padding, margin)

SafeArea : 안전 영역 확보(빈 공간)

ex) 노치(카메라 영역), 홈 인디케이터를 피해서 영역을 자동으로 피해서 내용을 배치

이미지 넣는 순서
1. 폴더 만들기
- asset/image/ 폴더 생성 후 이미지 파일을 저장
2. pubspec.yaml 등록

flutter : 
	assets :
    	- asset/img/

asset/img/ 폴더 안의 모든 파일 사용 가능
저장 후 Pub get
3. 코드에서 사용

Image.asset('asset/img/image.jpg')

스타일 한 곳에서 관리
Theme.of(context).textTheme;
=> context : 위치 알려줌

0개의 댓글