Flutter 세팅 - window

2022. 2. 21. 15:43Flutter

반응형

목록

  1. Flutter 다운로드
  2. Flutter doctor 확인
  3. 안드로이드 스튜디오 설정
  4. Flutter Project 생성 및 실행 확인

 

Flutter 다운로드

안드로이드 스튜디오가 설치되어 있다는 가정하에 , 

Install | Flutter

 

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

docs.flutter.dev

이동하셔서 파일을 다운받아줍니다.

 

Download Android Studio and SDK tools  |  Android Developers

 

Download Android Studio and SDK tools  |  Android Developers

The official IDE for Android app developers.

developer.android.com

안드로이드 스튜디오 다운로드는 이쪽으로 이동.

 

파일을 다운로드 받은 후 압축을 본인이 원하는 폴더에 풀어줍니다. 

저같은 경우에는 c드라이브 바로 아래에 풀어두었습니다

 

Flutter doctor 확인

 

Flutter Doctor 사용을 위한 환경변수 설정을 해주기 위해 환경변수 설정항목으로 들어갑니다.

 

path에서 편집을 눌러

새로 만들기를 클릭 후 flutter 폴더 경로 \ bin 으로 새로운 환경 변수를 추가 합니다.

 

확인을 누른 후 cmd 창을 켜고

flutter doctor 를 입력하여

이를 통해 추가 설치가 필요한 다른 소프트웨어가 있다면, 확인하여 설치하시면 됩니다.

 

+ 첫 시작시 Android toolchain 항목이 !표시가 뜬다면

flutter doctor --android-licenses

입력 후 Y 를 입력하여 라이선스에 동의하시면 해결 가능합니다.

 

안드로이드 스튜디오 설정

안드로이드 스튜디오 플러그인에서 flutter를 검색하여 설치를 해줍시다.

추가로 dart 플러그인도 설치가 필요하다는 화면이 뜬다면 같이 설치 해주시면 됩니다.

 

Flutter Project 생성 및 실행 확인

 

이제 안드로이드 스튜디오를 끄고 다시 열면, 

New Flutter Project 라는 메뉴가 추가 되었을텐데, 한번 Flutter 프로젝트가 잘 생성되는지 확인 해봅시다.

 

SDK 경로에 본인이 압축해제한 폴더 경로를 입력 후 프로젝트를 생성하면

이런 구조의 파일이 생성이 됩니다.

 

애뮬레이터를 활용하여, 한번 실행해보면,

잘 만들어 진것을 확인 할 수 있습니다.

 

색상만 변경 후 저장을 하면

핫 리로드 기능이 작동하여, 웹 사이트처럼 바로바로 반영되는 것을 확인 할 수 있습니다. 

'Flutter' 카테고리의 다른 글

[Flutter]채팅 화면 구성  (0) 2023.01.31
<Flutter>항목 자동 생성  (0) 2023.01.30
[Flutter]SQLite  (0) 2022.03.07
[Flutter]GetX를 이용한 화면 전환  (0) 2022.02.28