플러터(Flutter) 개발 환경 구축
by
Feb 21. 2020
목적에 맞는 개발 환경 구축하기
플러터는 크로스 플랫폼 앱 개발을 위한 프레임워크인 만큼 다양한 목적으로 사용될 수 있다. 따라서 개발 환경도 목적에 따라 선택적으로 구축 가능하다.
플러터가 지원하는 환경은 다음과 같다.
OS : 윈도우, 맥OS, 리눅스
Target : 안드로이드, iOS, 웹, 데스크톱
Editor : 안드로이드 스튜디오, IntelliJ, VS CODE
iOS 앱을 개발하기 위해서는 맥OS 환경이 필요하다.
여기서는 안드로이드를 중심으로 살펴볼 것이기 때문에 사용할 환경은 다음과 같다.
OS : 윈도우10
Target : 안드로이드
Editor : 안드로이드 스튜디오
1. 안드로이드 스튜디오 설치
이 글을 보는 사람 대부분은 안드로이드 스튜디오가 설치되어 있을 것이라 생각되지만 간단하게나마 소개한다.
1) Android Developer 공식 사이트에서 설치 파일을 받는다.
https://developer.android.com/studio
2) 설치 방법은 아래 링크에서 동영상으로 확인할 수 있다.
https://developer.android.com/studio/install?hl=ko
3) 마지막으로 환경 변수를 설정해준다. 최근 문서를 보니 ANDROID_HOME은 별도로 설정해줄 필요가 없는 것 같다. (실제로 재설치하여 확인 필요)
https://developer.android.com/studio/command-line/variables?hl=ko
ADB 사용을 위해서 다음 환경 변수를 등록해준다. (이 부분도 생략해도 되는지 확인 필요)
본인의 sdk path에 맞게 등록해야 한다.
예시) C:\Users\Seo\AppData\Local\Android\sdk\platform-tools
2. 플러터 SDK 설치
1) 플러터 SDK 다운로드
하기 링크에서 SDK를 다운로드한다.
Stable channel이 이름처럼 정식버전이다. 여기서 사용된 버전은 v1.12.13+hotfix.8이다.
https://flutter.dev/docs/development/tools/sdk/releases?tab=windows
다운로드한 파일은 zip형식의 압축파일인데 적절한 경로에 압축을 풀면 된다.
예시) D:\flutter
2) 환경 변수 등록
SDK를 환경 변수에 등록한다.
경로는 flutter SDK 압축을 푼 경로의 bin 폴더까지이다.
예시) D:\flutter\bin
3) SDK 설치 확인
flutter doctor를 통해서 SDK가 정상적으로 설치되었는지 확인한다.
명령창에서 flutter doctor라고 입력하면 된다.
여러 항목이 나오는데 SDK 설치 확인은 첫 번째 [v] Flutter 녹색 체크를 보면 된다. 나머지 사항은 개개인의 PC 환경에 따라 다르게 나올 수 있다.
두 번째 항목 [!] Android toolchain은 라이선스 동의가 이뤄지지 않은 부분이 있다는 내용이다. 친절하게 해결 방법을 설명해준다.
flutter doctor --android-licenses
위 명령어를 입력하고 각 라이선스에 동의하면 해결된다.
만약 위 명령어 입력 시 다음과 같은 에러가 발생한다면 안드로이드 스튜디오에서 Android SDK Command-line Tools를 다운 받아야 한다.
다음 화면에서 설치된 것을 확인 할 수 있다.
세 번째 항목은 안드로이드 스튜디오에 플러터 플러그인과 다트 플러그인이 설치되지 않았다는 것을 알려준다.
만약 안드로이드 스튜디오를 설치하였는데 [!] Android Studio (not installed)로 표기가 된다면 안드로이드 스튜디오 경로 지정이 되지 않아서 발생하는 문제이다. 해결법은 다음과 같이 안드로이드 스튜디오가 설치된 경로를 설정해주는 것이다.
flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"
네 번째 항목은 PC에 IntelliJ가 설치되어 있는데 플러터 플러그인과 다트 플러그인이 설치되지 않아서 나타난 것이다.
다섯 번째 항목은 연결된 디바이스가 없다는 알림이다.
3. 플러터 & 다트 플러그인 설치
1) 안드로이드 스튜디오 실행
안드로이드 스튜디오를 처음 실행하면 아래와 같이 Welcome 창이 뜬다.
여기서 Configure > Plugins를 선택한다.
2) 플러터 플러그인 설치
flutter를 검색하여 설치한다.
3) 다트 플러그인 설치
플러터 플러그인 설치가 완료되면 dart 플러그인 설치를 할 것인지 묻는다. 편리하다.
4. 안드로이드 에뮬레이터 설정
AVD 추가하기 위해 AVD Manager를 실행한다. Create Virtual Device를 선택한다. 원하는 기기를 선택한다. 그 후 Next!
에뮬레이터 안드로이드 버전을 선택한다. System Image가 x86 또는 x86_64를 권장한다. Next!
Emulated Performance에 Graphics 옵션을 Hardware - GLES 2.0으로 선택한다.
생성이 완료되면 다음과 같이 실행 버튼을 눌러서 에뮬레이터를 실행한다.
5. 기본 프로젝트 생성 및 실행
1) 플러터 SDK를 설치한 후 안드로이드 스튜디오를 실행하면 다음과 같이 플러터 프로젝트를 생성할 수 있는 Start a new Flutter project가 생긴다. 해당 메뉴를 선택한다.
2) Flutter Application을 선택한 후 Next를 누른다.
3) 프로젝트 이름을 입력한다. (예시 : myapp) 플러터 SDK 경로가 제대로 설정되어 있는 확인 한다. 올바른 경로가 설정되어 있지 않다면 앞서 압축을 풀어놓은 SDK 폴더를 선택한다. (예시 : D:\flutter)
Next를 누른다.
4) 패키지명을 정하고 Finish를 누른다.
5) 앞서 실행한 에뮬레이터를 선택하고 프로젝트 실행 버튼을 누른다. 그러면 다음과 같이 에뮬레이터에 예제 앱이 실행되는 것을 확인할 수 있다.
6. Hot reload 테스트
위 과정을 통해서 실행된 앱은 Debug mode이다. 따라서 Hot reload가 가능하다. 주의할 점은 앱을 종료하면 안 된다. 반드시 앱이 실행 중이어야 한다.
Hot reload 테스트를 위해 lib/main.dart 파일 95라인의 텍스트를 변경한다.
'You have pushed the button this many times'
'You have clicked the button this many times'
텍스트 수정 후 Ctrl + S로 main.dart를 저장하거나 상단의 번개 모양인 hot reload 버튼을 누르면 에뮬레이터에 빠르게 반영된다.
