Flutter Log | 플러터 주요 개념 기록

플러터를 공부하면서 그리고 사용하면서 알게된 내용을 정리하는 강의 노트 페이지입니다.

📢 플러터를 공부하며 정리하는 강의노트입니다. 기억을 위한 요점 및 키워드 기록에 중점을 둔 글입니다. 틀린내용, 질문 등 어떤 커멘트도 환영입니다.

플러터 주요 개념

Flutter 주요 개념

프로젝트 생성하기 CMD

터미널에서 아래 명령어를 이용해 프로젝트를 생성할 수 있다.

flutter create <wanted_app_name>

프로젝트가 생성된 후 아래 명령어를 이용해 프로젝트를 실행할 수 있다.

cd <wanted_app_name>
flutter run

디렉토리 구성

플러터 프로젝트를 생성하면 아래와 같은 디렉토리가 생성된다. android, ios, lib.

디렉토리 구조

코드 작성은 lib 폴더 내의 main.dart 파일에서부터 시작한다.

main()

main() 메서드는 프로그램 실행 시 자동으로 실행된다. (따로 호출 하지 않아도)

Widget

위젯은 UI를 구성하는 블럭(유닛, 모듈)이다.

Widgets = Objects = Data Structures in Memory

Material Design Pattern

 

 

Reformat Code with 'dart format'

Flutter와 Dart 패키지를 설치하면 메뉴창에 Reformat Code with 'dart format' 이라는 항목이 생성된다.

 

Reformat Code wid dart format

위 기능을 사용하면 아래와 같이 구조화된 다크 형식으로 자동 변환이 가능하다. 단, 위 기능을 사용하기 위해선 위젯선언 끝부분 마다 콤마 (,)를 넣어주어야 한다. 

다트 포맷 적용 전

다트 포맷 적용 후

Scaffold Class

Scaffold Class는 디자인 레이아웃 구조이다. Drawers, Snack bars, Bottom Sheets 등을 간편하게 사용할 수 있다.

작성한 Widget에 Center를 적용하고 싶을 때

Center 위젯을 작성 후 기존에 작성한 내용을 가져와서 넣어야 했다. 하지만 이렇게 하는 과정에서 실수를 만들 수 있기 때문에 IDE가 제공하는 기능을 사용하는 것이 안전하다. 또 무엇보다 편리하고 빠르다. 

Image Widget

Center를 적용할 요소 왼편에 보면 노란 전구가 있다. 이 전구를 누르면  아래와 같이 Wrap with Center를 찾을 수 있다. 

Wrap with Center

이 버튼을 누르면 아래와 같이 Center가 적용된 것을 확인할 수 있다.

Center Widget

🚨 Const는 직접 작성해 넣은 것이다.

const

const는 runtime 퍼포먼스를 향상시키는데 도움을 준다. 왜냐면 const 키워드가 붙은 객체는 기기 메모리에 저장된다. 이 객체는 프로그램이 실행되면 서 한 번에 생성되고, 실행 중에는 새롭게 생성할 필요 없이 계속 호출가능하다.

🚨 다트 주요 개념에서 const 참고!

Dart Log | 다트 주요 개념 기록

가운데 정렬

1. Center 위젯을 이용해서 가운데 정렬을 할 수 있다.

2. MainAxisSize 속성을 최소값으로 설정하여 할 수 있다.

Lifting State Up