[Flutter]SDK 설치 및 Xcode, Android Studio 연결(연동) 방법

1. 다운로드

• flutter를 설치하기 전에 Xcode와 Android스튜디오 먼저 설치한 후 진행하시는 것을 추천드립니다.

• Xcode는 flutter 개발언어인 Dart를 지원하지 않기 때문에 본인이 iOS개발자라 하더라도 Android 스튜디오를 사용해야 합니다.

• https://flutter.dev/docs/get-started/install/macos 에서 flutter SDK를 다운로드 받습니다.

• 다운로드 받은 파일의 압축을 풀고 잘 건드리지 않을 법한 곳에 폴더를 만들어 flutter 폴더를 옮겨놓습니다. 저는 아래 그림처럼 유저 폴더 하위에 Developer라는 폴더를 만들어 옮겨두었습니다. 제가 아래 첨부한 설치 및 테스트 명령어들을 그대로 복붙해서 사용하고 싶으시다면 저와 같이 유저 폴더 내에 Developer(첫 알파벳 대문자 유의)로 폴더를 만들고 압축을 푼 flutter 폴더를 넣어주시는 것이 좋습니다.

• Xcode는 앱스토어에서 다운로드 할 수 있습니다.

• Android Studio는 아래 링크에서 다운로드 받을 수 있습니다.
  https://developer.android.com/studio?gclid=Cj0KCQjw2tCGBhCLARIsABJGmZ4QOk_Jt5yU8mHYF4nXyodhbijo3x9IBqOIWqd5LTnopCoJFifv5dkaAlDnEALw_wcB&gclsrc=aw.ds

• Xcode, Android Studio를 모두 설치하고 flutter SDK 다운로드까지 하셨다면 flutter설치로 넘어갑니다.

2. flutter SDK 설치하기

터미널에서 아래의 작업을 순서대로 하시면 됩니다. 반드시 경로를 아래와 같이 "유저이름"폴더로 옮겨놓은 후 밑의 가이드라인을 따라 설치하시기 바랍니다.

1) 설치를 위해서 flutter의 bin파일의 Path를 설정해줘야합니다. 아래 명령어 입력하여 .zshrc파일을 연 후

vim .zshrc

2) flutter의 bin파일이 있는 경로를 아래와 같이 입력 후 저장(본인의 경로로 입력하셔야합니다.) 참고로, i 를 누르면 편집모드가 활성화되고 입력을 마친 후에 esc키를 눌러 편집모드를 종료 한 후 :wq! 를 입력하여 나오시면 됩니다.

export PATH="$PATH:/Users/"UserName"/Developer/flutter/bin"

3) 아래 명령어를 입력하여 소스 지정
source .zshrc

4) 아래 명령어를 입력하여 flutter가 제대로 작동 할 수 있는지 확인합니다. Xcode와 Android 스튜디오를 설치하고 바로 flutter를 설치하면 아래와 같은 이슈가 나타납니다. 해결하는 방법은 밑에서 따로 다루도록 하겠습니다.

flutter doctor

5) 아래 명령어를 입력하여 버전정보가 제대로 나오는지 확인합니다. 버전정보가 잘 나오면 잘 설치 된것입니다.

flutter --version

6) 만약 flutter --version, flutter doctor 명령어를 실행할 때 아래와 같이 권한문제가 언급된다면 앞에 sudo를 붙여 실행하시면 됩니다.

sudo flutter doctor
sudo flutter --version

Exception: Flutter failed to create a directory at "/Users/shinyongchul/.config/flutter". The flutter tool cannot access the file or directory.
Please ensure that the SDK and/or project is installed in a location that has read/write permissions for the current user.

3. flutter 설치 이슈 해결하기

1) Android license status unknown의 경우에는 아래 명령어를 입력합니다.

flutter doctor --android-licenses

위 명령어를 입력했을 때 아래와 같은 오류가 난다면 android studio를 실행해서 설정을 추가로 해줘야 합니다.

아래 그림과 같이 Configure에서 Preferences를 실행합니다.

아래 이미지를 참고해서 Android SDK Command-line Tools를 설치합니다. 체크박스에 체크하고 아래 ok 버튼을 누르고 팝업되어 나오는 창들의 안내사항을 따라 설치를 마무리합니다.

flutter doctor --android-licenses 명령어를 다시 입력한 후 모든 항목에 y로 동의해 줍니다.

flutter doctor 를 실행하여 제대로 설치가 되었는지 확인합니다.

2) Xcode "CocoaPods not installed." 문제는 아래 명령어를 입력하여 Cocoapods을 설치하면 해결할 수 있습니다. 만약 이미 Cocoapods이 설치되어있는 경우 uninstall 후에 다시 설치해보시기 바랍니다. 아래 이미지 처럼 모두 녹색으로 체크되어있다면 정상적으로 설치가 된 것입니다.

sudo gem uninstall cocoapods 제거
sudo gem install cocoapods 설치

3. Xcode에 연동하기

1) Xcode를 최신버전으로 업데이트 하고 components에 Xcode command-line tools가 최신화되어 있는지(설치되어있는지) 확인합니다.(일반적으로 최신버전을 다운로드한 후에 Xcode를 실행하면 자동으로 components를 업데이트 합니다.)

2) Xcode를 실행한 상태에서 아래의 명령어를 터미널에서 순차적으로 실행합니다. 첫번째 명령어에는 Xcode가 설치되어 있는 경로를 입력해야합니다. 만약 설치할 때 별도로 경로를 변경하지 않은 경우에는 아래 경로를 그대로 사용하셔도 됩니다.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

3) 아래 명령어를 실행하여 Xcode 라이센스에 동의해줍니다. space bar를 눌러 각 항목에 동의하고 마지막에 agree라는 문구를 입력하여 라이센스 동의를 종료합니다.

sudo xcodebuild -license

4) 위 작업을 모두 완료했다면 flutter로 작성한 code를 iOS 시뮬레이터로 빌드할 수 있습니다.

5) 터미널에서 아래 명령어를 실행하여 시뮬레이터를 실행합니다.(이미 시뮬레이터가 실행 중이라면 종료 후 아래 명령어를 입력합니다.)

open -a Simulator

6) 시뮬레이터가 실행되었다면 실제로 예제 flutter 앱이 잘 실행되는지 테스트하기 위해 아래 명령어를 터미널에서 순차적으로 실행해줍니다.

flutter create my_app (자동으로 샘플 앱을 만듭니다.)
cd my_app (앱이 있는 디렉토리로 이동합니다.)
flutter run (현재 실행되어 있는 iOS 시뮬레이터로 flutter 샘플 앱을 실행합니다.)

7) 모든 과정이 제대로 실행되었다면 아래와 같이 시뮬레이터에 샘플 앱이 실행된 모습을 확인하실 수 있습니다.

4. Android Studio 연동하기

1) Studio 첫 화면에서 Configure를 누르고 Plugins메뉴를 선택하면 아래와 같은 창이 생성됩니다.
2) 목록에서 Flutter와 Dart를 설치한 후 Studio를 종료하고 재실행합니다.

3) 재실행하면 홈 메뉴에 아래와 같이 "Create New Flutter Project" 메뉴가 추가되어 있습니다. 해당메뉴를 클릭해서 실행해줍니다.

4) Flutter App 메뉴에서 Flutter SDK path에 flutter폴더 경로를 입력해줍니다(체크한 부분 클릭)

5) Next 버튼을 누르고 프로젝트 configuration들을 입력하시고 Finish를 누르면 아래와 같이 Flutter 프로젝트가 실행 됩니다. 빨간색으로 박스 친 부분을 눌러 build에 사용할 시뮬레이터를 선택할 수 있습니다.