[Flutter] 플러터 개발환경 설정

목차

📌 요약

플러터를 사용할 일이 있어 개발 환경을 셋팅하면서 내용을 정리했다. 애플코딩 유튜브를 참고했는데, 아래 4가지를 실행하면 된다. 사전에 크롬이 설치되어 있어야 한다.

📌 내용

1) Flutter SDK 설치

https://docs.flutter.dev/get-started/install/windows

Windows의 경우, 위 링크를 클릭하거나 flutter install을 검색하여 설치한다. 그리고 찾기 쉬운 경로에 압축 풀기를 한다.

Windows에서 Flutter SDK 다운 방법

2) Android Studio 설치

https://developer.android.com/studio

마찬가지로 위 링크를 클릭하거나 android studio install를 검색하여 설치한다.

Windows에서 Android Studio 다운 방법

3) Android Studio 셋팅

a. 아래 이미지와 같이 Plugins을 클릭하여 Flutter를 검색하여 설치한다.

Android Stutio Plugins 설정

b. More Actions 버튼을 클릭하면 나오는 SDK Manager를 클릭한다. (Android를 이미 사용해본 사람의 경우, 아래 이미지처럼 ...을 클릭하면 나온다.)

SDK Manger 클릭

c. Android SDK > SDK Tools > Android SDK Command-line Tools (latest) 순서대로 클릭한다. 오른쪽 아래에 Apply를 누르면 설치되고, 설치가 완료되면 OK를 누르면 된다.

Android SDK Command-line Tools (latest) 설치

4) 환경 변수 등록

a. 시스템 환경 변수 편집을 찾아서 클릭한다. 간단하게 windows 키 + "변수"라고 입력하면 된다. 

시스템 환경 변수 편집 이미지

b. 환경 변수 버튼을 클릭한다.

환경 변수 버튼

c. Path를 누르고 편집 버튼을 클릭한다. 그리고 새로 만들기 버튼을 눌러 flutter\bin 파일이 있는 곳의 경로를 입력한다.

환경 변수 설정

경로는 아래와 같이 폴더에서 편하게 찾을 수 있다.

bin 폴더 경로 찾기

d. 확인 버튼을 클릭하여 마무리한다. 그리고 다시 windows 키 + "cmd(또는 Powershell)"를 입력해서 명령 프롬프트를 실행한다.

명령 프롬프트

flutter doctor

e. 위 명령어를 입력하면 화면과 같이 나타난다.

cmd 화면

f. 그리고 조금 더 기다리면 아래 화면과 같이 나타나는데, ! 부분을 고치기 위해서 아래 명령어를 입력하고 y를 계속 입력한다.

flutter doctor --android-licenses

cmd 화면(flutter doctor 명령어)

그러면 아래와 같이 긴 문자들이 나타나면서 마무리된다.

cmd 화면 (flutter doctor --android-licenses 명령어)

📌 프로젝트 생성

위 과정을 끝냈으면 안드로이드 스튜디오에서 다음과 같이 플러터 프로젝트를 생성할 수 있다.

a. Projects > New Flutter Project > Flutter > ...(flutter 폴더가 있는 경로 설정) > Next 순서대로 진행한다.

Android Studio에서 Flutter Project 생성

b. Project name에 프로젝트명을 입력하고 Finish 버튼을 클릭한다.

c. 그리고 이제부터는 lib폴더 안의 main.dart에서 코드를 짜면 된다.

lib\main.dart

Chrome 변경

d. 상단의 디바이스를 크롬으로 변경하고 재생 버튼을 클릭하면, 크롬에서 아래 이미지와 같이 화면을 미리 확인할 수 있다.

실행된 크롬 화면

(참고) VScode에서도 비슷하게 좌측 Extension 메뉴에서 Flutter 찾아서 설치하면 사용할 수 있다고 한다.

📌 후기

플러터를 어떻게 사용해야 할지 감이 안 잡혔는데, 도움이 되는 영상을 찾아 잘 따라할 수 있었다.

📌 참고사이트

애플코딩 유튜브

애플코딩 - 플러터 설