Flutter | 2023년 Flutter 다시 시작하기 - 기본 설치

반응형

잠시 쉬던 Flutter와 개발을 다시 시작해 보려 합니다.

그러려면 일단 설치부터 시작 해야겠죠?

2021.09.07 - [개발/Flutter] - Flutter 기본 세팅 이전글을 참조해서 설치해 보겠습니다.

---

1. Flutter 설치를 해줍니다.

https://flutter.dev/docs/get-started/install

Install

위 사이트에 접속한 후 Flutter를 다운로드 받아 줍니다.

---

2. zip 파일 다운로드 후 압축 해제한 파일을 c:\flutter 에 옮겨주고 환경 변수에 c:\flutter\bin 을 Path에 입력해 줍니다. C:\flutter은 본인이 원하는 곳으로 해주면 됩니다. 공식 사이트에서는 C:\src\flutter로 되어 있네요.

환경 변수는 우선 윈도우에서 환경 변수를 실행 해 줍니다.

그후 시스템 속성 창에서 환경변수(1번)를 클릭한 후, 환경 변수 창의 시스템 변수에서 Path(2번)를 눌러주고 편집(3번)을 눌러 줍니다.

그 후 새로 만들기(1번)을 눌러 준 다음 본인이 설정한 경로를 입력해 주시면 됩니다.

명령 프롬프트를 실행한 후, flutter --version을 실행해보면 정상적으로 세팅이 되었는지 확인 할 수 있습니다.

위와 같이 버전이 잘 나온다면 정상적으로 실행 된 것입니다.

---

3. 다음은 에디터를 설치 해 보겠습니다. 보통 vscode와 android studio를 많이 쓰는데 저는 android studio를 설치 해 보겠습니다.

https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android Developers

다른 설정 없이 기본으로 설치 하시면 됩니다.

그 후 실행이 되면 plugins 에서 flutter을 검색 하신 후 install하고 재시작을 해주시면 됩니다.

---

4. 재시작 후 Flutter project 로 새 플러터 프로젝트 생성해 줍니다.(한글 폴더가 있을 시 에뮬레이터가 작동하지 않는 현상이 있음)

---

5. 본인 스마트폰을 이용하면 좋겠지만 에뮬레이터를 이용해도 좋기 때문에 에뮬레이터를 설치해도 좋습니다. 기본 프로젝트 생성 후 AVD Manager 에서 에뮬레이터 설치 후 실행을 하면 됩니다.

---

6. 실행 시 Unload로 시작하는 에러가 발생 시 File - Project Structure 에서 Project SDK 에서 SDK 설정 후 실행 해주면 정상 실행해주면 됩니다.

---

7. VS Code 에서 실행을 위해서는 VS Code 설치 후 좌측의 확장 에서 Flutter 설치해주시면 됩니다.

---

8. 안드로이드 스튜디오에서 하단에 Terminal에서 Flutter doctor 실행해주세요.(자세한 사항을 보고싶으시면 flutter doctor -v를 실행해 주시면 됩니다.)

---

9. 2번째의 Android toolchain에 !표가 있다면 Android Studio 에서 File - Settings 에서 Appearance & Bejavior - System Settings - Android SDK 선택 후 SDK Tools 탭을 선택, Android SDK Command-line Tools 를 설치하시면 됩니다.

---

10. 터미널에서 flutter doctor --android-licenses 실행 후 y로 라이센스 동의 후 다시 flutter doctor 실행 하면 !가 V로 바뀐 것을 확인 할 수 있습니다.

---

11. 4번째의 Android Studio (not installed)이 !로 되어 있을 시 flutter config --android-studio-dir="C:\Program Files\Android\Android Studio" 로 안드로이드 스튜디오의 경로를 지정해 주면 완료됩니다.

---

12. 기본 세팅 끝, VS Code 에서 Flutter Launch Emulator 실행 후 원하는 에뮬레이터 실행 후 우측의 실행 버튼 클릭 시 에뮬레이터 실행 및 해당 APK 설치 후 실행 됩니다. 에뮬레이터에 apk로 실행해 볼 수 있습니다.

---

13. 프로젝트를 만든후 package 폴더가 안만들어 질때는 File - Project Structure - Modules에서 해당 폴더를 선택하고 상단의 Source를 눌러주면 package를 생성할 수 있습니다.

 

Tip. 디버깅 후 하단에 에뮬레이터 클릭하면 상단에 크롬이나 엣지로도 실행 할 수 있습니다.

Tip2. flutter doctor 실행 시 X나 !표가 체크된 부분은 구글링하면 해결방법이 나옵니다. 잘 보고 따라하시면 해결 가능해요.