본문 바로가기
개발자로그/Flutter

Flutter 환경 설정(Preferences)

by 무사도 2021. 11. 5.
728x90
728x170

안녕하세요 무사도입니다.

 

지난 시간에는 플러터의 개념에 대해서 정리 해 봤습니다.

I did researching Flutters's concepts

2021.09.15 - [개발자로그/Flutter] - Flutter 기본 잡기 - 1

 

Flutter 기본 잡기 - 1

안녕하세요 플러터를 한번 공부하면서 정리 하려고 합니다. 플러터는 Google에서 만든 Cross-Platform Framework 입니다. 하나의 코드를 기반으로 해서 모바일 플랫폼 앱(iOS/Android) 를 아울러 Desktop App 도.

machunamoon.tistory.com

 

오늘은 Flutter 개발을 위해 환경설정을 해 보도록 하겠습니다.

Today, I  do setting  for Flutter development preference

 

1. 플러터는 iOS, 안드로이드, Web 등을 전부 개발할수 있는 상태 입니다. 다만 iOS 앱 개발을 하기 위해서는 MAC에서 개발을 해야하고 Xcode가 필수적으로 필요합니다. 저는 하이브리드로 개발 해야 하는 이유로  맥북용 셋팅을 안내 해 드립니다.

1. Flutter can all platform developments. However, in order to develop iOS apps, you need to develop on a MAC and Xcode is essential. I will guide you throught the settings for MAC as a reason to develop as a hybird

 

2. 현재 개발을 진행하는 맥북프로의 사양은 다음과 같습니다.

The Sepceifications of my Mac as follows

 

 

3. Flutter 설치 의 경우 

https://flutter-ko.dev/docs/get-started/install/macos 의 URL 을 참조 하시면 됩니다.

- Flutter  SDK  설치 (https://flutter-ko.dev/docs/development/tools/sdk/releases?tab=macos)

현재(11월 1일) 공식 홈페이지에서는 스태이블 한 버전은자동 다운로드 되지 않고 있습니다.

3. For Flutter installation You can refer to the URL of https://flutter-en.dev/docs/get-started/install/macos.

Install Flutter SDK (https://flutter-en.dev/docs/development/tools/sdk/releases?tab=macos)

Currently (November 1), the stable version is not automatically downloaded from the official website.

 

현재 제가 설치 한 버전은 2.2.3 버전입니다.

git clone -b master https://github.com/flutter/flutter.git
 ./flutter/bin/flutter --version

 위 주소에서 다운로드 및 설치가 가능합니다.

 

다운로드 된 버전을 원하시는 폴더 로 설치 해주시면 됩니다.

 

Currently the version I have installed is version 2.2.3.

git clone -b master https://github.com/flutter/flutter.git
 ./flutter/bin/flutter --version

You can download and install it from the address above.

Just install the downloaded version to the desired folder.

 

4. Flutter 환경변수설정

플러터의 환경 설정을 진행 합니다

제가 사용중인 M1 CPU 인 Big Sur 의 경우 

zshrc 에서 설정 합니다. 새로 사니까 zsh 로 바뀌었는데 bash 랑 동일 할꺼라고 생각 합니다.

zsh 니까 .zshrc 파일에 패스를 추가 해 줍니다.

bash  쉘의 경우는 ~/.bash_profile  파일을 수정 해줍니다.

 

4. Flutter environment variable setting

Proceed to flutter configuration

For the M1 CPU I'm using, the Big Sur

Set in zshrc . I changed it to zsh because I bought it new, but I think it will be the same as bash.

zsh, so add the path to the .zshrc file.

For bash shell, edit ~/.bash_profile file.

 

이미 다들 알고 계시겠지만.  

파일을 열고 export PATH="$PATH:~/Downloads/flutter/bin"추가 후

esc키를 누르고 :wq 를 입력후에  enter키를 입력합니다.

 

As you all probably already know.

After opening the file and adding export PATH="$PATH:~/Downloads/flutter/bin"

Press the esc key, type :wq, and then press the enter key.

 

그리고 설정 파일을 새로고침 합니다. (터미널에서 아래 명령어 사용)

source ~/.zshrc

flutter --version 을 설정 했을때  버전이 정상적으로 나타나면 성공입니다.

 

And refresh the config file. (Use below command in terminal)

source ~/.zshrc

If the version appears normally when you set flutter --version , it is successful.

 

4. Flutter Doctor  실행

위 2번까지 진행된 상태에서 Flutter Doctor 를 실행하면 다음과 같이 나타납니다.

 

4. Using flutter Doctor

If you run Flutter Doctor in the state of step 2 above, you will see the following.

 

 

붉은색 X 로 표시 되어 있는 부분들을 하나씩 해결해 보겠습니다. 

 

Let's solve the parts marked with a red X one by one.

 

1. 안드로이드  Toolchain 이슈의 경우 

 - 안드로이드의 SDK 사용동의가 제대로 되지 않는 경우 입니다. 

     flutter doctor --android-licenses 를 터미널에서 실행 해 줍니다.

일반적인 경우 위 커맨드로 해결이 됩니다만 java.lang.NoClassDefFoundError  오류가 나타날때가 있습니다. 이 오류는 Android SDK Command Line Tool  이 설치 되지 않은 경우 입니다.

안드로이드 스튜디오를 실행 하고 Preference -> SystemSetting ->  Androiㄴd SDK -> 오른쪽 화면에  SDK Tools -> 하단 Android SDK Command-line Tools 선택  후 다음 진행

 

1. In case of Android Toolchain issue
  - This is when the Android SDK usage agreement is not properly agreed.
      Run flutter doctor --android-licenses in the terminal.
In general, the above command can solve it, but there are times when a java.lang.NoClassDefFoundError error appears. This error is when the Android SDK Command Line Tool is not installed.
Run Android Studio, Preference -> SystemSetting -> Android SDK -> SDK Tools on the right screen -> Select Android SDK Command-line Tools at the bottom and proceed to the next step

약 10 MB 정도 설치 후

Finish 를 누르시면 됩니다. 

이 이후에 터미널로 돌아가셔서

  flutter doctor --android-licenses 를 실행 합니다.

  라이센스 사용에 대한 동의를 뭍는 질문이 3개 정도 나오는데 y 를 선택 후 진행 하시면 됩니다.

 

Just click Finish.
After this, go back to the terminal
   Run flutter doctor --android-licenses .
   There are about 3 questions asking you to agree to the use of the license, select y and proceed.

 

2. 이제 두번째 Xcode -cocoapod 이슈를 설치 합니다.

저는 Xcode를 설치 해 놓고 있었고 기존에도 코코아 팟을 사용했는데도 해당 이슈를 체크 하라는 진단 이어서 

sudo gem install cocoapods

커맨드를 실행 하면 저는 기존에 이미 cocoapod 가 설치 되었다고 합니다. 

따라서  구글링을 진행 하고 저는 brew  로 다시 실행했습니다.

brew install cocoapods --build-from-source

 

위 커맨드로 해당 부분이 수정되었습니다.

 

2. Now install the second Xcode -cocoapod issue.
I had Xcode installed, and even though I used a cocoa pod before, the diagnosis was to check the issue.
sudo gem install cocoapods
When I run the command, it says that cocoapod has already been installed.
So I googled and I ran it again with brew .
brew install cocoapods --build-from-source
This part has been corrected with the above command.

 

 

Unable to find bundled Java version. 문제를 수정해 보겠습니다.

자바 버전이 맞지 않는 다고 나오는데 이 부분은 아래 커맨드를 터미널에서 실행 하시면 됩니다.

cd /Applications/Android\ Studio.app/Contents/jre

ln -s ../jre jdk

ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk

 

 

✗ Unable to find bundled Java version. Let's fix the problem.
It says that the Java version does not match. You can run the following command in the terminal for this part.
cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk

 

이렇게 플러터 닥터를 실행 한 결과가 나타납니다.

이제 부터는 플러터 개발을 시작 할수 있습니다.

 

다음시간에는 에디터 설정 하는 법을 설명 하도록 하겠습니다.

 

Here is the result of running flutter doctor like this:
From now on, you can start developing flutter.
Next time, I will explain how to set up the editor.

728x90
그리드형(광고전용)

'개발자로그 > Flutter' 카테고리의 다른 글

Flutter Widget 사용법2 (Route)  (0) 2021.11.30
Flutter Widgets 사용법 (Button) 사용법  (0) 2021.11.23
Flutter 개발 관련 IDE 소개  (0) 2021.11.22
Stateless Widget VS Stateful Widget  (0) 2021.11.15
Create Project for Flutter  (0) 2021.11.09

댓글