개발 공부/앱

플러터(FLUTTER) 설치하기

빵다희 2022. 7. 10. 23:15

안녕하세요. 

오늘은 플러터를 설치해보겠습니다.

 

1. FLUTTER SDK 다운 

https://flutter.dev 에 접속해주세요.

 

Flutter - Build apps for any screen

Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

flutter.dev

우측 상단에 Docs - Install Flutter를 클릭해주세요.

pc의 os에 맞게 선택해 설치파일을 다운받아주세요.

맥북 m1이상은 apple silicon 버전 파일을 다운로드해주세요.

다운로드가 완료되었다면 찾기 편한 곳에 압축을 풀어주세요.

저는 사용자-user안에 넣었습니다.

 

2. Android Studio 설치 

https://developer.android.com/studio?hl=ko 에 접속하세요.

 

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

화면 아래로 내려가면 os별로 안드로이드 스튜디오를 다운받을 수 있습니다.

맥북 m1 이상은 arm 버전을 다운받아 주세요.

안드로이드 스튜디오 설치는 다 next를 누르거나 accept를 선택하시면 됩니다.

안드로이드 스튜디오 설치가 다 되었다면 marketplace에서 flutter를 검색해서 설치해주세요.

혹시나 flutter를 검색했을 때 조회되지 않는다면 파란색의 'search in marketplace'를 클릭해보세요.

install을 누르신 후 나오는 팝업 모두 ok 하시면 됩니다. (third party ~~~, dart install~~~)

flutter 플러그인도 설치완료 하셨다면 projects 탭으로 이동합니다.

 

More Actions - SDK Manager를 클릭하세요.

Android SDK - SDK Tools 탭에서 

Android SDK Command-line Tools를 체크하고 하단의 Apply를 눌러 설치를 진행해주세요.

그 후에 나오는 에러창은 그냥 Ok를 눌러주세요.

 

3. 환경변수 편집

 

  • 윈도우 환경변수 편집

시작에서 '시스템 환경변수 편집'을 검색해주세요.

팝업 창이 나오면 하단에 환경변수 버튼을 눌러주세요.

목록에서 'path'를 눌러 편집을 진행해주세요.

새로만들기 버튼을 클릭하여 새 행이 추가가 되면 압축푼 flutter의 bin 폴더 위치를 붙여넣어 주세요.

저의 경우는 /Users/user/flutter/bin 이렇게 입력하면 됩니다.

 

  • 맥 환경변수 편집 

터미널을 열어주세요.

상단의 터미널 이름을 확인 하신 후, 

터미널 이름이 zsh 이면

touch ~/.zshrc

open ~/.zshrc 입력

touch ~/.zshrc
open ~/.zshrc

 

터미널 이름이 bash 이면

touch ~/.bash_profile

open ~/.bash_profile 입력해주세요.

touch ~/.bash_profile
open ~/.bash_profile 

 

입력이 잘 되었으면 빈 파일 하나가 열립니다.

그러면 거기에 

export PATH="$PATH:플러터폴더경로/bin"을 입력하고 command + s를 눌러 저장해주세요.

저의 경우는 export PATH="$PATH:/Users/user/flutter/bin" 이렇게 입력하면 됩니다.

export PATH="$PATH:플러터폴더경로/bin"

 

 

4. 그 외 설치해야 할 것..

 

  • 미리보기 확인시 필요한 크롬브라우저 설치 
  • 터미널 오픈해서 (윈도우 cmd/ 맥 터미널) flutter doctor 입력
flutter doctor 

 

flutter doctor를 실행하는 이유는 flutter 앱개발에 필요한 것들이 다 설치되었나 진단하기 위함입니다.

맥북은 xcode,cocoapods가 없다고 나올수 있는데 필요하면 설치 하셔도 됩니다.

맥북에서 혹시 에러가 발생하면 터미널과 pc를 완전히 껐다가 새로켜서 다시 터미널에 

softwareupdate --install-rosetta 입력해보세요. 

softwareupdate --install-rosetta 

 

 

! Android toolchain 워닝이 뜬다면 flutter doctor --android-licenses를 터미널에 입력해보세요.

flutter doctor --android-licenses

 

이후 나오는 것들에 모두 y 입력해주세요.

다시 flutter doctor를 실행하면 아래와 같이 나옵니다. 

 

5. 프로젝트 생성하기 

 

안드로이드 스튜디오를 실행합니다. 

Projects - New Flutter Project를 선택하고 Flutter 항목을 선택해 sdk위치를 지정해줍니다. 

다운로드 받았던 플러터파일을 압축 푼 곳으로 지정해주시면 됩니다. 

프로젝트의 이름,  위치, 어떤 플랫폼에 배포한건지 선택하고 Finish 버튼을 눌러 생성을 시작합니다.

이렇게 화면이 나온다면 정상적으로 생성이 되었습니다.

만약 실행하고 싶으시다면 상단에 아래와 같이 선택하시고 실행버튼을 눌러주세요.

정상적으로 프로젝트가 실행된 모습입니다.

 

감사합니다.

 

728x90
반응형

'개발 공부 > ' 카테고리의 다른 글

플러터 등장배경과 장점  (0) 2022.07.23