[Flutter] flutter_store

프로젝트 생성

• 프로젝트 이름은 _와 소문자만 사용 가능

• stl → 코드 스니펫 → 약어

• const → 일단 삭제, 아직 모름

실행

• placeholder는 빈 공간을 차지하는 위젯이다

실습

Flutter widget index

An alphabetical list of Flutter widgets.

https://docs.flutter.dev/reference/widgets

CupertinoSheetRoute (Widget of the Week)

Use this week’s widget of the week, CupertinoSheetRoute, to display an iOS-styled sheet view. API docs: CupertinoSheetRoute → https://goo.gle/3Ye2EpZ showCupertinoSheet → https://goo.gle/3YeWypi Watch more Flutter Widget of the Week → https://goo.gle/FlutterWidget Subscribe to Flutter → https://goo.gle/FlutterYT #Flutter #WidgetOfTheWeek #CupertinoRadio Speaker: Mitchell Goodwin Products Mentioned: Flutter

https://www.youtube.com/watch?v=5H-WvH5O29I&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

세팅

콤마 포멧 analysis_options.yaml

formatter:
  trailing_commas: preserve

• 위 코드 추가(flutter 3.32 버전 이상, dart 3.8 버전 이상)

개발자 도구

• 개발자 모드 보는 법

위젯

MaterialApp

• 안드로이드 디자인

• home → 몸통

• debugShowCheckedModeBanner → 우측 상단 debug 표시 설정

Scaffold

• 화면의 기본 레이아웃 구조를 제공하는 위젯

• 앱을 만들 때 가장 먼저 사용하는 위젯 중 하나

• 기본 배치 스타일이 정해짐

• 기본 view port 를 기준으로 크기를 잡음(화면크기)

• 이 위젯 자체가 화면이라고 생각하면 됨

• body → 화면의 주요 내용을 표시하는 영역
• 이 body 내부에 어떤 요소가 들어오면 body 크기로 딱 정해진다

• appBar → PreferredSizeWidget? | 상단 앱바 (일반적으로 AppBar)

• endDrawer → Widget? | 우측에서 슬라이드되는 사이드 메뉴
• 자동으로 햄버거 메뉴 버튼이 생김

• backgroundColor → Color? | Scaffold 전체 배경색

Column♻

• 세로방향으로 block

• 가로방향으로 inline

• mainAxisAlignment: start (세로 위쪽 정렬)

• crossAxisAlignment: center (가로 가운데 정렬)

• 세로 → 기본: 가능한 최대 높이까지 사용

• 가로 → 부모가 제약을 주지 않으면 자식 중 가장 넓은 위젯 너비만큼 차지

• children → List<Widget> | 세로로 배치될 자식 목록

• mainAxisAlignment → MainAxisAlignment | 수직 방향 정렬 (위–아래 기준 정렬 방식)

• crossAxisAlignment → CrossAxisAlignment | 수평 방향 정렬 (왼쪽–오른쪽 기준 정렬 방식)

• verticalDirection → VerticalDirection | 위에서 아래로 또는 아래에서 위로 정렬할지 선택

Row♻

• 세로방향으로 inline

• 가로방향으로 block

• 내부 요소는 가운데 정렬이 기본(세로)

• mainAxisAlignment: start (가로 왼쪽 정렬)

• crossAxisAlignment: center (세로 가운데 정렬)

• 가로 → 기본: 가능한 최대 너비까지 사용

• 세로 → 부모가 제약을 주지 않으면 자식 중 가장 높은 위젯 높이만큼 차지

• children → List<Widget> | 가로로 배치할 자식 목록

• mainAxisAlignment → MainAxisAlignment | 수평 방향 정렬 (왼쪽–오른쪽 기준 정렬 방식)

• crossAxisAlignment → CrossAxisAlignment | 수직 방향 정렬 (위–아래 기준 정렬 방식)

• textDirection → TextDirection? | 텍스트 및 정렬 방향 (LTR, RTL) 설정

• verticalDirection → VerticalDirection | 자식들을 위에서 아래로 또는 아래에서 위로 정렬할지 선택

• 각각의 축 방향으로 공간 설정을 할 수 있다

Text♻

• 텍스트를 화면에 표시하는 위젯

• 한 줄 또는 여러 줄 텍스트 표시 가능

• 기본값: 14.0

• 텍스트는 부모의 가로 제약을 따라 너비가 결정됨

• 기본적으로 가능한 최대 너비까지 확장

• 텍스트 줄바꿈 및 정렬은 TextAlign 속성으로 조절 가능

• 가로 → 부모가 주는 최대 너비를 따름 (부모가 제한 없으면 텍스트 길이만큼)

• 세로 → 텍스트 줄 수에 따라 자동 확장 (기본 1줄)

• data → String | 표시할 텍스트 내용 (필수)

• style → TextStyle? | 텍스트 스타일 (글꼴, 크기, 색상 등)

• textAlign → TextAlign? | 텍스트 정렬 (left, center, right 등, 기본값: start)

• maxLines → int? | 최대 줄 수 지정 (기본값: null, 무제한)

• overflow → TextOverflow? | 텍스트가 넘칠 때 처리 방법 (ellipsis 등, 기본값: clip)

• softWrap → bool | 자동 줄바꿈 여부 (true 기본값)

TextStyle

• 텍스트의 시각적 스타일을 정의하는 클래스

• Text 위젯의 style 속성으로 주로 사용됨

• color → Color? | 글자 색상 (기본값 없음)

• fontSize → double? | 글자 크기 (logical pixels, 기본값 없음)

• fontWeight → FontWeight? | 글자 굵기 (w100 ~ w900, 기본값 없음)

• fontStyle → FontStyle? | 글자 스타일 (normal 또는 italic, 기본값 없음)

• letterSpacing → double? | 글자 간격 조절 (기본값 없음)

• wordSpacing → double? | 단어 간격 조절 (기본값 없음)

• height → double? | 줄 높이 배수 (line height, 기본값 없음)

• decoration → TextDecoration? | 밑줄, 취소선 등 텍스트 장식 (기본값 없음)

• decorationColor → Color? | 텍스트 장식 색상 (기본값 없음)

• decorationStyle → TextDecorationStyle? | 텍스트 장식 스타일 (solid, dotted 등, 기본값 없음)

Padding

• 자식 위젯에 여백(공간)을 주기 위한 Flutter 레이아웃 위젯

• 부모 위젯과 자식 위젯 사이의 거리를 조정하여, UI 요소들이 붙지 않고 보기 좋게 배치

• Padding 자체는 크기를 가지지 않고, 자식 위젯 크기 + 패딩 크기만큼 공간 차지

• 부모가 주는 제약 안에서 자식 크기와 패딩 합산 크기만큼 영역 차지

• 가로 → 자식 너비 + 왼쪽, 오른쪽 패딩 합산

• 세로 → 자식 높이 + 위, 아래 패딩 합산

• padding → EdgeInsetsGeometry | 패딩 크기 지정 (필수)
• 주로 EdgeInsets.all(), EdgeInsets.symmetric(), EdgeInsets.only() 등으로 설정

• child → Widget? | 패딩을 적용할 자식 위젯

• alt + enter

Spacer

• 빈 공간을 자동으로 차지해서 부모 위젯 내 다른 위젯 사이를 벌려주는 역할

• 주로 Row, Column, Flex 같은 flex 계열 위젯 내부에서 사용

• 자식 위젯 사이에 가변적인 간격을 만들고 싶을 때 유용

• 기본 정렬

• 크기는 flex 값에 비례해 가로 또는 세로로 확장됨

• 기본 정렬과 관계없이 지정한 비율만큼 빈 공간을 차지

• 가로(수평) 또는 세로(수직) → flex 비율에 따라 가능한 최대 공간 차지

• 부모가 주는 flex 제약에 따라 크기 결정

• flex → int | 차지할 공간 비율 (기본값: 1)

• key → Key? | 위젯 키 (기본값 없음)

그림 그릴 수 없는 영역 처리 위젯

inset

• 그림을 그릴 수 없는 영역

SafeArea

• inset 영역을 빈 공간으로 채워줌

• Flutter에서 노치(notch), 상태바, 홈 인디케이터 등 기기의 시스템 UI와 겹치지 않도록 자동으로 안전한 영역(화면의 안전 구역) 안에서만 위젯이 배치되게 만들어 주는 보호용 위젯

• SafeArea 자체는 크기를 부모로부터 받으며,

• 내부 자식 위젯은 시스템 UI가 차지하는 부분을 제외한 영역에서만 표시됨

• 가로/세로 → 부모가 주는 전체 크기에서 시스템 UI 영역만큼 여백을 자동으로 추가하여
자식에게 제약으로 전달

• 자식은 이 제약 내에서 크기를 결정

• child → Widget | 안전 영역 안에 배치할 자식 위젯 (필수)

• left → bool | 왼쪽 안전 영역 적용 여부 (기본값: true)

• top → bool | 위쪽 안전 영역 적용 여부 (기본값: true)

• right → bool | 오른쪽 안전 영역 적용 여부 (기본값: true)

• bottom → bool | 아래쪽 안전 영역 적용 여부 (기본값: true)

• minimum → EdgeInsets | 기본 안전 영역 외에 추가할 최소 여백 (기본값: EdgeInsets.zero)

• maintainBottomViewPadding → bool | 키보드 등으로 인해 바닥 여백 유지 여부 (기본값: false)

위젯

Expanded♻

• Flex 계열 위젯(Row, Column, Flex) 안에서 사용되어
남은 공간을 차지하며 자식을 확장시키는 위젯

• 자식 위젯이 부모의 남은 공간을 flex 비율에 따라 채우도록 강제함

• Expanded는 부모인 Row, Column, Flex가 주는 flex 제약을 받고

• 자식 위젯을 가능한 최대 크기로 확장시킴

• 가로 또는 세로 → flex 값에 비례하여 남은 공간을 차지

• 자식 위젯 크기는 부모의 flex 제약에 맞춰 최대한 커짐

• 여러 Expanded가 있으면 flex 비율에 따라 공간을 나눔

• flex → int | 차지할 공간 비율 (기본값: 1)

• child → Widget | 확장할 자식 위젯 (필수)

• key → Key? | 위젯 키 (기본값 없음)

• 비율 조정 가능

Image.asset

• 로컬에 있는 이미지 파일을 불러와 화면에 표시

• 앱 프로젝트 내의 assets 폴더에 포함된 이미지 리소스를 활용할 수 있다

• 경로는 루트 디렉토리를 기준

• 이미지 추가 후 펌웨어를 다시 해야 함
• 세모버튼 다시 눌러서 새로 시작

• name → 이미지 경로 (assets/images/a.png 등)

• width → 이미지 가로 크기

• height → 이미지 세로 크기

• fit → BoxFit? type, 이미지가 자리에 맞게 채워지는 방식
• cover → 가득 채우나 튀어나온 부분 자름
• fill → 비율 상관없이 가득 채움
• contain → 기본값, 비율에 맞게 유지

• alignment → Alignment type, 이미지의 정렬 방식 (center, topLeft 등)

Image.network

• 인터넷상의 이미지 URL을 통해 이미지를 불러와 화면에 표시할 때 사용하는 위젯

• src → 불러올 이미지 URL

• width → 이미지 가로 크기

• height → 이미지 세로 크기

• fit → BoxFit? type, 이미지가 자리에 맞게 채워지는 방식
• cover → 가득 채우나 튀어나온 부분 자름
• fill → 비율 상관없이 가득 채움
• contain → 기본값, 비율에 맞게 유지

• alignment → AlignmentGeometry type, 이미지의 정렬 방식 (center, topLeft 등)

• loadingBuilder → LoadingBuilder? type, 이미지 로딩 중 UI 표시

• errorBuilder → ErrorWidgetBuilder? type, 로드 실패 시 대체 UI 표시

SizedBox♻

• 고정된 크기의 빈 공간을 만들거나, 자식 위젯의 크기를 지정할 때 사용하는 위젯

• 자식이 없으면 빈 박스 역할, 있으면 자식 크기 강제 조절 가능

• 부모가 주는 제약 안에서 지정한 너비와 높이를 가지거나, 자식 크기에 맞춤

• 너비나 높이 중 하나만 지정하면, 나머지는 자식 또는 부모 제약에 따름

• 가로 → width가 지정되어 있으면 그 크기 사용, 아니면 자식 너비 또는 부모 제약 따름

• 세로 → height가 지정되어 있으면 그 크기 사용, 아니면 자식 높이 또는 부모 제약 따름

• width → double? | 박스 너비 (기본값 없음)

• height → double? | 박스 높이 (기본값 없음)

• child → Widget? | 크기를 지정할 자식 위젯 (기본값 없음)

• key → Key? | 위젯 키 (기본값 없음)