(Flutter-기초 강의) 2. Flutter 개발환경 설정

Flutter 개발환경 구축

개발을 시작하기 위해서는 Flutter 개발환경 구축은 필수적입니다. 이번 글에서는 Windows 환경에서 Flutter 개발환경을 설정하는 방법에 대해 자세히 알아보겠습니다.

1. Git & Github Desktop 설치

Flutter 개발을 위해서는 코드 버전 관리를 위한 Git과 Github Desktop 설치가 필요합니다. Github Desktop 설치 문서를 참고하여 설치해주세요. 이를 통해 협업 및 코드 관리가 용이해집니다.

본 강의에서는 다음 Repository를 이용해서 강의를 진행할 예정입니다.

github: https://github.com/jh4843/devitworld-flutter-basic

위 github 사이트에서 다음과 같은 순서로 Github Desktop에 repository를 열 수 있다.

2. Flutter SDK 설치

Flutter SDK란?

Flutter SDK는 Flutter 애플리케이션을 개발하기 위한 필수 도구 모음으로, 통합 개발 환경(IDE) 설정과 환경 변수 구성이 포함됩니다

설치

가장 기본적인 단계로, Flutter SDK 설치 문서를 따라 Flutter를 설치해야 합니다. 여기서 Windows, macOS, Linux 및 ChromeOS 운영 체제에 맞는 다운로드가 가능합니다.

우리는 Windows 환경에 맞는 설치를 진행합니다.

  1. stable 버전을 다운로드 합니다. (본 글을 작성할 때의 최신 Stable 버전은 3.16.0 입니다.)
  2. 다운 받은 압축파일을 flutter 이름이 포함된 경로에 압축을 해제 합니다.
    ex) d:\dev\flutter, d:\src\flutter -> 이번 예제에서는 c:\src\flutter 경로를 사용했습니다.
    • 경로는 특수문자를 포함하지 않습니다.
    • C:\Program Files\ 경로를 사용하지 않습니다.
  3. 환경 변수를 설정합니다.
    1. 시작-검색창에서 시스템 환경 변수 편집을 선택합니다.
    2. 고급-환경 변수의 사용자 환경변수의 Path에 앞서 압축해제한 경로에 \bin 경로를 포함한 값을 추가합니다.본 예제에서는 C:\src\flutter에 설치했으므로 C:\src\flutter\bin을 추가합니다.

    3. 컴퓨터를 재시작합니다.
    4. cmd에서 $ where flutter dart 를 실행하여 flutter 명령어가 잘 적용되는지 확인합니다.

3. Visual Studio Code 설치 및 Extension 추가

Flutter 개발에 최적화된 편집기로 Visual Studio Code를 사용할 수 있습니다. 설치 후 flutter 플러그인을 추가하면 개발 과정에서 보다 편리하게 작업할 수 있습니다.

4. Visual Studio 를 설치한다.

C++ 컴파일러를 포함해서 Visual Studio 를 설치한다.

Flutter와 Dart를 위한 다음 Extension들을 설치해줍니다.

vs flutter extension
vs dart extension

5. Android Studio 설치 및 가상 디바이스 생성

Android Studio를 설치하고, 개발에 필요한 가상 디바이스를 생성해야 합니다. 이를 통해 안드로이드 App을 개발하고 테스트할 수 있습니다.

Android Studio 및 Android SDK 설치 순서

  1. Android Studio를 다운받아 설치합니다.
  2. Android Studio를 시작합니다.
  3. Android Studio 의 SDK Manager 를 실행합니다.
  4. Android SDK Command-line Tools를 선택하고 Apply 버튼을 눌러 설치합니다.
  5. cmd에서 $ flutter doctor 를 실행하여 Android Studio 설치상태를 확인하고 flutter가 android studio 경로를 못찾으면 $ flutter config --adnroid-studio-dir=android studio installed path 를 설정해줍니다.
    (android studio installed path는 본인이 설치한 경로를 넣어주고 기본적으로 C:\Program Files\Android\Android Studio에 설치됩니다.)

가상 디바이스 생성

  1. Android Studio에서 Virtual Device Manager를 실행합니다.
  2. Create device 버튼을 누르고 설치하고자 하는 device를 선택합니다.
    (이번 예제는 PIXEL 3 을 설치해보겠습니다.)
  3. Next -> Next -> Finish를 눌러 설치를 진행합니다.

6. Android 라이선스 동의

Flutter를 사용하기 전에 Android SDK 라이선스 정책에 대해 다음 명령어를 통해 동의해주어야 합니다.

$ flutter doctor --android-licenses

만약 다음과 같은 error 메시지를 만난다면,
Error: LinkageError occurred while loading main class com.android.sdklib.tool.sdkmanager.SdkManagerCli java.lang.UnsupportedClassVersionError: com/android/sdklib/tool/sdkmanager/SdkManagerCli has been compiled by a more recent version of the Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file versions up to 55.0

JAVA 버전이 너무 상위 버전이 설치되서 그런거니 Android SDK (Android SDK Command-line Tools(Latest))를 지우고
Show Package Details를 체크한 후, 8.0 버전을 설치하자.

Android SDK 버전과 JAVA SDK의 호환이 문제가 될 경우 JAVA SDK를 해당 버전에 맞게 설치해줘야 하고, 설치했는데도 문제가 있다면 JAVA_HOME 환경변수를 확인해봐야합니다.

7. 핸드폰 디버깅을 위한 추가 작업

개발 중 핸드폰 디버깅을 위해 USB 디버깅 설정과 USB 통합 드라이버 설치가 필요합니다. 특히 삼성 기기를 사용하는 경우 삼성 USB 드라이버를 다운로드하여 설치해야 합니다.

8. Flutter Doctor 실행

마지막으로, Flutter 개발환경이 제대로 구축되었는지 확인하기 위해 cmd 창에서 flutter doctor 명령어를 실행합니다. 설치 상태를 확인하고 필요한 조치를 취할 수 있습니다.

다음과 같은 결과가 나오면 성공

9. Flutter 개발환경 마무리 및 워밍업

위 과정을 통해 개발환경을 완료했다면, 이제 개발에 필요한 워밍업이 가능해집니다. 무엇보다도 Flutter 개발에 대한 기본적인 환경 설정을 마무리하는 기분이 들 것입니다.

10. FAQs

  1. Q. Flutter SDK를 설치하는 데 필요한 운영 체제는 무엇인가요?
    • A: Flutter는 Windows, macOS, Linux, ChromeOS 등 다양한 운영 체제에서 사용 가능합니다.
  2. Q: 안드로이드 스튜디오를 설치하지 않고 Flutter를 개발할 수 있나요?
    • A: 안드로이드 스튜디오는 선택 사항이며, Flutter는 다른 IDE에서도 개발할 수 있습니다. 하지만 안드로이드 스튜디오는 편리한 시뮬레이터와 디버깅 기능을 제공합니다.
  3. Q: 핸드폰 디버깅을 위한 USB 디버깅 설정은 왜 필요한가요?
    • A: USB 디버깅을 통해 개발 중인 앱을 실제 기기에서 디버깅하고 테스트할 수 있습니다.
  4. Q: Flutter Doctor를 실행했을 때 문제가 발생하면 어떻게 해야 하나요?
    • A: flutter doctor 명령어를 실행하여 문제를 확인하고, Flutter 공식 문서나 관련 포럼에서 해결 방법을 찾을 수 있습니다.
  5. Q: Visual Studio Code에 Flutter 플러그인을 추가하는 방법은 무엇인가요?
    • A: Visual Studio Code의 확장(Extension) 탭에서 “Flutter”를 검색하여 플러그인을 찾고 설치할 수 있습니다.

Leave a Comment