어플리케이션 개발에 무엇을 이용할지 고민하다 Flutter를 선택하게되었다. React Native도 아주 조금하다가. 결국 손을 떼버렸다......
선택이유는 그냥 Flutter를 해보고 싶었다.
ReactNative 설치
1. 2018/11/11 - [Develop/React Native] - React Native 설치 Windows, Android Studio 사용하기.
2. 2018/11/11 - [Develop/React Native] - React Native expo를 이용한 설치 Windows, Android Studio (v31.0.0)
이 글은
안드로이드 스튜디오로 하는 방법과 VSCODE로 Flutter 설치 및 실행하는 방법이다.
1. https://flutter.io/docs/get-started/install/windows 이 주소로 들어가 SDK zip를 다운받는다.
2. flutter_console
2-1. 다운받았으면 위에 나와있는 것 처럼 C:\src\flutter 경로에 압축을 푼다. 위 설명에보면 C:\Program Fils에 하지 않는 이유가 권한을 요청하기 때문이라고 한다.
아래와 같이 압축을 풀었으면 위 설명대로 flutter_console.bat를 실행한다.
2-2. flutter_console에 늘 이렇게 폴더에 들어가서 bat를 클릭해서 실행하기 귀찮다 그러므로 path를 등록하여 간단하게 바로 cmd창을 통해 실행을 하자.
아래의 설명처럼 flutter\bin의 경로를 Path에 지정해주면된다.
내 PC 우측 클릭 -> 고급시스템설정 -> 환경변수 -> Path에 아래와 같이 추가한다.
이렇게 추가하였으면 이제 간단하게 cmd창을 열고 flutter_console을 실행할 수 있다.
3. cmd창 또는 flutter_console.bat를 통해 flutter이용에 필요한 리스트를 점검해보자.
콘솔창에 flutter doctor 라고 입력하면 아래와 같이 리스트가 나온다.
현재 안드로이드 스튜디오가 깔려있지 않기 때문에 [X]라고 나오고 설치되지 않았다고 나온다
필자는 현재 VS Code가 깔려있어서 저렇게 나온다.
그리고 device가연결된게 없다고 나온다.
4. https://developer.android.com/studio/ 옆의 경로로 들어가서 안드로이드 스튜디오를 설치한다.
파일을 다운받고 Next를 누르고 일단 설치한다. (설치하는 것 자체는 어렵지 않음)
설치하였으면 이제 flutter를 추가해주어야 한다. 아래의 사진처럼 plugin에 들어간다
5. 접속하였으면 flutter라고 입력한다.
아래의 사진처럼 flutter라고 입력하면 Search in repositories라고 나오는 데 이것을 클릭하고
flutter를 Install한다.
Install 하였으면 안드로이드 스튜디오를 재시작한다.
6. 안드로이드 스튜디오를 재시작 하였으면 아래의 사진처럼 Start a new Flutter project가 생성된다.
이것을 클릭한 후 프로젝트를 하나 생성한다.
7. 프로젝트를 생성하였으면 가상 DEVICE를 설치한다.
8. flutter doctor를 통해 점검해본다.
이제 안드로이드 스튜디오가 설치 되어있는 것을 확인할 수 있다.
그리고 To resolve this, run : flutter doctor --andorid-licenses 를 볼 수 있는데
말그대로 flutter doctor --andorid-licenses 를 cmd 창에 입력한 후 모두 yes하면 된다.
9. AVD를 실행한 뒤 flutter doctor를 실행한다.
AVD를 실행하면 아래와 같이 모두 완료되었다고 알려준다.
10. 마지막으로 run -> main.dart를 통해 실행해본다.
11. 이제 VSCODE로 한번 실행해보자
https://code.visualstudio.com/ 에 접속하여 VSCODE를 다운받는다.
12. 다운받고 실행하였으면 좌측 메뉴 맨 밑에 탭을 클릭하고 DART를 설치한다.
13. 설치하였다면
맨위 탭에 View -> Command Palette (ctrl + shift + p) 를 클릭 또는 단축키를 이용한 뒤
Flutter: New Project를 클릭하여 적절한 폴더에 프로젝트를 생성한다.
14. 안드로이드 스튜디오의 AVD매니저를 실행하고 Debug -> Start Without Debugging 을 통해 실행한 다음 확인한다.
이로써 안드로이드 스튜디오에서 flutter 작동하는 방법 및 VSCODE에서 flutter 작동하는 방법을 알아 보았다.