Flutter(플러터) 란? – 개발환경 설정하기

지난 시간에 Flutter(플러터) 란? 제목으로 플러터의 개념과 특징, 장점, 간략한 설치 방법 등을 가볍게 알아 보았습니다.

후반부에서는 플러터 개발 환경 구축을 위한 설치 플로우 정도만 다루었는데요~^^ 이번에는 상세하게 한 스텝씩 진행해 보려 합니다.

자~ 차근차근 따라와 보실까요~^_^ (윈도우 환경 기준으로 진행하겠습니다.)

Flutter SDK 다운로드

Flutter 공식 웹사이트 Windows install 부분의 Get the Flutter SDK 에서 flutter_windows_3.10.5-stable.zip (버전에 따라 파일명 변경)을 클릭하여 다운로드 합니다.

위 버전이 아닌 이전 빌드를 원하는 경우 SDK 자료실을 확인하시면 됩니다.

다운로드 받은 압축 파일(.zip)을 압축 해제하여 Flutter SDK를 원하는 설치 위치(예 : C:\study\src\flutter)에 배치합니다.

 

 

Windows 환경변수 설정

환경변수를 설정하는 이유는 원하는 설치 위치(예 : C:\src\flutter)에 있는 flutter 명령어를 컴퓨터의 어느 경로에서나 실행할 수 있게 하기 위함입니다.

압축 해제한 Flutter SDK의 경로(C:\study\src\flutter)를 컴퓨터의 환경 변수에 추가하는 방법은 아래와 같습니다.

 

1. ‘제어판 > 시스템 및 보안 > 시스템 > 고급 시스템 설정’으로 이동합니다.
2. ‘환경 변수’ 버튼을 클릭합니다.
3. ‘시스템 변수’ 섹션에서 ‘Path’ 변수를 찾아 클릭하고 ‘편집’ 버튼을 누릅니다.
4. ‘새로 만들기’ 버튼을 누르고 압축 해제한 Flutter SDK의 ‘bin’ 디렉토리 경로를 입력합니다.

 

설치 확인(환경 변수 설정 제대로 되었는지~)

1. 윈도우 버튼을 누른 후 cmd를 검색해서 명령 프롬프트를 실행해줍니다.
2. 명령 프롬프트에서

   flutter --version

   이라고 입력 후 실행했을 때, 아래와 같은 문구가 뜨면 설치가 완료!

 

IDE(통합 개발 환경) 설치 및 Flutter  플러그인 설정

개발 환경으로 Android Studio, IntelliJ IDEA, VS Code(Visual Studio Code) 등 다양한 IDE 중 선택하여 설치하고, IDE 내에서 Flutter와 Dart 플러그인을 설치합니다.

먼저 Android Studio 설치를 진행해 보겠습니다.

Android Studio

  1. Android Studio 설치

• 링크에 접속한 뒤, Download Android Studio를 클릭해주세요.

 

• 팝업 창이 뜨면 쭉 읽어보시고, 바닥까지 스크롤을 내려주세요.

 

• 약관에 동의하도록 체크하신 후, 다운로드 버튼을 클릭해 주세요.

 

• 다운로드가 완료되면, android-studio-2022.2.1.20-windows.exe(버전에 따라 파일명은 변경됩니다.) 를 클릭해서 실행해주세요. Android Studio Seup이 실행되면 화면 하단에 Next 또는 Install 버튼을 Finish 버튼이 나타날 때 까지 계속해서 클릭하여 설치과정을 진행해 주세요.
• Finish 버튼 클릭 후 아래와 같은 창이 뜨면 순차적으로 OK 버튼과 Don’t send(Android Studio 사용성 개선을 위해 Google에 데이터를 공유하고 싶지 않을 경우) 버튼을 눌러주세요.

 

• Setup Wizard가 실행되면, 아래 그림과 같이 Finish 버튼이 나타날 때까지 Next 버튼을 눌러서 순차적으로 진행해주세요.
• 만약 계정 이름이 한글이거나 띄어쓰기가 들어가 있다면 “Your Android SDK location contains non-ASCII characters” 혹은 “your path contains white space etc.” 라고 뜨며 진행이 안됩니다. 이럴 경우 Android SDK Location 경로를 직접 만들어주어야 합니다.
• 다음 링크를 참조하여 진행해 보세요.

 

• 중간에 앱이 디바이스를 변경할 수 있도록 허락하는 팝업이 뜨면 예를 선택해주세요.
• 모든 세팅이 완료되면 Finish를 클릭해 주세요.

  2. Android Command-line Tools 설치

• Android Command-line Tools는 Flutter에서 Android에 명령을 내리기 위해 필요합니다.
• 아래와 같이 Android Studio가 실행되면, More Actions를 클릭한 뒤 SDK Manager를 클릭해주세요.

• SDK Tools를 선택해 주세요.

• Android SDK Command-line Tools (latest)를 선택한 뒤 OK를 선택해 주세요.

• Dialog가 뜨면 OK 버튼을 눌러주세요.

• Accept를 선택한 뒤 Next를 선택해 주세요.

• 설치가 완료되면 Finish 버튼을 눌러주세요.

 

  3. Android Virtual Devices 설치

• 앱을 개발시 실제 휴대폰을 연결하여 개발을 진행할 때도 있지만, 대부분의 경우 Virtual Device(컴퓨터에 가상의 휴대폰을 띄우는 소프트웨어)를 이용하여 개발합니다.
• More Actions → AVD Manager (또는 Virtual Device Manager)를 선택해주세요.

 

• Create Virtual Device를 선택해주세요.

• 기본적으로 선택되어 있는, Phone → Pixel 2 디바이스를 Next 버튼을 눌러 생성합니다.

• Release Name Q의 Download를 클릭하여 가상 기기에 설치할 OS를 다운로드 합니다.
  • R 버전은 Virtual Device에서 문제가 있다고 해요. 그래서 Q 버전으로 진행할게요!

• 설치가 완료되면 Finish 버튼을 눌러 주세요.

• Q 버전의 OS를 선택한 뒤 Next 버튼을 눌러 주세요. API Level 29인지 확인해주세요~

• Finish 버튼을 눌러 Virtual Device 설치를 완료 해주세요.

• 성공적으로 추가된 Virtual Device를 확인하시고, 이제 Android Studio는 종료해주세요!

 

  4. Android Licenses

• cmd를 검색해서 명령 프롬프트를 실행해줍니다.

• flutter doctor라고 입력한 뒤 엔터를 누릅니다. 아래와 같이 Android toolchain의 좌측에 [!] 표시가 되어있습니다.

• 문제를 해결하기 위해 flutter doctor --android-licenses를 복사해서 실행해 줍니다.
• 실행하면 라이센스에 대한 동의를 여러번 구하는데, y를 입력하고 엔터를 눌러 진행해줍니다.

• flutter doctor 를 입력했을 때 아래와 같이 Android toolchain의 좌측에 체크([v]) 되었다면 완료!

• 위 그림과 같이 No issues found! 라는 문구가 출력되면 최종 설치가 모두 완료된 상태입니다.
• 만약 여러 항목 중에 [!] 와 같이 표시된 항목이 있다면 그 항목에 대한 문제를 해결하면 되겠습니다.

 

Android Studio 설치를 마무리 하며

지금까지 플러터 개발 환경 설정에 대한 상세한 과정을 정리해 보았습니다. 어떠신가요~ 설치 과정이 생각보다 많은 과정을 거쳐야 하지요~ 지금까지 잘 따라오면서 차근차근 진행하시면서 설치까지 완료가 잘 되었나요~?

개발 환경을 설정하는데 생각보다 많은 시간이 소요가 됩니다. 혹시 설치 과정을 잘 따라오시면서 블로그의 예시 이미지와 본인의 설치 과정의 이미지가 동일하지 않을 수 있습니다. 당황하지 마시고 화면의 내용을 잘 확인해 보시고, 구글 검색을 활용해 보시면 해결하실 수 있는 사항일 것입니다. 제가 참고했던 블로그 링크도 아래에 함께 남겨 놓겠습니다.

참고링크

• Flutter 공식 홈페이지
• 안드로이드 스튜디오 설치하기