Flutter란?
Flutter는 구글에서 개발한 Web, Android, IOS, Windows, Linux, MacOS에서 동작이 가능한 다중 플랫폼을 지원하는 Open Source FrameWork로 고성능의 앱을 단일 코드베이스로 동작 시키는 걸 주 목적으로 한다.
이미 React Native라는 FrameWork가 있지만 Flutter라는 FrameWork로 개발을 시작하려고 한다.
Flutter Setting
Android Studio에서 Flutter Project를 진행해보기로 했다.
만약 Flutter Plugin을 다 설치하고 기타 SDK 세팅, 환경변수 세팅을 끝냈는데도 Flutter Project를 만들 때 sdk경로가 보이지 않는다면 windows 기준 cmd에서 flutter docter-v를 하고 맨 위쪽으로 올라가면 Flutter version과 함계 위치가 보인다.
기본 구조
main.dart: 앱의 진입점
analysis_options.yaml: 어떤 식으로 코드를 쓰면 효율적인지 룰을 정할 수 있음(지워도 됨)
widget: scaffold, body, dhi
widget이란?
Flutter 앱의 모든 시각적 요소를 뜻한다.
StatelessWidget
StatelessWidget은 한 번 그려진 후 변경되지 않는 위젯으로 정적인 텍스트나 변경되지 않는 로고 이미지를 표시하는데 사용된다.
상속 관계 - StatelessWidget
| 위젯 | 설명 |
|---|---|
| StatelessWidget | 상태가 없는 위젯의 루트 |
| ├─ Text | 텍스트를 표시하는 위젯 |
| ├─ Image | 이미지를 표시하는 위젯 |
| ├─ Container | 레이아웃을 구성하는 기본 위젯 |
| ├─ Row | 자식 위젯들을 가로로 배치 |
| ├─ Column | 자식 위젯들을 세로로 배치 |
| ├─ ListView | 스크롤 가능한 리스트를 제공 |
| ├─ Stack | 위젯들을 겹쳐서 배치하는 위젯 |
| ├─ Padding | 자식 위젯 주위에 여백을 추가하는 위젯 |
| ├─ Align | 자식 위젯을 부모 내에서 정렬하는 위젯 |
| ├─ Expanded | 남은 공간을 차지하도록 확장하는 위젯 |
| ├─ SizedBox | 특정 크기의 빈 공간을 생성하는 위젯 |
| ├─ Icon | 아이콘을 표시하는 위젯 |
| ├─ GestureDetector | 제스처를 감지하는 위젯 |
| ├─ Spacer | 위젯들 사이에 가변 간격을 추가하는 위젯 |
| ├─ Divider | 수평 또는 수직선을 그려주는 구분선 위젯 |
| └─ ... | 그 외 다양한 위젯들 |
Object 클래스부터 -
| 클래스 | 설명 |
|---|---|
| Object | 모든 Dart 클래스의 루트 |
| └─ Diagnosable | 디버깅과 진단을 위한 기능을 제공하는 클래스 |
| └─ DiagnosableTree | 트리 구조의 진단을 지원하는 클래스 |
| └─ Widget | 모든 Flutter 위젯의 기본 클래스 |
| └─ StatelessWidget | 상태가 없는 위젯의 루트 클래스 |
| └─ Text | 텍스트를 표시하는 Stateless 위젯 |
StatefulWidget
StatefulWidget은 상태를 가지고 있으며 상태 변경마다 업데이트 된다. 따라서 사용자 입력에 따라 동적으로 변경되는 버튼이나 폼 필드 등에 사용된다.
상속 관계 - StatefulWidget
| 위젯 | 설명 |
|---|---|
| StatelessWidget | 상태가 없는 위젯의 루트 |
| ├─ Text | 텍스트를 표시하는 위젯 |
| ├─ Image | 이미지를 표시하는 위젯 |
| ├─ Container | 레이아웃을 구성하는 기본 위젯 |
| ├─ Row | 자식 위젯들을 가로로 배치하는 위젯 |
| ├─ Column | 자식 위젯들을 세로로 배치하는 위젯 |
| ├─ ListView | 스크롤 가능한 리스트를 제공하는 위젯 |
| ├─ Stack | 위젯들을 겹쳐서 배치하는 위젯 |
| ├─ Padding | 자식 위젯 주위에 여백을 주는 위젯 |
| ├─ Align | 자식 위젯을 부모 내에서 정렬하는 위젯 |
| ├─ Expanded | 남은 공간을 차지하도록 확장하는 위젯 |
| ├─ SizedBox | 특정 크기의 빈 공간을 만드는 위젯 |
| ├─ Icon | 아이콘을 표시하는 위젯 |
| ├─ GestureDetector | 제스처를 감지하는 위젯 |
| ├─ Spacer | 위젯들 사이에 가변 간격을 추가하는 위젯 |
| ├─ Divider | 수평 또는 수직선을 그려주는 구분선 위젯 |
| └─ ... | 그 외 다양한 위젯들 |
Object 클래스부터 -
| 클래스 | 설명 |
|---|---|
| Object | 모든 Dart 클래스의 루트 |
| └─ Diagnosable | 디버깅과 진단을 위한 기능을 제공하는 클래스 |
| └─ DiagnosableTree | 트리 구조의 진단을 지원하는 클래스 |
| └─ Widget | 모든 Flutter 위젯의 기본 클래스 |
| └─ StatefulWidget | 상태를 가지는 위젯의 루트 클래스 |
| └─ MaterialButton | Material 디자인 버튼의 기본 클래스 |
| └─ TextButton | 텍스트 기반의 Material 버튼 |
MaterialApp
앱의 진입점인 main.dart의 void main()에서 MaterialApp이 항상 최상위에 즉, Run 앱 안에 가장 먼저 들어가게 되는데 개발자가 Material Design을 하게 해주는 앱으로 scaffold widget은 바로 그 밑에 위치하게 된다. scaffold widget은 개발자가 Material Design의 기본적인 시각적 구조(앱바, 바디 등)를 쉽게 구성할 수 있도록 도와준다.
widget tree
YAML 구조
YAML은 XML, C, 파이썬, 펄, RFC2822에서 정의된 e-mail 양식에서 개념을 얻어 만들어진 사람이 쉽게 읽을 수 있는 데이터 직렬화 양식이다. 주로 설정파일이나 데이터 전송 형식으로 사용되며 계층 구조로 표현된다.
JSON과 다른점은 python처럼 들여쓰기를 통해 계층구조를 표현한다는 것이다.
# yaml
person:
name: John
age: 30
skills:
- programming
- writing# json
{
"person": {
"name": "John",
"age": 30,
"skills": ["programming", "writing"]
}
}list랑 map을 섞은 구조에서는 아래처럼 첫 번쨰 대상에 -(하이픈)만 표시하면 된다.
# yaml
people:
- name: John
age: 30
skills:
- programming
- writing
- name: Jane
age: 25
skills:
- design
- painting{
"people": [
{
"name": "John",
"age": 30,
"skills": ["programming", "writing"]
},
{
"name": "Jane",
"age": 25,
"skills": ["design", "painting"]
}
]
}이미지 추가
Flutter에서 이미지를 추가하기 위해선 pubsepec.yaml파일을 수정해줄 필요가 있는데 yaml이니 들여쓰기로 계층 구분을 해주어야 한다.
참고 자료
