Flutter 프로젝트 만들기 - 2

플러터 3.3.8로 개발합니다.

플러터로 요즘 IT를 만들기로 했었다.

기본적인 프로젝트 세팅을 끝났고, 이제 메인 페이지를 만들 차례이다.

메인 페이지는 가볍게 탭뷰로 가볼 것이고, 탭 뷰는 일단 AOS와 IOS만 탭 리스트로 담을 것이다. (나중에 추가할 계획)

포스팅을 하면서 플러터 기본 설명까지 겸할까 고민해봤는데, 일단 나도 공부할 겸 아는 것만 최대한 써보도록 해보겠다.

플러터는 위젯들의 부모 자식 관계로 구성되어 있다.

(내 생각엔...)가장 중요한 위젯에는 StatelessWidget과 StatefulWidget이 있는데, 영어를 잘하고 응용력이 뛰어나면 알겠지만 액티비티(안드로이드 개발을 했어서 앱 페이지를 액티비티라고 표현하겠다.)의 상태에 관한 위젯이다.

StatelessWidget은 정적 액티비티를 위한 위젯이며 성능이 상당히 좋다. 다만 인터렉션(버튼, 텍스트 박스 등)이 없다.

StatefulWidget은 그 반대라 할 수 있다 대부분의 액티비티가 이 위젯이라 보면 되겠다.

일단 프로젝트 생성했을 때 만들어졌던 샘플 코드를 싹 다 지워버리자. 구글 형들의 선행은 사실 필요가 없다.

주석들도 다 없어지고 아주 깨끗한 메인 다트가 되었다. 역시 사람이나 코드나 꾸미면 보기 좋아진다.

그런의미에서 vscode 코드 매니징 꿀팁을 방출하도록 하겠다.

코드 포매팅 단축키를 지정하여 다트에 맞게 자동 포맷을 할 수 있다.

파일 > 기본 설정 > 바로가기 키 > 문서 서식

원하는 키를 바인딩하여 사용해주면 알아서 포매팅이 된다. 굿.

메인 다트에서 MyApp 클래스가 뭔지에 대해 궁금할 수 있다. 뭐냐면 이 프로젝트의 루트 위젯이라고 생각하면 된다.

루트 위젯은 지금 build 메소드에서 MaterialApp 메소드를 리턴하고 있는데, MaterialApp이 UI를 그려주는 메소드이기 때문에 MyApp 클래스 자체가 Stateful한 것은 아니므로 StatelessWidget을 상속받는다.

따라서 MaterialApp의 프로퍼티 중 하나인 home에서 빨간 줄이 그어져 있기 때문에 우리는 MainTabPage를 만들어 주어야한다.

lib 폴더 내부의 폴더 트리 구조는 정말 개발자 마다 제각각이기 때문에 나도 어디서 주워먹은 트리구조를 사용하도록 하겠다.

페이지 파일을 만들어주고 클래스 까지 만들어 준 다음 임포트를 메인 다트 파일에서 해준다면 빨간줄이 사라지는 것을 확인할 수 있다. 

별로 진행한 것도 없는데 글이 참 길어지는데 더 쓸지말지 고민된다. 너무 진도가 안나갔으니 더 써보겠읍니다.

메인 탭 페이지는 bottomNavigationBar가 핵심 위젯이라 보면 되겠다.

일단 대분류 위젯으로 탭으로 조작을 하기 때문에 StatefulWidget을 상속 받아준다.

State는 뭔가요? createState() => _MainTabPage(); 뭔 개소린가요?;; 라고 할 수 있겠다.

일단 () => 이건 화살표함수라고 하는데 기본적으로 함수의 형태는

type name (args){

~some code~

}

의 형태인데 이 것을 type name (args) => ~some code ~로 줄여주는 것이다. 간단 명료하다. 다만, 한 줄로 줄이는 것이기에 한 줄 메소드만 화살표 함수를 사용할 수 있다.

그리고 State는 뭘까  우리는 메인 탭 페이지를 Stateful하게 사용할 것이기 때문에 State 즉, 데이터에 대한 정의를 해주어야 한다. 플러터에서 State란 데이터를 명시한다는 것을 명심하자 ㅎㅎ

흠.. 탭 페이지는 다음 포스트에서 할까..?