Flutter 독학하다 포기했다면? 이 강의 하나로 끝내세요!
#소프트웨어 

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

Flutter(플러터)는 구글이 출시한 크로스 플랫폼 GUI 애플리케이션 프레임워크입니다. 플러터 개발 환경 설정을 위한 설치 방법에 대해 상세히 다루어 봤습니다. 함께 봐 볼까요?

2023-07-12 | 박성돈

지난 시간에 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)에 배치합니다.

 

flutter windows install

 

Windows 환경변수 설정

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

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

 

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

 

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

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

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

 

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

개발 환경으로 Android StudioIntelliJ IDEAVS 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 ActionsAVD Manager (또는 Virtual Device Manager)를 선택해주세요.

 

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

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

  • Release Name QDownload를 클릭하여 가상 기기에 설치할 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 배우는데 Dart 언어 찍먹해서 되겠어요?

모두의연구소 오름캠프 [Flutter 모바일 앱 과정] 수강생의 인터뷰입니다.다른 프레임워크에 비해 꾸준하게 개발되서 플러터를 선택했는데,가장 근간인 Dart를 제대로 배울 수 있어서 좋았다고 하는데,자세한 내용은 영상에서 만나요!모두의연구소 오름캠프 [Flutter 모바일 앱 과…

 

국내 최초 플러터(Flutter) 도서 저자 오준석 직강 | 오름캠프 Flutter 모바일 앱 과정

No Description

이전 글 : Flutter(플러터) 란?