쉬운 플러터 0강 : 플러터 설치 4-step (맥/윈도우)

4가지 스텝 따라해 주세요. 

 

Flutter 개발환경 셋팅

1. Flutter SDK 다운로드

2. Android Studio 설치

3. 환경변수등록

4. 기타

5. Android Studio New Flutter Project

 

 

1. Flutter SDK 다운로드 

OS에 맞는것 다운로드 해 주세요.  다운받은 zip을 원하는 폴더에 압축을 풀어 주세요. 

 

2. Android Studio 설치

 

2-1. plugin 메뉴에서 Flutter 플러그인 검색 후 설치 

 

atom oneDark 도 설치해도 좋아요

 

2-2. SDK Manager 눌러서 

SDK Tools 탭을 선택후 Android SDK Command-line Tools(latest)를 인스톨해주세요.

 

2.2 XCode 설치

M1 칩을 기준으로 설명하겠습니다.   홈페이지 이동 후 다운로드를 선택해 주세요.

https://developer.apple.com/xcode/

Xcode 14 Overview - Apple Developer

앱스토어가 뜹니다.  받기를 클릭 후 설치해 주세요. 

 

Git도 설치해야 되지만 XCode에 Git이 포함되어 있습니다. 

 

 

XCode 설치를 완료하였습니다. 

 

2.3 CacaoPods 설치

CacaoPods는 Swift 혹은 Object-C 프로젝트에서 사용할 수 있는 의존성 관리도구입니다. .NET 진영의 Nuget이나 Node 진영의 NPM과 동일한 역할을 담당하게 됩니다. 애플에서 공식 개발한 것은 아니고, 2011년 Eloy Duran와 Fabio Pelosin에 의해 개발되었으며 가장 방대한 라이브러리 풀을 제공하고 있으며 가장 널리 사용되는 도구입니다. (애플에서는 Swift Package Manager라는 의존성 관리 도구를 제공하지만 라이브러리 규모에서 CocoaPods에 비해 밀리느 편입니다. )

 

Flutter iOS 프로젝트에서도 CocoaPods을 통해 패키지를 관리하는 경우가 많습니다. 여기서는 Flutter 프로젝트에 CocoaPods를 설치하고 사용하는 방법에 대해서 소개드립니다. 

 

Flutter에 CocoaPods설치

 

https://guides.cocoapods.org/using/getting-started.html

 

sudo gem install cocoapods

비밀번호 입력후 인스톨이 됩니다. 

 

 

3. 윈도우 환경변수 등록

flutter 다운받고 압축푼 디렉토리를 환경변수에 등록한다. 

 

3. 맥북 환경변수 등록

터미널을 오픈해 주세요.  터미널이름에 맞는 명령어를 입력해 주세요. 

 

터미널이름이 zsh면

touch ~/.zshrc

open ~/.zshrc

 

터미널이름이 bash면

touch ~/.bash_profile

open ~/.bash_profile 

 

오픈된 파일에 아래 내용을 입력후 저장해 주세요. 

export PATH="PATH:flutter디렉토리/bin"   

 

4. 기타

크롬브라우저 필요합니다. 설치가 안되어 있으면 설치해 주세요.

터미널 오픈해서 flutter doctor 입력해 주세요. 

신형맥북에서 에러나면 터미널 & 컴퓨터 껐다가 켜고 터미널에 softwareupdate --install-rosetta 입력해 주세요.

 

Flutter 개발에 필요한거 설치되었나 확인 할 수 있습니다. 맥북은 Xcode, cocoapods 없다고 나올수 있습니다.  당장 설치할 필요는 없고 나중에 설치해도 됩니다. 

 

 

 

5. Android Studio

 

New Flutter Project 를 선택 후  Flutter 메뉴 선택, Flutter SDK path 를 입력해 주세요. (압축 푼 디렉토리를 넣어주세요)

프로젝트이름, 디렉토리명을 입력해 주세요.

Finish를 선택하시면 프로젝트가 생성이 됩니다.

 

한번 실행을 해 보겠습니다.

먼저, 디바이스를 Chrome(web)을 선택 후 실행 버튼을 클릭해 주세요.

 

실행된 화면입니다.   설정은 완료하였고, 다음시간부터 본격적으로 프로젝트를 진행해 보겠습니다. 

 

 

Rererence

https://www.youtube.com/watch?v=usE9IKaogDU&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C&index=1
https://points.tistory.com/69
https://www.youtube.com/watch?v=WXijyyla_DU
https://www.youtube.com/watch?v=yeCDtOC9wSo