[Flutter/플러터] 앱개발 환경설정 - Flutter 설치(Windows OS)

3.  Windows OS 환경

3-1. VScode 설치

https://code.visualstudio.com/

1). 홈페이지에 접속하여 '다운로드' 버튼을 눌러 프로그램을 다운로드 한다.(24.1.1일 기준, 1.85.1버전)

2). 다운로드 폴더에 들어가서 .exe 파일을 실행시킨다.

3). 위 그림과 같이 순서대로 설치하면 된다.

4). 설치완료 후 바탕화면에 VScode 아이콘이 생성된다.

 

3-2. Flutter 설치

1). VScode 왼쪽 탭에서 'Extension' 버튼을 클릭한다.

2). 'flutter'를 검색한다.

3). 하단에 검색 된 항목들이 보이는데, 'flutter'를 클릭한다.

4). 오른쪽에 파란색 'install' 버튼을 클릭한다.(이때 Dart도 같이 설치된다.)

5). 'Shift' + 'Ctrl(Control)' + 'P' 키를 누르면 중앙 상단에 팔렛트 검색창이 활성화 된다.

6). 'flutter'를 검색한다.

7). 'Flutter: New Project' 항목을 클릭한다.

 

8). Flutter SDK용 폴더 선택

• 처음이기 때문에 아래와 같은 오류가 생긴다.

Could not find a Flutter SDK. Please download, or, if already downloaded, click 'Locate SDK'.

• 'Download SDK 버튼'을 클릭한다.
• 폴더 선택창이 뜨는데, 'flutter' 폴더를 만들고 선택한다.

• 

  하단에 표시되는 설치 중 화면

• Flutter SDK를 초기화 하는데 몇분 소요된다. 
• ※ 주의사항
  • flutter 폴더의 경로에는 특수 문자나 공백이 포함되어 있으면 안된다.(ex, C:\Program Files\)
  • 그리고 경로에 더 높은 권한이 필요하면 안된다.
  • 일반적으로 flutter 폴더 경로는 C:\Users\(사용자 이름)\flutter 이렇게 될 것이고, 사용자 이름에 특수문자나 공백이 없다면 문제없이 작동한다.

9). 5~7).번 과정을 다시 수행한다.

10). 'Application'을 클릭한다.

11). Application을 생성할 폴더를 선택해야한다. 'development' 폴더를 생성하고 클릭한다.

• C:\Users\(사용자 이름)\development
• 앞으로 이 폴더에 앱(Application)들을 만들 것이다.

12). 'Select a folder~'버튼을 클릭한다.

13). Application의 이름을 만들어줘야 한다. 연습이기 때문에, 기본으로 생성되는 'flutter_application_1'을 사용한다.

14). 만약 경고창이 뜬다면 'Yes' 버튼을 누른다.

15). 위 그림과 같이 application이 만들어졌다면 성공이다.

 

3-3. Android Studio 설치

• 앱을 윈도우 컴퓨터로 시뮬레이션 해보려면 Android Emulator가 필요한데 이를위해 Android Studio를 설치해야 한다.

https://developer.android.com/studio

1). 안드로이드 홈페이지에 접속해서 파일을 다운로드 한다.(24.1.15일 기준, Hedgehog 버전, 이용약관 동의하고 다운로드)

2). 다운로드 받은 파일을 실행시킨다. 특별히 옵션을 바꿀건 없다. 모두 'Next'를 클릭하면 설치가 진행된다.

3). 설치가 완료된다면 위와 같은 창이 뜰 것이다. 여기서도 동일하게 모두 'Next'를 클릭하며 넘어간다.

4). 왼쪽의 Licenses 3개 항목에 대해 모두 Accept를 클릭하면, Finish 버튼이 활성화된다. 클릭하고 설치를 마무리한다.(중간에 '명령어 처리기' 관련 창이 뜬다면, 확인을 클릭하고 넘어간다.)

 

3-4. Android Emulator 설치

• 설치가 완료되고, 아래 그림과 같이 Android Studio가 실행된다. Android Studio 역시 VScode와 같은 IDE이기 때문에 여기서 flutter 개발을 해도 되지만, IDE는 VScode를 사용할 것이기 때문에 여기서는 emulator만 설치한다.

5). 'More Actions' 버튼을 클릭 후, 'Virtual device Manager'를 클릭한다.

(Windows Defender 방화벽 관련 경고창이 뜬다면 '액세스 허용' 버튼을 클릭하고 넘어간다.)

6). 기본으로 만들어져있는 emulator가 있다. 이걸 사용한다.

 

3-5. VScode에서 Emulator 실행하기

1). 'Ctrl + Shift + P'키를 눌러 명령어 팔렛트(Command Palette)를 활성화 한 후, 'flutter select'를 검색한다.

2). 'Flutter: Select Device'를 클릭한다.

3). 기본으로 만들어져있는 'emulator'를 클릭하면, emulator가 켜진다.

4). 'Run Code' 버튼을 클릭한다.

5). 'Start Debugging' 버튼을 클릭한다.

6). 오른쪽 핸드폰 그림과 같이 emulator에서 앱이 실행된다.