개발/Flutter

Flutter 설치

leebera_ 2022. 3. 24. 03:54

Mac(IOS, Android) 설치 바로가기

Window 10(Android)

  1. Flutter SDK 설치

    stable 버전의 flutter sdk를 압축한 zip파일 다운로드 한 뒤 원하는 경로에 압축 풀기

    압축 풀면 flutter 폴더가 생긴다.

    SDK 설치 링크

    작성일시 기준으로 한글로 된 설치 페이지에선 설치 버튼이 비활성화 되어있어 설치가 되지 않는다.

  2. 환경 변수 추가

    환경 변수에 압축 푼 경로\flutter\bin 을 추가

    예시로 난 d드라이브에 압축을 풀었으므로 D:\flutter\bin 를 환경 변수에 추가했다.

    환경 변수 설정 방법 링크

  3. 환경 변수 설정 확인

    cmd 창 열어 flutter 명령어 입력해서 작동 여부를 통해 환경 변수 설정 확인

    정상 작동한다면 여러 안내문구와 처음 입력시엔 welcome 어쩌구가 뜬다.

  4. 개발 툴 설치

  1. VS Code에 Flutter 확장프로그램 설치

    Ctrl + Shift + p 누르면 command palette가 뜨는데 여기에 Extensions: Install Extensions 엔터 누르면 확장 프로그램 설치 창이 뜨는데 검색 창에 flutter 입력하여 뜨는 확장프로그램 설치

  2. Flutter 정상 동작 진단

    다시 Ctrl + Shift + p 눌러 command palette를 열고 doctor를 입력하여 Flutter: Run Flutter Doctor 를 엔터 눌러 실행한다.

    내 경우엔 SDK를 찾을 수 없다고 떠서 Locate SDK를 눌러 flutter를 설치한 위치를 지정해줬다.

    난 D드라이브에 깔아뒀으므로 D:\flutter에서 select눌렀다.

    내 경우에 flutter doctor 결과로 android toolchain과 visual studio에 문제가 있는 것으로 떴는데 flutter와 vs code에 문제가 없어 한번 프로젝트 생성, 실행 해보니 문제가 없어 android studio나 visual studio를 쓰지 않으므로 flutter와 vscode에 문제가 없으면 괜찮은 것으로 보인다.

  3. 새 프로젝트 생성

    command palette를 열어 Flutter: New Project 를 엔터 눌러 새로운 프로젝트를 생성할 위치를 선택하고 앱 이름을 입력하고 기다리면 프로젝트가 생성된다.

  4. 실행 디바이스 설정

    command palette에서 Flutter: Select Device 엔터 눌러 앱을 실행할 디바이스 선택

    내 경우엔 android studio를 사용하며 생성해둔 에뮬레이터가 있어 그것으로 설정했다.

    어떤 디바이스가 선택 되었는지 오른쪽 아래에 사진과 같이 보인다.

  5. 실행

    F5 눌러 앱 실행 확인

Window 10(Android) 설치 바로가기

Mac(IOS, Android)

  1. Flutter SDK 설치

    stable 버전의 flutter sdk를 압축한 zip파일 다운로드 한 뒤 원하는 경로에 압축 풀기

    압축 풀면 flutter 폴더가 생긴다.

    SDK 설치 링크

    작성일시 기준으로 한글로 된 설치 페이지에선 설치 버튼이 비활성화 되어있어 설치가 되지 않는다.

  2. 환경 변수 추가

    mac에선 홈 폴더에 있는 .zshrc 스크립트 파일을 수정해서 환경 변수를 추가해야 함

    nano나 vi같은 편집기로 열어 압축풀어 생긴 flutter폴더 내의 bin폴더의 경로를 추가한다.

    예시로 난 사용자 폴더에 압축을 풀었으므로 export PATH:$PATH:~/flutter/bin 를 추가하고 저장한 뒤 source ~/.zshrc 명령을 입력해 수정된 내용을 갱신한다.

    만약 잘못입력해서 source로 갱신했을 때 에러가 발생하고 명령어가 먹히지 않는다면 아래 두 줄을 입력하면 다시 명령어가 먹힌다.

     PATH=/bin:/usr/bin:/usr/local/bin:${PATH}
 export PATH

  3. 환경 변수 설정 확인

    terminal에서 which flutter 명령어 입력해서 환경 변수 설정한 경로가 출력되면 정상적으로 설정된 것이다.

  4. 개발 툴 설치

    • VS Code 편집기를 사용할 것이므로 VS Code 설치

      VS Code 설치 링크

    • Android를 위해 Android Studio설치

      Android Studio 설치 링크

    • Xcode설치 (앱스토어 또는 아래 링크에서 설치)

      Xcode 설치 링크

      설치 후 아래 명령 입력

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

      sudo xcodebuild -license 입력하면 space바 꾹 눌러 내용 생략하고 마지막에 agree입력 후 엔터 클릭

  5. VS Code에 Flutter 확장프로그램 설치

    Ctrl + Shift + p 누르면 command palette가 뜨는데 여기에 Extensions: Install Extensions 엔터 누르면 확장 프로그램 설치 창이 뜨는데 검색 창에 flutter 입력하여 뜨는 확장프로그램 설치

  6. Flutter 정상 동작 진단

    다시 Command + Shift + p 눌러 command palette를 열고 doctor를 입력하여 Flutter: Run Flutter Doctor 를 엔터 눌러 실행한다.

    내 경우엔 SDK를 찾을 수 없다고 떠서 Locate SDK를 눌러 flutter를 설치한 위치를 지정해줬다.

    난 사용자 폴더에 깔아뒀으므로 ~/flutter에서 Set Flutter SDK folder 눌러 설정했다.

  7. 새 프로젝트 생성

    command palette를 열어 Flutter: New Project 를 엔터 눌러 새로운 프로젝트를 생성할 위치를 선택하고 앱 이름을 입력하고 기다리면 프로젝트가 생성된다.

  8. 실행 디바이스 설정

    에뮬레이터 실행

    • Android

        emulator -list-avds
  emulator @emulatorName

      emulator -list-avds로 설치되어 있는 에뮬레이터 목록을 보고 에뮬레이터 이름을 @다음에 입력해 실행

    • IOS

        open -a Simulator

      File -> Open Simulator 에 들어가 다른 디바이스로 변경 가능

    command palette에서 Flutter: Select Device 엔터 눌러 앱을 실행할 디바이스 선택

  9. 실행

    F5 눌러 앱 실행 확인

window 설치 참고

mac 설치 참고

Android emulator terminal에서 실행 참고

저작자표시