[Flutter&Firebase 커뮤니티 앱개발] 01.Flutter(플러터) 설치

첫 시간입니다.

플러터를 설치하고 안드로이드 스튜디오, vs코드를 깔아서 플러터 어플 빌드를 해보겠습니다.

 

1. 플러터(Flutter) 설치

1) 플러터 SDK 다운로드

하기 링크에서 SDK를 다운로드 받으세요

https://flutter.dev/docs/development/tools/sdk/releases?tab=windows

 

 

위 링크로 들어가면 아래와같은 다운로드 페이지가 나옵니다.

적절한 버젼의 파일을 다운로드하면  zip형식의 압축파일로 받아집니다.

해당 zip파일을 적절한 경로에 압축을 풀면 됩니다.

---

예시) D:\flutter

---

 

2) 환경 변수 등록

SDK를 환경 변수에 등록합니다.

경로는 flutter SDK 압축을 푼 경로의 bin 폴더까지입니다.

---

예시) D:\flutter\bin

---

 

3) SDK 설치 확인

flutter doctor를 통해서 SDK가 정상적으로 설치되었는지 확인합니다.

명령창에서 flutter doctor라고 입력하면 됩니다.

 

 

여러 항목이 나오는데 SDK 설치 확인은 첫 번째 [v] Flutter 녹색 체크를 보면 됩니다.

나머지 사항은 개개인의 PC 환경에 따라 다르게 나올 수 있습니다. 현재 안드로이드가 깔려있지 않다고 뜹니다. 원활한 플러터 프로젝트 빌드 및 디버깅을 위하여 안드로이드 스튜디오를 깔아주도록 합니다. (다음단계에서 진행)

 

 

 

 

2. 안드로이드 스튜디오(Android Studio) 설치

1) 안드로이드 스튜디오 설치파일 다운로드 

위 flutter doctor에서 떴던 Android toolchain을 다운로드하는 링크로 들어가줍니다.

https://developer.android.com/studio/index.html

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

위 링크에 들어가서 다운로드한 설치프로그램을 다운받습니다

 

2) 안드로이드 스튜디오 설치

 

 

 

3. 플러터 프로젝트 생성

 

1에서 깐 플러터 명령어로 플러터 프로젝트를 생성하겠습니다.

 

 

우선 D:/flutter_apps에 flutterfirebase_test1이라는 이름의 플러터 프로젝트를 생성하겠습니다.

1에서 플러터를 설치하였고 해당 플러터명령어를 path에 등록해놨기 때문에 cmd창을 열어서 바로 플러터 프로젝트를 만들 수 있습니다.

flutter_apps 폴더로 들어간 후,

flutter create [만들고싶은 플러터프로젝트 이름] 으로 플러터프로젝트를 생성합니다.

앱 생성이 완료된 모습

 

 

4. 안드로이드 스튜디오로 플러터 프로젝트 실행

 

1) 에뮬레이터 추가

 

먼저 앞서 설치한 안드로이드 스튜디오를 열어 안드로이드 에뮬레이터 기기를 추가시켜 줍니다

(Pixel 8 Pro로 우선 추가)

 

안드로이드 스튜디오를 열어 방금 생성한 플러터 프로젝트폴더를 선택해줍니다

 

 Device Manager > Create Device 

Create Device버튼 클릭 시 pixel 8을 검색하여 에뮬레이터 기기를 추가합니다. (Pixel 8 Pro 선택 후 Next)

 

Next

 

Finish

 

 

 

디바이스를 추가하고나면 아래와같이 안드로이드 스튜디오 우측 Device Manager 아이콘 클릭 시 해당 Pixel 8 Pro API 35기기가 목록에 떠있음을 확인할 수 있습니다.

 

 

2) 안드로이드 스튜디오 안 플러터 설치

 

Settings > Plugins

Flutter 검색 후 Install

Install이 완료되면 Restart IDE버튼을 클릭

 

 

Restart되면 위에 no device selected에 마우스커서를 갖다대고 Refresh를 눌러줍니다

device Refresh

 

 

 

3) 안드로이드 스튜디오 에뮬레이터 기기로 플러터 프로젝트 Build And Run 해보기

 

우측 Device Manager아이콘을 눌러서 아까 목록에 보였던 Pixel 8 Pro API 35기기를 Start시켜줍니다 ('▷' 버튼 클릭)

 

 

우측에 Pixel 8 Pro 기기 보임

<no device selected>항목을 Pixel 8 Pro API 35 선택 후 Run 버튼 클릭(▷)

 

 

 

플러터에서 처음 플러터 프로젝트를 생성했을 때 main.dart파일에 기본으로 제공해주는 계산기 어플 코드가 있습니다.

아래는 기본 빌드 시 계산기 프로그램이 실행된 모습입니다. 

 

 

기기에서 우측 하단 + 버튼 클릭 시 숫자가 하나씩 올라가는것을 볼 수 있습니다.

+버튼 세 번 클릭 -> 1,2,3으로 결과값 갱신됨

 

 

 

 

5. VS코드 (Visual Studieo Code) 설치 

실제 플러터 프로젝트 소스를 편집할 때는 VS코드로 쓰는게 편합니다. (안드로이드 스튜디오보다 가벼운 볼륨, 다양한 flutter 프로젝트 편집 지원 기능 등)

 

1) 설치과정

 

2) VS코드로 플러터 프로젝트 열기

 

 

 

 

 

이제 플러터 커뮤니티 어플 개발을 위한 플러터 개발환경 셋팅이 완료되었습니다.

다음 시간엔 커뮤니티에서 사용할 Firebase DB를 위해 firebase_cli를 설치하는법을 알려드리겠습니다.