반응형

어플리케이션 개발에 무엇을 이용할지 고민하다 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를 설치한다.

아래의 사진들 처럼 Tools -> AVD Manager -> Create Virtual Device 를 통해 AVD를 하나 생성한다
필자는 Nexus 5x를 생성하였다.




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 작동하는 방법을 알아 보았다.


반응형

+ Recent posts