Flutter가 무엇인지 알아보고 기본적인 위젯 사용법을 익힌다.

Flutter란?

안드로이드와 IOS 기반 앱을 개발하는 데 쓰이는 크로스플랫폼 프레임워크이다.

핫 리로드 지원

디버그 모드로 구동할 시 코드를 수정할 대마다 최상위 위젯부터 build 함수를 호출하기 때문에 반영이 빠르다.

핫 리로드가 무엇인지 궁금해서 더 찾아보았는데 앱의 현 상태와 메모리에 쌓인 데이터를 유지한 채로 변경사항을 반영하는 방식이라고 한다.
일단 한 번 실행된 앱의 상태는 코드를 수정하기 전이랑 동일하고 변경된 부분만 새로 보여주지만, 대신 속도가 빠르다는 장점이 있다.

AOT 지원

개발 단계와 다르게 배포 단계에서 바로 기계어로 컴파일하기 때문에 실 사용 시 빠른 속도를 체감할 수 있다. 하지만 개발 단계에서는 핫 리로드를 지원하기 위해 JIT를 사용해야 한다.

쉬운 난이도

Java 와 비슷한 문법, HTML 및 CSS 와 비슷한 디자인 구성을 가지고 있어 쉽게 배울 수 있다.

Flutter 기초 디렉토리 구조

• lib : 코드 파일
• android/ios/linux/webOS : 개발 환경 외적으로 디바이스에서 지원하는 기능(센서 등)이 필요할 때 이곳에 구현
• test : 테스트 파일
• pubspec.yaml : 에셋, 패키지 등등 임포트할 때 작성

---

위젯

위젯이란?

UI를 구성하는 기본 요소

기본 구조

1. 앱 전체에서 MaterialApp 하나를 선언한다.

2. MaterialApp 하위에 각 페이지마다 Scaffold 를 가지고 있다.

   -> 하지만 실제로 구현할 때는 가독성이나 코드 재사용성을 챙기기 위해 한 개의 Scaffold 에 다 구현하는 것보다 부분별로 따로 위젯을 지정하는 편이 좋다.

3. 레이아웃 구성은 Column 과 Row 를 적절하게 배치해서 한다.

---

Flutter 기능 메모

• Column 이나 Row 안에 배치할 요소가 다수인 경우 child 대신 children 키워드를 쓴다.
• SafeArea 는 상단바에 해당하는 만큼의 여백을 제공한다. 그 외에 Padding 으로도 여백을 정할 수 있다.
• Text 클래스를 더블클릭하면 볼 수 있는 속성 목록으로 정렬, 폰트, 색상 등을 제어할 수 있다. 같은 방식으로 다른 클래스에도 어떤 속성들이 있는지 열람할 수 있다.
• Widget inspector 를 이용해서 선택한 영역이 실제로 얼만큼의 공간을 차지하는지 확인할 수 있다.
• spacer 와 flexer 를 이용하면 각 요소의 크기를 비율로 정할 수 있다.
• Image/fit 은 이미지의 크기를 차지하는 영역에 맞춰준다.
• SizedBox 안에 위젯을 넣을 수 있다.