Flutter 파일 구조에 대해

강의에 나온 표현과 설명에 따라 작성한 강의노트이기 때문에 다소 난해한 내용이 많음.

후에 이해가 된 상황에서 내용이 가다듬어 다시 정리될 수 있음.

 

< 기본 정리 설명 챕터 >

기본 Dart 언어 사용.

lib

- 플러터 앱 구성 소스코드가 구성된 곳

 

main .dart 

 

---

pubspec.yaml 구성

 

- 앱의 이름과 디스크립션(설명) 정보
- 프로젝트 버전 설정 가능

 

environment 섹션

- 프로젝트에서 사용하는 다트 버전을 지정할 수 있음

 

dependencies 섹션

- 프로젝트에서 사용하는 패키지를 설정할 수 있음

- 다른 개발자가 만든 코드를 가져오는 것이 가능함

- 다른 앱에서 사용할 수 있는 코드를 모아둔 것을 패키지.

- 이 섹션에 사용하고 싶은 패키지의 이름과 버전을 넣어주면 해당 패키지에 있는 코드를 가져와서 앱 개발에 사용할 수 있음.

 

cupertino icons 섹션

- ios 앱에서 사용하는 아이콘인 cupertino 디자인 가이드를 따르는 아이콘을 담고 있는 패키지를 사용함

 

flutter SDK 섹션

- 별도로 버전을 사용하지 않고 형태 그대로 사용함

 

dev_dependencies

- 개발 과정 중에만 사용하는 패키지를 설정하는 패키지

 

flutter 섹션

- 플러터 앱과 관련된 설정을 담고 있음

 

uses-material-design: true

- 머터리얼 디자인에서 사용하는 아이콘을 프로젝트에 포함한 것을 의미

- 폰트 등 정의할 수 있지만 강의에선 다루지 않음..

 

프로젝트에서 폰트 적용하는 방법은 아래에[1]

 

---

 

main.dart 파일 내부

4 부분으로 구성되어 있음

 

1. 메인 함수 void main

- 플러터 앱이 실행되면 가장 먼저 실행되는 함수

- runApp이라는 함수를 실행하여 앱의 뼈대를 구성함

- 뼈대를 만들어줄 화면을 매개변수로 넣어주게 됨

 

2. 마이앱 클래스 class MyApp extends StatelessWidget

- Stateless라는 위젯을 상속하고 있음

- 위젯은 화면에 무언가를 그려주는 역할을 함

- State 상태를 관리하고 화면을 갱신할 수 있는 위젯

- Stateless 화면의 상태를 관리하지 않는 위젯. 빌드 함수에서 한번 화면을 구성하면 더이상 화면을 변경하지 않음

 

3. 마이 홈페이지 클래스 class MyHomePage extends StatefulWidget

- 앱의 첫 화면을 구성함

- 상태를 관리하는 위젯인 Stateful 위젯으로 관리함

- 화면의 상태를 관리하는 별도의 클래스를 가지고 있음 

 

4. 마이 홈페이지 스테이트 클래스
class MyHomePageState extends State<MyHomePage>

- 상태를 관리하는 클래스 state 를 상속하고 <> 안에는 상태를 지정할 위젯의 이름을 넣어줌

- 앞에 있던 마이 홈페이지 위젯을 상속하도록 되어 있는 것.

- 화면을 그려주는 함수인 build 함수가 있음. 

 

---

 

화면 구성 요소

Scaffold - material 디자인을 따르는 앱을 구성할 때 사용하는 요소

appBar - 앱의 상단 제목 부분을 구성할 때 사용. 

body - 화면의 주요 부분을 구성하는 부분

center, column 같은 위젯은 위젯을 배치하는 방법을 결정하는 특수한 위젯

 

floatingActionButton

- 화면에 떠 있는 버튼. 일반적으로 화면 오른쪽 하단에 표시됨

- 텍스트 설명과 아이콘을 지정할 수 있음

 

onPressed -  버튼을 눌렀을 때 수행할 동작을 지정

 

setStaate() - 화면을 갱신 할 때 함께 실행할 동작을 인자로 넘겨줌

counter++

- 카운터라는 이름을 가진 기억공간에 있는 값을 1만큼 증가시킨 후에 그 결과를 다시 카운터 저장 공간에 저장하는 역할을 수행함

 

counter++ 부분을

counter = _counter + 2;

로 바꾸면 카운터 저장공간이 2씩 증가하게 됨.

 

가..갑자기? ㅎㅎ

 

---

 

💡프로젝트에서 폰트 적용하는 방법 (앱에서 사용할 폰트)

- 상업성 이용이 가능한 폰트를 프로젝트에 설정하여 앱에서 사용해보는 방법

 

💡Pubspec.yami 파일 변경 시 main.dart로 가면 경고가 뜨는데 이 때 어떻게 해야 하는지

 

이 내용은 포스타입 통해 볼 수 있습니다.

https://newwhatever.postype.com/post/11903002

Flutter 프로젝트 파일 구조