[Flutter] 플러터와 안드로이드 스튜디오 설치 총정리

안녕하세요 BlockDMask 입니다.

오늘은 윈도우에 플터터와 안드로이드 스튜디오를 설치하고 플러터 기본 앱 까지 실행해 보는 것을 소개 시켜 드리려 합니다.

제가 설치를 하려고 하는데 많이 어려웠어서 매우 쉬운 방법으로 진행해보려 합니다.
PATH 이런거 몰라도 됩니다. 최대한 간단하게 진행해 볼게요.

<목차>

1. 안드로이스 스튜디오 설치
2. 안드로이드 스튜디오에 플러터 플러그인 설치
3. 플러터 홈페이지에서 플러터 설치
4. 안드로이드 스튜디오 flutter doctor
5. 안드로이드 라이센스 획득
6. 플러터 앱 실행

1. 안드로이스 스튜디오 설치

▶1-1 : 안드로이드 스튜디오 공식 홈페이지 [https://developer.android.com/studio] 로 가서 안드로이드 스튜디오를 다운받아서 설치 합니다.

▶1-2 : 다운받은 exe 파일을 실행시켜서 안드로이드 스튜디오를 설치 합니다. next 

▶1-3 : 또 next를 누릅니다.

▶1-4 : 설치가 다 끝나면  

▶1-5 : 아래와 같이 안드로이드 스튜디오를 실행시켜 줍니다.

2. 안드로이드 스튜디오에 플러터 플러그인 설치

▶2-1 : 자 이제 안드로이드 스튜디오를 설치 했고, 실행을 했습니다. 그럼 이제 우리는 안드로이드 스튜디오에 플러터 플러그인을 설치 할 것 입니다.

안드로이드 스튜디오의 오른쪽 아래를 보면 Configure 이라는 버튼이 있습니다. 누릅니다.
그러면 Plugins 라는 것이 뜨는데 그걸 누릅니다.

▶2-2 : 그럼 수많은 플러그 들 중에서 Maketplace에서 flutter를 검색해서 install 버튼을 눌러 줍니다.
누르게 되면 경고? 알람? 같은게 뜨는 분들이 계실겁니다. 그거는 플러터 설치하기 전에 다트 플러그인도 포함해서 설치해야한다. 뭐 이런것이기 때문에 과감하게 OK, Yes를 눌러서 설치합니다.

▶2-3 : 설치가 다 끝나면 Restart 하라고 나옵니다. 눌러줍니다. 안드로이드 스튜디오가 그럼 재실행 됩니다.

▶2-4 : 초기 화면으로 돌아오면 못보던 버튼이 생깁니다.
두번째 줄에 Start a new Flutter project 라는 것이 생깁니다. 플러터 프로젝트를 만들기 위해 눌러줍니다.

▶2-5 : 그럼 이렇게 Flutter Application을 만들건지 다른걸 만들건지 선택하라고 하는데 우리는 어플리케이션을 만들어 볼것이기 때문에 Flutter Application을 선택하고 Next를 눌러 줍니다.

▶2-6 : 그러면 프로젝트 이름(project name), 프로젝트 장소(Project location)은 다 있는데, Flutter SDK path가 비어있습니다. 심지어 아래에 빨간 느낌표로 sdk 장소를 입력하라고 나옵니다.
그럼 우린 이 상태로 안드로이드 스튜디오를 그대~로 냅두고 3번 스탭으로 넘어가겠습니다.

3. 플러터 홈페이지에서 플러터 설치

▶3-1 : 위 상태에서 우리는 플러터 sdk 를 설치하러 플러터 공식 홈페이지로 들어갑니다.
[https://flutter-ko.dev/docs/get-started/install/windows] 이쪽으로 가서 플러터에서 주는 ~~.zip 파일을 다운받습니다.

▶3-2 : 다운을 받았으면 우린 이제 C드라이브로 갑니다.
C드라이브에 src 라는 폴더를 만들어주고 그안에 아까 다운받은 ~~~.zip 파일을 이동시킵니다.

▶3-3 : '여기에 압축풀기' 옵션을 이용해서 압축을 풀게 되면 아래와 같이 flutter 폴더가 생깁니다. 
자 이제 다시 아까 열어 놨던 안드로이드 스튜디오로 갑니다.

거기서 "..." 버튼을 누르고 아까 설치했던 C://src/flutter 폴더를 선택해주고 OK 버튼을 눌러줍니다.

▶3-4 : 그럼 이제 더이상 경고가 뜨지 않고 Next로 가는 문이 열리게 됩니다. stage clear! 

▶3-5 : 그러면 패키지 이름을 입력하라고 나오는데 보통 "com.회사이름.프로젝트이름" 이런식으로 작성하면 됩니다. 이제 Finish 버튼을 누르면, 성공적으로 안드로이드 스튜디오 플러터 프로젝트를 오픈하게 됩니다.

4. 안드로이드 스튜디오 flutter doctor

▶4-1 : 자 이제 거의 다 왔습니다. 조금만 힙내죠. 이제는 플러터 닥터를 실행할 차례인데요.
이거는 플러터가 제공하는 자체 진단 툴이라고 생각하면 됩니다.
cmd에서 하는 방법이 있지만 우리는 쉽게쉽게 가기 위해서 안드로이드 스튜디오에서 진행할 것 입니다. 

안드로이드 스튜디오 맨 왼쪽 Project를 보면 프로젝트 이름이 있습니다. 그걸 펼치면 맨 아래 쯤에 pubspec.yaml 파일이 존재합니다. 그 파일을 더블클릭해서 열어 줍니다.

▶4-2 : 그 파일을 열고 프로그램의 오른쪽 위를 보면 Flutter doctor라는 버튼이 생긴게 보입니다.
그 버튼을 눌러 주세요!

▶4-3 : 그럼 안드로이드 스튜디오 하단 부분에 Message 창이 열리면서 이렇게 체크 표시가 막 나옵니다.
그럼 이미 체크가 다 되어있는 분들은 준비가 된거라 넘어가도 되지만.
보통 제가 화살표로 표시한 두번째 체크 부분에서 android licenses 어쩌구 하면서 체크가 안되어있는 분이 있습니다. 그런분은 Step 5번을 거쳐서 6번으로 가면 되고

저처럼 이미 설치 되어있어서 V가 위에 세개가 다 되어있으면 Step 6번으로 가서 앱 실행을 하면 됩니다.

5. 안드로이드 라이센스 획득

▶5-1 : 안드로이드 라이센스를 accept 하려면 공식 홈페이지에서나 다른 곳을 찾아보시면 path등록을 하고 어쩌구 하고 해야하는데, 간단한 방법을 알려드리겠습니다.

우리가 설치한 Flutter sdk 경로로 가봅니다. C://src/flutter 겠죠? 그 폴더로 가면 flutter_console.bat 파일이 있습니다. 실행시켜 줍니다.

▶5-2 : 그럼 FLUTTER 라고 표시 된 콘솔창이 뜨게 되는데 여기에 아까 체크 안된 부분에서 입력하라 하는 flutter doctor --android-licenses 문장을 입력해 줍니다.

▶5-3 : 뭔가가 설치 되면서 yes, no 입력하라 하는데 y 입력해서 다 동의 해줍니다. 그러면 끝납니다.

그럼 이제 다시 안드로이드 스튜디오로 돌아와서 flutter doctor를 쳐보면 체크가 되어있을 것 입니다.

6. 플러터 앱 실행

▶6-1 : 직접 안드로이드 폰을 연결하신분은 안드로이드 스튜디오 위에 디바이스 이름이 뜨는데요. 그러면 재생 표시를 눌러주면 됩니다.

▶6-2 : 저 처럼 안드로이드 폰이 없는 분은 가상 디바이스를 이용해야합니다. 안드로이스 스튜디오 맨 오른쪽을 보면 스마트폰 그림에 안드로이드 마스코트 머리가 있는 아이콘이 있습니다. 그 버튼을 눌러줍니다.

▶6-3 : 그럼 이제 virtual devices 창이 뜨는데 create virtual device 버튼을 눌러줍니다. 우린 이제 가상의 스마트폰을 만들겁니다.

▶6-4 : 그럼 폰의 종류를 고를 수 있는데 무난하게 Pixel 2 + Playstore가 존재하는 버전을 선택해서 Next를 눌러줍니다.

▶6-5 : 그럼 안드로이드 버전을 설치하라고 하는데 R을 선택해주셔도 되고 원하는 버전을 선택해도 됩니다. 저는 Q 버전을 Download 버튼을 눌러서 설치했고, 그래서 Q 버전에 download 표시가 없는 것 입니다. 저는 Q버전을 누르고 Next를 누릅니다.

▶6-6 : 세로 기본세팅으로 할것인지 가로 기본세팅으로 할것인지 선택하고 Finish를 누릅니다.

▶6-7 : 그럼 이렇게 virtual device가 생긴걸 볼 수 있습니다. 여기서 action 부분에 재생버튼을 눌러줍니다. 그럼 스마트 폰이 실행 됩니다. (오류가 뜨는것은 무시해도 됩니다.)

▶6-8 : 처음 가상 디바이스가 뜰 떄는 오래 걸립니다. 커피 한모금 하면서 기다려줍니다.
어느정도 시간이 지나면 디바이스가 다 뜰것이고, USB Debug를 허용할것인지? 물어보는 창이 뜨는데 Allow 해줍니다. 그럼 아까 <no devices>로 되어있던 부분이 "Android SDK built for x86 (mobile)"로 바뀌면서 가상 디바이스랑 연결된걸 확인할 수 있습니다.

▶6-9 : 이제 끝났습니다. 우린 이 버튼을 누르기 위해서 여기까지 온 것입니다.
이제 기다리고 기다리던 플러터 앱을 실행 할 준비가 되었습니다. 설레는 마음으로 오른쪽 위에 있는 초록색 재생버튼을 눌러 줍니다. 누르고 앱이 첫 실행이 될라면 좀 기다려야 합니다.

▶6-10 : 이제 플러터 기본 앱이 실행 된 것을 볼 수 있습니다. 플러터의 main.dart 파일은 플러터 프로젝트 왼쪽에 보시면 >lib 폴더가 있는데 거기 안에 있습니다. 이제 그 안에서 여러분이 만들고 싶은 앱의 나래를 마음껏 펼쳐 보시죠.

감사합니다. 이상으로 플러터, 안드로이스 스튜디오 진짜 간단하게 설치하는 방법을 알아보았습니다.
간단 이라고 붙인 이유는 공식 홈페이지에서 cmd 창에서 path설정하고 뭐 하고 하는 것 없이 마우스를 통해서 간단하게 할 수 있어서 붙여 보았습니다.

길긴해도..덜 복잡하죠?