Flutter 프로젝트 준비(Flutter 프로젝트 생성하기,VSCode Dart 세팅,Android Studio 설치,Android Studio 에뮬레이터 설치,VSCode에뮬레이터 실행하기)
Flutter 프로젝트 생성하기
1. Visual Studio Code(VSCode)를 실행.
2. View → Command Palette 버튼을 클릭.
💡 단축키
window : Ctrl + Shift + P
macOS : Cmd + Shift + P
3. 명령어를 검색하는 팝업창이 뜨면, flutter라고 입력한 뒤 Flutter: New Project를 선택.
4. Application을 선택.
5. 프로젝트를 시작할 폴더를 선택하는 과정이다. 원하는 위치의 폴더를 선택한 뒤 Select a folder to create the project in 버튼을 클릭.
6. 원하는 프로젝트 이름을 입력 .
만약 중간에 아래와 같은 팝업이 뜬다면, 체크박스를 선택한 뒤 파란 버튼을 클릭.
7. 다음과 같이 프로젝트가 생성.
VSCode Dart 세팅
VSCode에서 Flutter 개발시 좀 더 수월하게 도와주는 설정을 추가
1. View → Command Palette를 선택.
2. 아래와 같이 dart recommend라고 검색한 뒤 Dart: Use Recommended Settings를 선택. 그러면 자동으로 저장 시 자동 줄 정렬해 주는 기능과 같이 편의 기능 설정이 적용.
3. 개발 과정에서 불필요한 내용을 화면에 표시하지 않도록 설정.
analysis_options.yaml 파일을 열고, 아래 코드를 복사해서 24번째 라인 뒤에 붙여 넣고 저장.
analysis_options.yaml
prefer_const_constructors: false
prefer_const_literals_to_create_immutables: false
위 코드 의미
main.dart 파일을 열어보시면 파란 실선이 존제.
파란 줄은, 개선할 여지가 있는 부분을 VSCode가 알려주는 표시.
12번째 라인에 마우스를 올리면 아래와 같이 설명이 보인다.
위젯이 변경될 일이 없기 때문에 const라는 키워드를 앞에 붙여 상수(변하지 않는 수)로 선언하라는 힌트. 상수로 만들면 화면을 새로고침 할 때, 상수로 선언된 위젯들은 새로고침을 할 필요가 없어서 성능상 이점이 있다.
아래와 같이 Icon앞에 const 키워드를 붙여주시면 해결되지만 눈에 안띄기 위해 코드 추가.
에뮬레이터 설치
Android Studio 설치
1. (https://developer.android.com/studio)에 접속한 뒤, `Download Android Studio`를 클릭해주세요.
2. 팝업 창이 뜨면, 쭉 읽어보시고, 바닥까지 스크롤을 내려주세요.
3.약관에 동의하도록 체크하신 뒤, 다운로드 버튼을 눌러주세요.
4.다운로드 폴더에 다운로드를 진행해주세요.
5. 다운로드가 완료되면, `android-studio`를 클릭해서 실행해주세요.
6. 아래 이미지들을 모두 `Next` 버튼을 눌러 설치를 진행해 주세요.
7. `Install` 버튼을 눌러 주세요.
8.`Next` 버튼을 눌러주세요.
9. 설치가 완료되었고, `Finish` 버튼을 눌러 Android Studio를 실행해 주세요.
10. 아래와 같은 창이 뜨면 `OK`를 눌러주세요.
11. Android Studio 사용성 개선을 위해 Google에 데이터를 공유하고 싶으시다면, `Send usage statistics to Google` 버튼을 누르시고, 그렇지 않으시면 `Don't send` 버튼을 눌러주세요.
12. Setup Wizard가 실행되면, `Next` 버튼을 눌러주세요.
13. `Next` 버튼을 눌러주세요.
14. 원하시는 테마를 선택하신 뒤 `Next`를 눌러주세요.
15. 만약 계정 이름이 한글이거나 띄어쓰기가 들어가 있다면
`Your Android SDK location contains non-ASCII characters` 혹은 `your path contains white space etc.` 라도 뜨며 진행이 안됩니다.
💡 에러가 없으신 분들은 `Next` 버튼을 누르고 26 순서로 넘어가 주세요
Android SDK Location 경로를 직접 만들어주도록 하겠습니다.
16. 이런 경우, 아래 그림과 같이 Android SDK Location에 `C:\\Users\\내 계정이름\\Local`까지만 선택해 복사해 주세요.
17.`탐색기`를 열고 주소창에 붙여 넣은 뒤 엔터를 눌러주세요.
18. 현재 Local이라는 폴더에 들어와 있고, 여기에 `Android`라는 폴더를 만들어 주세요. (대문자로 시작합니다)
19. 생성한 `Android` 폴더에 들어간 뒤 `Sdk` 라는 폴더를 만들어주세요. (대문자로 시작합니다)
20. 생성한 `Sdk` 폴더 안으로 들어가 주세요.
21. 윈도우 검색창에 `명령`이라고 검색한 뒤 `명령 프롬프트`를 우클릭하여 `관리자 권한으로 실행`해 주세요. 그냥 실행하면 안됩니다
실행할지 물어보는 팝업이 뜨면 예를 눌러서 실행해주세요.
22. 아래 명령어를 복사한 뒤 명령 프롬프트에 붙여 넣어주세요. 아직 실행하시면 안됩니다.
mklink /D C:\\android-sdk
다음 탐색기에서 주소창을 클릭해 주세요.
주소를 복사해 주세요.
복사한 경로를 명령 프롬프트 `android-sdk` 뒤에 붙여 넣어주세요. 참고로 아래 그림과 같이 사이에 띄어쓰기가 있어야합니다.
명령어를 실행해 아래와 같이 기호화된 링크를 만들었다고 뜨면 성공입니다.
Android/Sdk 폴더에 바로가기를 C 드라이브 바로 밑에 생성하는 과정입니다.
23. 다시 Android Studio Setup Wizard로 돌아와서, 아래 그림과 같이 Android SDK Location 밑에 폴더 아이콘을 선택해 주세요.
그러면 아래와 같이 경로를 선택하는 창이 뜹니다.
24. 아래 코드를 복사해서 아래 그림과 같이 경로 선택창의 주소에 붙여 넣고 `OK`를 눌러주세요.
C:\\android-sdk
25. 이제 경로 관련 빨간 에러가 사라지고 활성화된 `Next` 버튼을 눌러주세요.
26. `Next` 를 눌러서 세팅을 진행해 주세요.
27. License Agreement 화면이 나옵니다. 왼쪽 밑줄 친 부분을 클릭해 모두 `Accept` 를 눌러주세요
28. `Accept` 를 모두 누르고 나면 `Finish` 버튼이 활성화됩니다. 눌러주세요.
29. 설치가 진행됩니다. 시간이 다소 소요되니 천천히 기다려주세요
30. 중간에 `이 앱이 디바이스를 변경할 수 있도록 허락하시겠어요?` 라는 팝업이 뜨면 `예를 선택`해주세요.
31. 모든 세팅이 완료되면 `Finish`를 클릭해 주세요.
Android Command-line Tools 설치
Android Command-line Tools`는 Flutter에서 Android에 명령을 내리기 위해 필요합니다.
1. 아래와 같이 Android Studio가 실행되면, `More Actions`를 클릭한 뒤 `SDK Manager`를 클릭해주세요.
2. `SDK Tools`를 선택해 주세요.
3. `Android SDK Command-line Tools (latest)`를 선택한 뒤 `OK`를 선택해 주세요.
4. Dialog가 뜨면 `OK` 버튼을 눌러주세요.
5. 설치가 완료되면 `Finish` 버튼을 눌러주세요.
Android Virtual Devices 설치
앱을 개발시 실제 휴대폰을 연결하여 개발을 진행할 때도 있지만, 대부분의 경우 Virtual Device(컴퓨터에 가상의 휴대폰을 띄우는 소프트웨어)를 이용하여 개발합니다.
1. `More Actions` → `Virtual Device Manager` (또는 `AVD Manager`)를 선택해주세요.
2. 이미 Device 가 있는 분들은 아래 절차를 진행하지 않으셔도 됩니다.
3. (Device 가 없는 경우) `Create Virtual Device`를 선택해주세요.
4.기본적으로 선택되어 있는, `Phone` → `Pixel 2` 디바이스를 `Next` 버튼을 눌러 생성합니다.
5. Release Name `Q`의 `Download`를 클릭하여 가상 기기에 설치할 OS를 다운로드 합니다.</aside>
R 버전은 Virtual Device에서 문제가 있다고 해요. 그래서 Q 버전으로 진행할게요
6. 설치가 완료되면 `Finish` 버튼을 눌러 주세요.
7.`Q` 버전의 OS를 선택한 뒤 `Next` 버튼을 눌러 주세요. **API Level 29**인지 확인해주세요 :)
8.`Finish` 버튼을 눌러 Virtual Device 설치를 완료 해주세요.
9.성공적으로 추가된 Virtual Device를 확인하시고, 이제 Android Studio는 종료해주세요 </aside>
Android Licenses
1. `cmd`를 검색해서 `명령 프롬프트`를 실행해줍니다.
2.`flutter doctor`라고 입력한 뒤 엔터를 누릅니다. 아래와 같이 `Android toolchain`의 좌측에 `[!]` 표시가 되어있습니다.
3.문제를 해결하기 위해 `flutter doctor --android-licenses`를 복사해서 실행해 줍니다.
4.실행하면 라이센스에 대한 동의를 여러번 구하는데, `y`를 입력하고 엔터를 눌러 진행해줍니다.
5.`All SDK package licenses accepted` 라는 메시지가 뜨면 완료된 것입니다.
6.`flutter doctor` 를 입력했을 때 아래와 같이 `Android toolchain`의 좌측에 체크(`[v]`) 되었다면 완료
에뮬레이터 실행하기
1. VSCode 우측 하단에 Chrome (web-javascript)를 클릭.
2. Start Pixel 2 API 29 mobile emulator를 선택해주세요.
View → Command Palette →Flutter: Launch Emulator 해서 선택해도 됨
macOS의 경우 iOS 에뮬레이터를 사용하셔도 됩니다.
잠시 기다리면 에뮬레이터가 실행됩니다.
VSCode 우측 상단에 아래 화살표를 눌러 Run Without Debugging을 눌러주세요.
Start Debugging으로 실행해도 무방합니다. 디버깅 모드는 특정 라인에서 앱 실행을 멈추고 해당 변수에 어떤 값이 들어있는지 볼 수 있지만 Run Without Debugging이 실행 속도가 더 빨라 안내를 위와 같이 드렸습니다 🙂
에뮬레이터에 아래와 같이 흰 화면이 나오면 정상적으로 실행이 완료된 것입니다!
[Android]
[iOS]
에뮬레이터가 뜨고나면 VSCode 우측 상단에 아래와 같은 메뉴가 뜹니다.
