Flutter) Flutter 3.0 설치하기!!

 

초기 1.0 이하 버전의 Flutter는 정말 문제가 많았다곤 하는데 지금은 그래도 SDK가 1.7 버전이 넘은걸 보니 왠만큼 해결 했으리라 생각되었습니다.

 

저는 안드로이드 스튜디오와 XCode가 너무 지겨워서 이번엔 VS Code로 해보겠습니다!!

 

크로스 플랫폼 개발이라 그런지 설정할게 많으니 잘 따라와 주세요~!~!

 

 

0. Flutter는?

모든 블로그 마다 같은 말을 반복하는게 싫어서.. 제가 처음에 접한 잘 정리된 게시글을 공유해 드립니다.

 

[번역] Flutter는 왜 혁명적인가? - Dan Kim - Medium

요약 하자면, 모바일 개발 역사에서 어느정도 개발 방법이 자리잡기 시작했고, 여러개의 플랫폼을 한 번에 개발하기 위해 탄생하였습니다. 멀티플랫폼을 위해 개발된 WebView, 리액트 뷰를 비교하며 설명 해주고 있습니다. 그리고 Flutter의 핵심인 Widget개념에 대해서 설명하고 있습니다. 

 

 

1. 기본 툴 설치

Flutter는 크로스플랫폼 개발을 위한 도구인 만큼

각 플랫폼에 최적화된 툴들의 설치가 필수 적이고 최신버전또한 유지해야합니다..

크로스 플랫폼의 숙명입니다...

 

1.1 Android Studio 설치

 

아래 링크로 접속해서 가지고 계신 맥 환경에 맞게 안드로이드 스튜디오를 설치해 줍니다.

https://developer.android.com/studio?hl=ko 

Download Android Studio를 눌러주세요

약관 확인 체크박스를 해주시고, 맥이 인텔인지 M1 칩인지를 확인하시고 다운로드 해줍니다.

 

다운로드 받은 파일을 실행한 후, Android Studio 아이콘을 드래그해서 Applications 폴더에 넣어서 설치해줍니다.

 

 

 

1.2 XCode 설치

1) XCode설치

XCode는 간단하게 App Store를 이용해서 설치하시면 됩니다

좀... 오래걸리는게 흠이니 설치를 누르고 다음 과정으로 진행하셔도 됩니다.

 

2) CocoaPods(코코아팟) 설치

iOS개발 과정에서 라이브러리를 쉽게 관리해주는 툴 입니다.

objective-c에서는 CocoaPods이 유명했고, swift에서는 Swift-Package-Manager가 있습니다.

그렇지만 저희가 사용하는 크로스플롯폼 환경은 CocoaPods를 사용합니다.

 

터미널에 아래와 같이 입력해서 설치해줍니다.

$sudo gem install cocoapods

 

 

1.3 VSCode 설치

1) VSCode 설치

brew install --cask visual-studio-code

brew를 이용하면 아주 편리합니다.

1.4 Chrome 설치

Flutter 2.5 버전 부터는 Flutter에서 Web을 정식으로 지원하기 때문에, 웹 브라우저 설치가 필요합니다.

Flutter에서 웹 환경으로는 Chrome을 사용하게 됩니다.

 

아래 링크로 접속해서 다운로드 후, 설치해줍니다.

https://www.google.com/intl/ko/chrome/

 

2. 플러터와 다트 플러그인 설치

1) VS Code 실행

2) OS 의 상단에 있는 앱 메뉴에서 [View] - [Command Palette...] (⇧⌘P) 를 클릭합니다

3) 나타난 검색바에 'Extensions: Install Extensions' 를 적습니다

 

4) 좌측에 나타난 Extensions 창안에 있는 검색창에 'Flutter' 를 검색합니다

5) 검색된 결과 중 가장 상단에 있는 Flutter 항목에 있는 작은 초록색 Install 버튼을 클릭해서 설치 합니다

 

     (2021.12.28 기준으로 Flutter를 설치하면 자동으로 Dart까지 설치되네요!!)

 

6) Dart 플러그인도 4~5번과 같은 방법으로 'Dart'로 검색해서 설치합니다

 

3. Flutter SDK 준비

위에서 설치해준 Flutter Plugin은 SDK가 아니고 VSCode에서 디버깅 할 수 있도록 도와주는 플러그인 입니다.

혼동하지 말고 꼭 Flutter SDK를 설치 해줍니다.

 

1) https://flutter.dev/docs/development/tools/sdk/releases 접속

2) macOS 탭으로 이동해서 Stable SDK를 선택해서 다운로드 해줍니다.

3) 적당한 위치에 압축을 풀어줍니다 

     저는 계정폴더 밑에 SDK폴더를 하나 만들어서 압축을 풀어주었습니다.

 

4. 환경변수에 SDK 위치 등록

flutter 명령어를 어디서든 호출하기 위해선 환경변수로 등록해야 합니다.

다운받아서 압축푼 폴더를 환경변수로 등록합니다.

 

1) Home에 있는 .bash_profile 수정
    $code ~/.bash_profile
    또는 $code ~/.zshrc

    i 를 눌러서 Insert 모드로 변경후 내용 추가

2) .bash_profile(.zshrc) 내용 마지막에 다운받은 후 압축을 푼 Flutter SDK 경로를 설정해줍니다.    
    저의 경우 계정폴더($HOME) 바로 아래 sdk폴더를 만들어 주고 거기에 압축을 풀었습니다.

//기존 내용이 있다면 마지막 줄에 추가

export PATH=$PATH:$HOME/sdk/flutter/bin

3) 환경변수 적용

    $source ~/.bash_profile (또는)
    $source ~/.zshrc

 

5. 동작 진단하기

뭐 이런게 다 있나 싶지만, 크로스 플랫폼이다보니 안드로이드와 아이폰 세팅까지 해줘야 합니다...

 

1) 아까 봤던 [View] - [Command Palette...] (⇧⌘P) 를 실행합니다

 

2) Command Paletter 검색바에 'Flutter: Run Flutter Doctor'를 검색해서 실행합니다.

Doctor를 실행했을때, Flutter SDK가 환경변수가 없어서 나타나는 모습

 

3) 의사님(doctor)이 알려주는 의존성 문제는 꼭 고쳐보도록 합니다
    SDK 문제를 해결하고나니 Android toolchain, Xcode, iOS tools, Android Studio까지 세팅해주라고 하네요..

의사님이 고칠게 많데요.....

 

6. 의존성 문제 고치기

의사가 진단을 했으면 고쳐주기까지 해주지......

 

6.1 의존성 문제 : Android toolchain 

1) 커맨드 창을 실행 해서 명령어를 입력합니다

• $ flutter doctor --android-licenses
  
  Android sdkmanager not found. Update to the latest Android SDK and ensure that
  the cmdline-tools are installed to resolve this.
  이런 에러가 뜬다면 Android SDK Manager 에서 "Command-line Tools" 설치가 필요합니다.

2) 질문에 답해 줍니다

• Review licenses that have not been accepted (y/N)? y
• License android-googletv-license
  - Accept? (y/N): y
• License google-sdk-license
  - Accept? (y/N): y
• License intel-android-extra-license
  - Accept? (y/N): y
• License mips-android-sysimage-license
  - Accept? (y/N): y
• All SDK package licenses accepted 

 

3) VSCode - Command Palatte - doctor 호출해서 진단

• Flutter: Run Flutter Doctor

   

6.2 의존성 문제 : CocoaPods installed but not initialized

 

1) 커맨드 창에 명령어 입력

• $ sudo gem install cocoapods -n /usr/local/bin
• $ pod setup

2) VSCode - Command Palatte - doctor 호출해서 진단

• Flutter: Run Flutter Doctor

의사양반 이것도 내가 고쳤소~~~

   

6.3 의존성 문제 : iOS tools - develop for iOS devices

1) 커맨드 창에 입력해서 brew 설치 

• $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  (Homebrew 공식 홈페이지 : https://brew.sh/index_ko )
  

2) 아래와 같은 명령어 입력

• $ brew update
• $ brew install --HEAD usbmuxd
• $ brew link usbmuxd
• $ brew install --HEAD libimobiledevice
• $ brew install ideviceinstaller
• $ brew install ios-deploy

3) VSCode - Command Palatte - doctor 호출해서 진단

• Flutter: Run Flutter Doctor

    

6.4 의존성 문제 : Flutter plugin not installed

이번 문제는 Android Studio에서 해결해야 합니다

 

1) 안드로이드 스튜디오 실행

2) OS 의 상단에 있는 앱 메뉴에서 [Android Studio] - [Preferences] (⌘,) 를 클릭합니다

3) 좌측 'Plugins' 클릭

4) Plugins화면에서 'Marketplace' 클릭

5) 검색바에 'Flutter' 입력

6) Flutter Languges 항목에 있는 'Install' 클릭

 

7) Third-party Plugins Privacy Note : Accept 클릭

 

8) Plugin Dependencies Detected : Yes 클릭

9) 초록색 'Restart IDE' 버튼 클릭 

 

10) 'Dart' Plugin도 Flutter를 했던 과정과 마찬가지로 진행해 줍니다.

 

11) IDE and Plugin Updates : Restart 클릭

 

12) VSCode - Command Palatte - doctor 호출해서 진단

• Flutter: Run Flutter Doctor

 

설치완료!

도움되셨다면 하단의 광고 클릭 부탁드립니다~