본문 바로가기
플러터 왕초보

플러터(Flutter) 입문 1. 첫 프로젝트 만들고 빌드하기

by 타이싸란 2021. 5. 19.

먼저 안드로이드 스튜디오를 열어서

Create New Flutter Project 를 눌러주세요

 

 

Flutter Application 을 눌러줍니다.

 

 

Project name 에  프로젝트 이름을 소문자로 적어주세요

 

 

Package name에

 com.회사이름.프로젝트이름(앱이름)

을 넣어주세요.

 

include Kotlin support for Android code 에 체크를 해지해주세요.

 

Finish를 눌르면 프로젝트가 생성됩니다.

이렇게 첫 화면을 만나게 됩니다.

 

왼쪽에 파일 트리를 보면 helloman 아래에 다른 폴더 들이 생성된게 보일겁니다.

여기서 helloman은 제가 위에서 project name 정할때 그렇게 정했기 때문입니다.

helloman 이라는 폴더 아래에 보면

 

 

android 폴드와

ios 폴더

lib라는 폴더 들및 여러 폴더들이 있고,

 

pubspec.yaml 같은 파일들도 보일 겁니다.

 

여기서 우리가 자주다루게 될

 

폴더 및 파일은

 

android 폴더 및 그 하위 폴더 및 파일 

Ios 폴더 및 그 하위 폴더 및 파일 

lib 폴더

pubspec.yaml 파일

 

이렇게 됩니다.

 

먼저 lib 라고 저기 파란색 폴더가 보일겁니다.

그아래에 main.dart라는 다트파일이 보이네요.

 

 

 

네 현재 보이고 있는 이 회면이 main.dart 라는 다트 파일에

다트 언어로 코딩 한 내용들입니다.

 

플러터 프로젝트를 처음 생성하면 기본앱으로 빌드한번해보라고 이렇게 기본적으로 세팅해줍니다.

이걸 그대로 빌드 해볼수 있습니다.

 

 

 

상단에 현재 no device selected 라고 되어 있습니다.

여기서 Open ios Simulator 를 해서 시뮬레이터 한개를 켜줍니다.

 

안드로이드 시뮬레이터도 켤수있지만 현재 m1 에서는 안드로이드 시뮬레이터를 작동시킬수가 없습니다.

다른 무언가를 깔아야합니다.

(인텔 칩을 쓰는 맥북은 가능합니다.)



 

이렇게 저는 iPhone 12 Pro 를 시뮬레이터로 불러왔습니다.

 

 

다른 시뮬레이터를 불러오고 싶으시면 현재 시뮬레이터를 일단 한번 클릭해주시고

왼쪽 상단에 Simulator 라고 뜨면 File을 눌러 다른걸로 바꿔주시면 됩니다.

 

 

 

iPhone 11을 클릭하니 한개가 더 생성되네요.

여기서 자기가 하고싶은거만 남기고 꺼주시면 됩니다.

저는 그냥 iPhone 12 Pro를 에뮬레이터로 사용하겠습니다.

 

 

그다음 상단에보면 런 버튼이 있습니다.

 

에뮬레이터가 잘 선택되어 있는지 확인한후

초록색 플레이 버튼 그거를 눌러줍니다.

 

그러면 아래에 Run 부분을 보시면 빌드되는 모습을 볼수있습니다.

15.7s 가 걸렸네요.

 

제가 회사에서는 현재 인텔칩기반의 맥북을 쓰고 있다가,

이 포스팅을 하면서 그동안 잠자고 있던 m1을 꺼내서 사용하게 되었는데.. 속도가 엄청 빠릅니다..

 

 

 

 

이렇게 기본앱을 실행했습니다.

보니까 저기 아래에 동그란 +버튼을 누르면 숫자가 올라가는 예제네요.

 

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

 

1. create project

1회차 세부 과정 목차 더보기 1.Flutter new project 옵션 선택 2.파일 구조와 역할 설명 3.주석 4.안드로이드 시뮬레이터 테스트 앱띄우기 5.핫리로드 6.IOS 시뮬레이터 테스트 앱띄우기 7.머티리얼앱 과

100sucoding.tistory.com

개인과외 문의 saran.flutter@gmail.com