Flutter 기본-1. flutter 프로젝트, main.dart의 기본구조와 간단한 속성들

 

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.

https://www.youtube.com/@codingchef

코딩셰프

---

 

1. 프로젝트 구조

Android Studio에서 flutter project를 생성하면 아래 그림처럼 기본 구조를 만들어준다.

• android, ios, macos, linux, windows: 안드로이드, ios 등 다른 플랫폼을 지원하기 위한 빌드용 파일
• lib: 앱을 만드는데 필요한 파일 모음. 앱 개발은 대부분 여기서 한다.
• pubspec.yaml: 프로젝트 설정파일

나머지 디렉토리들은 다른 앱들과 유사하다.

 

assets

Local에서 정적으로 추가하는 파일들은 assets라는 디렉토리를 따로 만들어서 넣어줬다(cat.png, scene.jpeg). 이 내용들은 아래 사진처럼 pubspec.yaml 파일에 assets: 속성으로 넣어주면 된다. 처음에는 주석처리 되어있다.

 

다만 여기서 주의할 점은 yaml 파일은 들여쓰기가 중요해서, 위쪽 uses-material-design과 들여쓰기가 맞는지 정확히 검사해야한다. 보통 그냥 주석을 풀면 불필요한 띄어쓰기가 한 칸 들어가있다!

 

그리고 이 등록된 파일을 아래 3. 간단한 속성들 부분에서 불러와서 사용하는 것을 볼 수 있다.

 

 

 

2. main.dart 구조

 

프로젝트 생성 시 기본으로 생성되는 main.dart 내 내용을 모두 지우고 직접 작성해보는 것이 익숙해지는데 좋다.

 

• import문: material은 구글이 지원하는 코드 조각들을 모아놓은 라이브러리라고 생각하면 된다.
• main() => runApp: 프로젝트 구동 시 실행할 클래스를 지정한다.
• StatelessWidget: 상태가 없는 위젯을 만든다. 사용자의 입력이나 동적인 데이터 변화가 없는 정적 위젯일때만 사용한다. Android Studio에서 stl이라고 치면 자동 완성된다. 이와 반대로 동적인 데이터가 호출되고 렌더링이 다시 일어나는 위젯을 StatefulWidget이라한다. stf라고 치면 자동 완성된다.
• build: flutter는 모든 것이 Widget으로 구성된다. 그리고 부모-자식 관계로 트리 구조로 위젯들이 구조화된다. build 메서드는 이런 위젯 트리를 만드는 역할을 한다.
• Scaffold: 위젯 트리를 만들 수 있게 도와주는 위젯이다. 일단 backgroundColor, appBar, body 정도가 있다는 것만 이해해도 된다.
• AppBar: 앱의 위쪽 이름이나 아이콘 등을 표시해주는 부분이다. 점차 자세히 배운다.

 

 

 

3. 간단한 속성들

 

앱을 만드는데 필수적인 간단한 속성들에 대해 익숙해져본다. 각 위젯 클래스에 가보면 파라미터 값으로 다 나오지만, 기본적인 디자인을 위한 파라미터들은 여러 번 타이핑하며 익숙해지면 좋다.

 

 

Column

body의 child로 Column 위젯을 사용했다. 이것은 그림이나 텍스트 등 구성 요소들을 열(Column) 방향으로 배치하겠다는 것을 의미한다.

 

crossAxisAlignment

Center 위젯으로 감싼 CircleAvatar 이미지 외에 나머지들은 CrossAxisAlignment.start인 왼쪽 시작점에 맞추겠다고 선언한다.

 

 

SizedBox

SizedBox로 빈 공간을 구성하여 요소간 간격을 줄 수 있다.

 

Icon

materials에서는 기본적으로 제공되는 아이콘이 상당히 많다. 다음 장에서 더 다양한 Icon을 사용해본다.