[Flutter] flutter 프로젝트 폴더와 기본 코드 이해하기

1. flutter 프로젝트 폴더의 구성

1.1 pubspec.yaml: 프로젝트의 메타 데이터(프로젝트의 버전, 사용 환경, 라이브러리 등) 정의 및 관리
1.2 android / ios 폴더: 각 플랫폼에 맞게 앱을 배포하기 위한 정보를 가지고 있음
1.3 test 폴더: 각종 dart 관련 코드를 테스트
1.4 lib 폴더: 앱을 만들 때 거의 이곳에서 작업 (main.dart 파일이 있는 폴더)

 

2. 코드의 기본 내용 이해하기 / 앱 페이지 기본 구성 공식화하기

2.1 flutter material 라이브러리 import! 그래야 sdk에 포함된 모든 기본 위젯, 테마 요소 등 사용 가능
2.2 main(): 앱의 시작점
2.2.1 void main() => : main 함수가 다른 함수를 호출
2.3 runApp(): 최상위 함수 (이므로 한 번만 호출하면 됨), 반드시 widget을 argument로 가져야 함
2.4 MyApp(): 커스텀 위젯
2.4.1 flutter의 최상위 함수인 runApp()이 최초로 불러온 위젯이므로 위젯 트리의 최상단에 있음
screen layout을 최초로 build (뼈대를 만드는 역할 -> 변화나 움직임이 없는 정적인 위젯이 될 것~ -> stateless widget)
2.3 모든 커스텀 위젯은 또 다른 위젯을 리턴하는 build라는 함수를 가지고 있음. 따라서 MyApp 위젯은 Container라는 위젯을 리턴하고 있음
2.3.1 앱을 만들기 위해서 import한 flutter material 라이브러리를 사용할 수 있는 기능을 가진 위젯이 필요 -> materialApp()을 리턴하도록 바꿔줌
2.4 materialApp(): title이라는 문자열을 argument로 가져아 함 (플러터의 모든 위젯들은 argument를 가짐)
2.4.1 them: ThemeData(): 앱의 기본적인 디자인 테마 결정
2.5 home: 앱이 정상적으로 실행되었을 때, 가장 먼저 화면에 표시되는 경로 -> MyHomePage() 위젯 지정

 

2.6 MyHomePage(): Scaffold() 위젯을 리턴하도록 바꿔줌
2.6.1 appBar 위젯: Text 위젯을 따로 불러옴. MaterialApp에서는 title: 'str~' 바로 썼는데 왜??
  - MaterialApp 내의 title은 앱을 총칭하는 이름
  - appBar 위의 title은 앱 화면에 출력되는 title
2.6.2 body: 'The primary content of the scaffold'
2.6.2.1 Center 위젯: 자신만의 child 위젯을 가지고 있음 -> Column(center 위젯의 대표적인 child 위젯) 위젯은 위젯 내 모든 요소들을 세로로 배치 !! children: [] -> 괄호 안에 세로로 정렬될 위젯들을 나열

 

3. 첫 번째 flutter 앱 실행

 

(코딩셰프님의 Youtube 강의를 참고하여 작성하였습니다. --> https://www.youtube.com/@codingchef)