Flutter

[Flutter] 플러터 설치 방법

ᚁ ᚂ ᚃ ᚄ ᚅ 2025. 1. 16. 12:23
반응형

플러터(Flutter) 설치 방법 정리 입니다.

(강의 보고 설치 방법 정리)

 

[Flutter] 플러터 설치 방법

 

 

반응형

 

1. 플러터(Flutter) 설치

Flutter 다운로드 : https://flutter-ko.dev/get-started/install/windows

자신의 OS에 맞는 Flutter를 다운로드후 적당한 폴더에 놓기

예시 : C:\ Flutter 폴더에 넣기

Flutter 다운로드
Flutter 설치폴더

 

2. 환경변수 설정

시스템 환경 변수 편집 -> 환경 변수 -> 사용자 변수 -> Path -> 편집 -> C:\flutter\bin -> 확인 버튼 클릭

 

환경변수

 

환경변수에 Flutter 등록

 

 

3. Android Studio 설치

Android Studio 다운로드 : https://developer.android.com/studio?hl=ko

자신의 OS에 맞는 Android Studio 다운로드 및 설치

설치는 기본으로 하면 됩니다.

 

Android Studio 다운로드

 

안드로이드 스튜디오 실행

 

Plugins -> Flutter 설치

Android Studio 실행 -> Flutter 플러그인 설치

 

Projects -> SDK Manager

Android Studio -> SDK Manager 실행

 

Languages & Frameworks -> Android SDK ->  SDK Tools -> Android SDK Command-line Tools (latest) 체크 -> OK 버튼 클릭

Android Studio -> Android SDK Command-line Tools (latest) 설치

 

 

4. Flutter 체크

3번까지 다 했다면 윈도우라면 컴퓨터를 재부팅 해주는게 좋습니다. 환경변수 등등 해서..

 

Flutter 사용가능 체크

커맨드 창에서 flutter doctor 입력

체크 표시 없는 문제는 문구 복사후 다시 입력하면 해결됨 (라이센스 문제는 넣고 y 를 계속 눌러주면됨)

Flutter 사용가능 체크

 

 

5. Flutter  앱 만들기 시작

안드로이드 스튜디오 실행 -> Project  -> New Flutter Project 버튼 클릭

Android Studio -> Flutter 프로젝트 시작

 

Flutter -> Flutter SDK path : 플러터 설치 폴더(C:\flutter) -> Next 클릭

Android Studio -> Flutter SDK Path 설정

 

프로젝트 셋팅 -> Create 버튼 클릭

프로젝트명에 소문자, _, 숫자만 으로 만들기 (대문자, 공백 허용 안함)

Android Studio -> Flutter 프로젝트 생성

 

상단 -> Chrome (web) -> 실행 클릭 해서 크롬창에 기본 화면이 나오는지 확인

크롬에 띄워진 화면은 실제 앱이다. (html로 생각하지 말자) 테스트만 크롬에서 하는것

Android Studio -> Flutter 프로젝트 화면
Android Studio -> Flutter 테스트 화면

 

 

 

6. 끝

이제 개발 시작

이렇게 프로젝트 만들고 VSCode에서 Flutter 확장앱 설치후 VSCode에서 작업 해도 된다.

 


 

혹시 한글부분 오타났다고 밑줄로 이상하게 나온경우 해결방법

var name = "안녕하세요" 이럴경우 한글부분을 오타났다고 밑줄로 이상하게 잡아줄경우
상단 File > Settings > Editor > Inspections > 상단Profile을 Default로 선택 > Proofreading > Typo 부분을 체크해제

반응형