Flutter 설치 (Mac M1 Pro)

크로스 플랫폼 앱을 만들어보기 위해 플러터를 사용해보기로 했습니다.

리액트 네이티브와 플러터 중 어떤 것을 사용할 지 고민을 많이 했는데, 그래도 안 써본 프레임워크를 사용해보는 것이 더 좋을 것 같다는 생각이 들어 플러터를 공부해보도록 하겠습니다.

 

 

 

1. 플러터 설치

플러터 공식 사이트에 접속하여 자신의 OS 버전에 맞는 플러터를 설치하면 됩니다.

플러터 공식 사이트

zip 파일의 설치가 끝나면 압축을 해제해주고 압축 해제된 폴더를 원하는 위치에 두시면 됩니다.

압축 해제한 폴더

 

2. 환경 변수 추가

터미널에서 아래의 명령어를 통해 환경변수 입력창을 띄워줍니다.

# ~/.zshenv 없다면 아래 명령어 선행
touch ~/.zshenv

# ~/.zshenv이 생성 됐다면 아래 명령어 실행
open ~/.zshenv

환경 변수 입력 창이 띄어진다면 아래 환경 변수를 입력해줍니다.

export PATH="$PATH:{flutter 폴더 경로}/bin"

폴더 경로를 입력하는 꿀팁은 위의 flutter 폴더 경로 위에 커서를 둔 뒤, 플러터 폴더를 드래그해서 터미널에서 커서를 놓아주면 자동으로 폴더 경로가 쓰여지게 됩니다.

플러터 경로 입력 예시

여기까지 완료하셨다면 terminal에 flutter --version을 입력하시면 설치된 flutter의 버전이 표시됩니다.

 ~  flutter --version                                  ✔  base   21:07:06 
Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f468f3366c (13일 전) • 2023-07-12 15:19:05 -0700
Engine • revision cdbeda788a
Tools • Dart 3.0.6 • DevTools 2.23.1

 

3. Andriod Studio 설치

Android Studio 사이트에 접속해 Android Studio Flamingo를 설치했습니다. (각 버전마다 이름이 있는 것 같습니다.)

안드로이드 스튜디오 설치 페이지

안드로이드 스튜디오 버전

설치가 완료되면 dmg 파일을 넘겨주시면 어플리케이션이 생서됩니다.

이 후, 계속 next, next 버튼을 눌러주시고 모두 동의합니다를 눌러주시고 finish 버튼을 누르면 이 후 다시 다운로드가 진행됩니다!

 

저와 같은 경우 설치 도중 멈추고 5분이 넘어가서 취소하기를 눌렀는데 갑자기 welcome to Android Studio가 떴네요....

에뮬레이터 설치 등 나중에 추가해도 되는 것들의 설치였는지... 잘 모르겠네요..

아무튼 시작페이지에 도착했습니다.

Welcome to Android Studio

 

4. Flutter 플러그인 설치

Flutter plugin 설치

plugin 탭에서 Flutter plugin을 설치해주고 Android Studio를 다시 시작해줍니다.

 

5. SDK 설치

Welcome to Android Studio가 나오는 화면에서 아래 More Actions를 눌러주고 SDK Manager를 클릭해줍니다.

그 다음 SDK Tools 탭에 들어가서 Android SDK Command-line Tools (latest) 를 선택한 뒤 apply를 눌러 설치해줍니다.

SDK 설치

5. 크롬 설치

크롬이 설치되어 있지 않다면 크롬을 설치해주어야 합니다!

 

6. flutter doctor

terminal에 flutter doctor를 입력하면 알아서 flutter로 개발 할 수 있는 환경인지 검사해줍니다.

 ~  flutter doctor                                     ✔  base   21:07:15 
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 12.1 21C52 darwin-arm64, locale
    ko-KR)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor
      --android-licenses
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      and macOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Community Edition (version 2023.1.4)
[✓] VS Code (version 1.78.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

 

 

저와 같은 경우 두 가지 이슈가 있었습니다.

첫 번째는 android license 관련이 있었는데 flutter doctor --android-licenses 이 명령어를 입력해 다 동의해주면 됩니다.

두 번째는 Xcode 설치가 되어 있지 않다고 뜨는데, Xcode는 나중에 ios 앱 개발 시 필요하므로 우선은 진행하도록 하겠습니다.

 

7. 새 프로젝트 생성

Welcome to Android Studio 가 보이는 페이지에서 New Flutter Project를 눌러서 새로운 프로젝트를 생성해줍니다.

 

Flutter 프로젝트 생성

Flutter Tab에 들어가 아까 설치한 경로로 SDK가 설정되어 있는지 확인합니다. 다음 Next를 눌러줍니다.

이후 프로젝트 명과 기본 설정들을 해준 뒤 Create 버튼을 눌러줍니다.

 

이 후 생성된 프로젝트에서 lib/main.dart가 메인 페이지입니다. 이 프로젝트를 통해 코드를 작성하면 됩니다!

Flutter 프로젝트

7. 애뮬레이터 설치

애뮬레이터 설치

IDE 오른쪽 위 핸드폰에 안드로이드 로고가 그려진 버튼을 클릭하면 가상 기기를 설치 할 수 있습니다.

Create Device 버튼을 누르면 원하는 기기와 시스템 이미지를 다운로드 할 수 있습니다.

(시스템 이미지는 안드로이드 가상 머신 에뮬레이터에서 사용하는 가상 시스템 파일입니다.)

원하는 하드웨어 선택

원하는 시스템 이미지 선택

이후 설정들을 해주고 finish를 누르면 새로운 가상 기기가 추가됩니다.

새로운 가상 기기 추가

8. 실행

위에 <no devide selected>을 누르면 해당 프로젝트를 실행할 수 있는 기기들이 나오게 됩니다.

실행 가능한 기기들

원하는 기기를 선택해서 실행해줍니다.

프로젝트 실행

 

 

 

오늘은 플러터 프로젝트 생성 방법에 대해 공부해봤습니다. 다음 포스팅에서는 기본 위젯 및 레이아웃 잡는 법에 대해 공부해보도록 하겠습니다.