[Flutter] 시작하기(Window & Mac 환경설정)

yunulog·2022년 10월 27일

flutter

Flutter

목록 보기

1/8

Flutter 개발환경 설정

순서

Flutter SDK 다운
Android Studio 설치
환경변수 등록
기타 환경 설정

Flutter란?

[위키백과] 플러터(Flutter)는 구글이 출시한 오픈 소스 크로스 플랫폼 GUI 애플리케이션 프레임워크이다. 안드로이드, iOS, 윈도우즈, 리눅스 및 웹용 애플리케이션과 구글 퓨시아용 앱의 주된 소스코드로 사용된다.

안드로이드 앱을 만들기 위해서는 Kotlin 언어를 사용하고, ios 앱을 만들기 위해서는 Swift 언어를 사용해서 만들어야했다. 따라서 앱을 다른 환경에서 두번 만들어야했고 시간도 비용도 많이 들 수 밖에 없었다. 플러터는 그런 단점을 극복하기 위해 구글이 만든 프레임워크로, 한번에 안드로이드와 ios 앱을 모두 만들 수 있다는 장점이 있다. 플러터에서는 Dart 라는 언어를 사용하여 C 언어가 그 기반이다.

1. Flutter SDK 다운

Google에 flutter install 검색

Flutter 다운로드 페이지로 이동

자신의 OS에 맞게 SDK를 설치한다.
(외부 패키지를 많이 설치해서 쓸 예정이면 높은 버전은 좋지 않다고 한다. 나는 2.8.0으로 설치했다.)

압축파일 다운로드 후 원하는 곳에 압축을 푼다.
추후에 개발할 때 SDK 파일 경로를 등록해주어야하기 때문에 찾기 좋은곳에 압축을 푸는 것이 좋다.

2. Android Studio 설치

Google에 Android Studio 검색

Android Studio 페이지로 이동

자신의 OS에 맞게 Android Studio를 설치한다.
(설치하면서 별도로 설정할 것은 없지만 Android Virtual Studio는 나중에 설치해도 된다.)

Android Studio 실행 후 몇가지 설정해준다.

Plugins 메뉴에서 Flutter 플러그인 검색 후 설치
메인 화면에서 More Actions → SDK Manager 메뉴 클릭
Appearance & Behavior > System Settings > Android SDK > SDK Tools에서 Android SDK Command-line Tools (latest) 선택 후 우측 하단 Apply 클릭하여 설치하기

3. 환경 변수 등록

Window

시작버튼 옆 검색에 ‘환경 변수’ 검색해서 시스템 환경 변수 편집 클릭

고급 > 환경변수 클릭

Path 항목 선택 후 편집

새로 만들기 클릭 → 1단계에서 압축 푼 Flutter 폴더 안의 bin 폴더 경로를 적는다 → 확인
(저랑 똑같이 적으시면 안됩니다. 본인이 압축 푼 폴더 경로를 적어주세요 반드시!)

Mac OS

터미널을 연다.

다음 코드를 한 줄 씩 실행한다.

touch ~/.zshrc
open ~/.zshrc

*만약 터미널 이름이 zsh가 아니라 bash면 다음 코드를 한 줄 씩 실행해준다.

touch ~/.bash_profile
open ~/.bash_profile

그럼 다음과 같이 텍스트 편집기가 하나 나오는데 다음과 같이 입력하고 저장해준다.
(대소문자 잘 지켜줄 것)

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

(저랑 똑같이 적으시면 안됩니다. 본인이 압축 푼 폴더 경로를 적어주세요 반드시!)

4. 기타 환경 설정

크롬 브라우저 설치
터미널 오픈해서 flutter doctor 입력
(윈도우에서는 Powershell)

애플칩 맥북에서 에러나면 터미널&맥북 종료했다가 재부팅
터미널에 softwareupdate --install-rosetta 실행

flutter doctor 실행하면 다음과 같이 flutter 실행에 필요한 것들이 설치되었는지 확인할 수 있다.

맥북은 xcode, cocoapods 없다고 뜰 수 있는데 나중에 필요할 때 설치해도 되니 pass

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
**! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses**

이런 워닝 뜰 수 있는데 flutter doctor --android-licenses **실행하고 모두 y** 눌러서 동의해주면 된다.