들어가기 앞서...
이전에 플러터 ios 시뮬레이터와 android 시뮬레이터 개발 환경 구축을 진행완료했다.
이제는 프로젝트를 새로생성해서 HelloWorld 를 출력해볼 예정이다.
처음으로 플러터 프로젝트를 진행하는것이기에 가볍게 정의도 살펴볼 예정이다.
본문으로...
1. Android Studio 를 실행 해서 flutter New Project 를 생성해주자!
New Flutter Project를 클릭하자!
클릭하게 되면 바로 하나의 창이 뜨게 되는데, 왼쪽에는 언어에 대한 옵션이 나오고 오른쪽 상단에 Flutter SDK path 는 말그대로 플러터의 SDK 의 경로를 설정해둔곳을 나타낸다.
이 부분은 또 새로운 프로젝트를 생성해도 변경할 필요가 없다.
Next 클릭하자
위에서 부터 차례대로 프로젝트 이름, 프로젝트 경로, 설명을 작성해준다.
Project type 은 항상 Application으로 설정 해라
Organization 은 도메인 주소를 작성하는것인데 거꾸로 작성해야 한다. 배포를 할때 필요한 주소이다.(나중에도 변경가능)
android 와 ios 언어는 항상 저렇게 체크해두자.
Platforms도 저렇게 체크하면 프로젝트가 생성완료되었다.
2. 생성된 프로젝트를 Ios 시뮬레이터로 켜보자
Open IOS SImulator 를 클릭해주면된다.
만약 저렇게 클릭이 안되게 된다면, 자신의 아이폰으로시뮬레이터 하는 방법을 다시 진행을 해보자. 이 내용은 개발 환경 구축에 있다.
클릭하게 되면 가상의 아이폰이 실행이 된다.
그리고 초록색 재생 버튼을 눌러주고 잠시 기다리면 main.dart 가 IOS 시뮬레이터에 실행되는것을 볼 수 있다.
그리고 코드를 수정하고 수정한 코드를 바로 확인해볼 수 있는 방법이 있다.
수정을 하고 바로 시뮬레이터에 업데이트 되는 것을 확인 해볼 수 있다.
어째서인지 나는 코드를 저장을 안했는데, 계속 시뮬레이터가 업데이트 되는 이상한 현상이 있다.
3. 프로젝트를 약간 수정해보자! HelloWorld 출력!
우리가 주로 작업할 공간은 main.dart 이다.
기존의 코드를 거의 다 날려주고 void main(){} 만 남겨주자!
우선은 무조건적으로 외워야한다. MaterialApp 안에 home Scaffold, body 가 들어간다는 것을!
글자가 상단 노치 부분에 있기 떄문에, 추가적으로 코드를 작성해준다.
홈의 배경색은 검정, 바디는 Center 로 중앙으로, child 안에 Text의 style 의 색상을 넣어준다.
출력 완성
Widget 의 정의
Widget 들의 부모, 자식 관계를 나타내는걸 Widget Tree 라고 부른다.
Widget은 무엇인지 모를수 있다! 하지만 우리는 이미 프로젝트에 작성을 했다.
- MaterialApp
- Scaffold
- Center
- Text
현재는 간단하게 출력을해서 widget 들이 적지만! 나중에는 프로젝트를 진행하다보면 복잡한 WidgetTree 를 마주하게 될 것이다.
우리가 프로그램적으로 직접 사용할 일은 없지만 개념을 알면 나중에 쉽게 익히는데 도움이 된다.
끝으로...
- 새로운 프로젝트를 생성해 플러터 개발환경을 구축할수 있다!
- IOS 시뮬레이터와 ANDROID 애뮬레이터를 실행해 HelloWorld를 출력할 수 있다!
- 스타일을 적용할 수 있다!
- 간단하게 위젯트리를 적용하고 복잡한 위젯트리의 구성을 보았다!
'⭐️ 개발 > 플러터' 카테고리의 다른 글
| [꿀팁, 에러] 플러터에서 Run main.dart가 안될때 (0) | 2022.10.27 |
|---|---|
| [이론] Row and Column (2) MainAxisAlignment (2) | 2022.10.26 |
| [이론] Row and Column (1) 세팅하기 (0) | 2022.10.26 |
| [프로젝트] 스플래쉬 스크린 만들기! (0) | 2022.10.24 |
| 플러터 첫번째 (0) | 2022.10.21 |