본문 바로가기
별밤 일지/개발

[Flutter] macOS에서 vscode로 flutter 개발환경 구축하기

by 별밤 에디터 2024. 6. 10.

기존에 안드로이드 스튜디오를 쓰다가 vscode 툴로 바꾸면서, flutter 개발환경 구축부터 flutter 프로젝트 실행하기까지의 기록들을 작성해보려고 합니다.

 

vscode 다운로드

 

먼저, visualstudio 공식 홈페이지에서 다운로드를 합니다.

https://code.visualstudio.com/download

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

 

github 프로젝트 클론하기

 

설치를 완료했다면, 기존에 있는 github에서 flutter 프로젝트를 클론할 것입니다.

 

왼쪽 메뉴에서 git을 클릭한 다음, github에서 clone한 url을 복붙합니다.

 

어느 디렉토리에 붙여 넣을지 선택한 후에 레포지토리를 다운로드하면 됩니다.

 

[Error] Could not find a Flutter SDK : Locate SDK

 

저는 이미 flutter sdk를 다운로드하였기 때문에, Could not find a Flutter SDK 팝업이 떴을 때, Locate SDK 버튼을 누르고, flutter sdk가 있는 디렉토리를 선택해 줬습니다.

 

extension 다운로드

 

일단, 이 flutter extension만 다운로드하면 실행할 수 있습니다.

 

[Error] Target of URI doesn’t exist:

 

아래의 사진처럼 package를 찾을 수 없다고 한다면,

 

우측 하단에 뜨는 Run ‘pub get’ 버튼을 누르거나, 터미널에  flutter pub get --no-example  명령어를 입력해서 자동으로 필요한 패키지를 다운로드할 수 있습니다.

 

이렇게 패키지 확장자를 다운로드하면 에러창이 사라집니다.

 

flutter 프로젝트 실행하기

  • main.dart를 가면 실행버튼 클릭 후, emulator 선택

1. 실행버튼 클릭

 

2. emulator 선택

  • emulator를 선택 후, 터미널에 flutter run

 

모든 과정을 거치면 위와 같이 정상적으로 실행되는 것을 확인할 수 있습니다.

 


별 헤는 밤 이용해 보기🌟

 

별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Google Play 앱

오늘부터 별잘알! 오늘밤 별자리 정보, 날씨·광공해·월령까지 고려한 '관측적합도', 주변 관측지 검색으로 누구나 쉽게 밤하늘을 즐겨보세요.

play.google.com