2.Flutter 개발 환경 설정_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

개발환경 선택

플러터 개발을 할 때는 대상 웹과 동일한 플랫폼에서 해야 합니다

즉 Mac OS용으로 개발하기 위해선 Mac이 필요하고 Windows 타깃으로 개발을 하기 위해선 Windows PC가 필요합니다 저는 윈도우 기반 개발 환경을 구축하려 합니다(환경이 준비되어 있으면 넘어가셔도 무관합니다)

---

개발 환경 준비 프로세스

1. Flutter SDK 다운로드 및 설치 -> 필요

2. 에디터(Visual Studio Code) 설치 및 플러터 확장 프로그램 설정 -> 완료

https://tiny-immj.tistory.com/73

Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_1. 설정

 

1. Flutter SDK 다운로드 및 설치

1) Flutter SDK 다운로드

하기 링크에서 SDK를 다운로드 

Stable channel(Windows) 정식 버전 중 하나를 다운로드 받으면 된다 (참고 version : flutter_windows_3.24.0-stable)

https://docs.flutter.dev/release/archive

Flutter SDK archive

 

zip 형식의 압축 파일을 적절한 경로에 압축을 풀어준다

예시) D:\dev

 

 

2) 환경 변수 등록 

SDK를 환경변수에 등록한다

Flutter SDK 압축을 푼 경로의 bin 폴더까지 path에 등록해주면 완료

예시) D:\dev\flutter_windows_3.24.0-stable\flutter\bin

 

 

3) SDK 설치 확인

cmd에서 SDK가 정상적으로 설치되었는지를 확인해본다

$ flutter doctor

SDK 설치 확인은 첫 번째 체크 Flutter (Channel ~... )을 보면 설치된 것을 확인 할 수 있다

그리고 늘 그렇듯이, 오픈소스 환경 개발 세팅은 한 번에 되지 않았다 하하하 

이제부터 저 빨간 체크들을 해결해보면 된다~! 

 

 

4) SDK 설치 이슈 해결 - 1

Android toolchain - develop for Android devices 

Android SDK 위치를 못 찾는다고 한다 -> 당연하다 설치 안했기 때문임 

 

친절하게 안내해준 링크에 가서 다운로드 받는다 

https://developer.android.com/studio/index.html

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

그냥 권장 표시된거 받아줬습니다

 

설치한다 ^*^

 

 

5) 3)의 반복 

$ flutter doctor

 

 

 

6) SDK 설치 이슈 해결 - 2

이제 다음 에러 해결하면 됩니다 

안드로이드 스튜디오 관련한 이슈가 두가지 있는데

첫 번째는 cmdline-tools가 없다 / 두 번째는 라이선스 상태를 알 수 없다는 것

첫 번째 cmdline-tools는 android studio의 SDK Manager에서 인스톨 가능하다

 

SDK Manager 메뉴 찾기

Android SDK Command-line Tools 췍!

OK 누르면 인스톨 됩니다

 

 

7) SDK 설치 이슈 해결 - 3

두 번째는 라이선스 상태를 알 수 없다는 것

=> flutter doctor의 메세지 해결책에 따른다 

$flutter doctor --android-licenses

아아 4개의 라이선스에 동의해야한다고 뜬다 

y를 여러번 눌러서 모두 동의해주면 

모두 동의가 되었다 

 

 

8) flutter doctor 명령어로 SDK 설치 확인

Visual Studio는 공부 과정에서 쓰게 된다면 다시 설치하는 걸로 하고 넘기려고 합니다 

오늘도 해결! 

 

다음 포스팅에서는 hello world 프로젝트를 생성해보겠습니다

 

 

---

시리즈

1. Flutter 와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_1.설정

https://tiny-immj.tistory.com/73

Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_1. 설정