[Flutter] (Window) Flutter 프로젝트의 시작

🥕  document: https://docs.flutter.dev/get-started/install/windows/desktop?tab=download

🥕  reference: https://fl0wering.tistory.com/68

 

플러터 프로젝트를 시작하기 위한 순서를 나열해 놓은 글입니다. 전체 설정 및 흐름에 대한 내용을 간결하게 기억할 수 있게 작성하며, 공식문서와 참조문서를 활용해 작성하였습니다.

 

🐇 Flutter SDK 다운로드

url: https://docs.flutter.dev/get-started/install/windows/desktop?tab=download

 

상단 공식문서를 통해서 Windows이외의 SDK를 다운받을 수 있습니다. SDK를 다운로드 할 때 다음 조건을 충족시키면 문제가 발생하니 유의하자.

 

1) Flutter SDK가 특수문자 또는 공백이 포함된 경로에 존재하는 경우 (ex, C:\dev files\flutter, C:\dev@\flutter)

2) Flutter SDK가 포함된 경로에 접근할 때 높은 권한이 필요한 경우

 

위 조건을 배제한 적합한 경로에 SDK를 압축 해제했으면 다운로드가 완료되었습니다. 해당 Flutter SDK 폴더 내의 bin폴더 경로(ex, C:\dev\flutter\bin)는 다음 시스템 변수를 설정할 때 사용되므로 저장하자.

 

🐇 Window 시스템 환경 변수 설정

시스템 환경 변수에 접근하여 <User>와 관련된 사용자 변수의 Path를 편집해 주어야 한다.

(접근 경로: 내 컴퓨터/우클릭 → 속성 → 고급 시스템 설정 → 환경 변수) 

 

🥕 Path 편집 → 새로 만들기 → Flutter SDK의 bin 폴더 경로 추가

 

당근을 완료하면 새로운 cmd/VS Code Terminal에서 `flutter`명령어를 입력했을 때, 안내문과 함께 Welcome to Flutter 박스가 나온다면 설정이 완료된 것이다.

 

🐇 Flutter 설치 진단

cmd/VS Code Terminal에서 다음 명령문을 입력하면 Windows용 전체 Flutter 개발 환경에 대한 모든 구성요소를 검증할 수 있다.

 

🥕 flutter doctor

 

여기서 제시되는 모든 구성요소가 필요하진 않으며, 공식문서에 제시된 기본 가이드를 따라가는 경우 다음의 구성 요소는 설치되지 않은 것이 일반적이다.

1. Android toolchain - develop for Android devices
2. Chrome - develop for web
3. Android Studio (not installed)

만약 flutter doctor가 오류를 반환하는 경우, 재실행하거나 재설치를 진행해야 한다.

 

🐇 Tool Setting

Flutter Project를 진행하기 위해 사용하는 도구들인 VS Code와 Android에 대한 세팅을 진행해야 한다.

 

🥕 VS Code

VS Code는 Flutter Project를 편집하는 코드 편집기로, Flutter 확장이 포함된 v1.75 이상이어야 한다.

VS Code의 Version을 확인하는 방법은 다음 두가지 방법이 있다.

1. code -v : 터미널 입력
2. Release Note : VS Code 상단 Help → Show Release Note

다음으로 Flutter 및 Dart Plugin을 다운로드 해야 한다.

Flutter는 7.3M명이 다운로드한 Flutter Extension을 설치해준다. 이 확장 프로그램을 설치하면 Dart Plugin도 함께 설치된다.

 

VS Code의 장점은 Prettier이나, Dart는 Prettier가 적용되지 않는다. 따라서 Flutter Tree Extenstion을 설치하여, 작성 된 코드를 tree형태로 정리해주어 Prettier의 효과를 볼 수 있다.

 

🥕 Android

Android는 VS Code에서 AVD, Android Virtual Device, 즉 Emulator를 사용하기 위해 필요하다.

Android 상단의 Tools → AVD Manager → Create Virtual Device 경로를 통해 원하는 기기를 추가할 수 있다.

 

기기는 어떤 것을 선택해도 상관 없으나, pixel이 Android폰과 가장 흡사하다.

하지만 Version은 Android 정책이 변경된 13 Version의 Tiramisu, API 33,를 선택하는 것을 추천한다.

AVD 기기 생성을 완료하기 전, Verify Configuration에서 Device Frame을 제거(선택 박스 해제)해 주는 것이 보기 깔끔하다.

 

Emulator는 VS Code 우측 하단 Prettier 좌측 버튼을 통해 설정할 수 있으며, cold boot가 아닌 일반 Emulator를 실행해주자. 실질적으로 보게되는 문구는 `Start Pixel 3a API 33 mobile emulator`이다.

 

AVD를 실행하게 되면 꼭 해줘야할 행위가 있다. 바로 언어 설정이다.

AVD의 Settings에서 Language를 검색한 후 System → Languages → Add a language →  (맨아래)한국어/대한민국으로 추가를해주자.

이후 한국어를 English와 자리를 바꿔주면 한국어가 Default language로 자리잡게 된다.

🐇 프로젝트 시작

모든 설정이 완료되었으면 VS Code에서 프로젝트를 생성하고 시작할 수 있다.

 

🥕 ctrl+shift+p → `flutter`명령어 입력 → `New Project`선택 →  `Application`선택 → Project 상위 폴더 선택 → Project Name 입력

 

위 과정을 통해 프로젝트를 생성하고, VS Code 상단의 Run → Run Without Debugging 또는 F5 버튼을 통해 프로젝트를 실행하고 Emulator에서 확인할 수 있다.