말랑말랑제리스타일

플러터 설치 및 환경변수 안건드리고 개발환경 세팅하기 본문

프로그래밍/플러터 앱개발

플러터 설치 및 환경변수 안건드리고 개발환경 세팅하기

제리제리 2023. 4. 4. 08:42

플러터를 설치하려면 환경변수도 세팅해야 되고 개발환경 세팅하는 데에 상당히 많은 시간이 걸리는데요.

파워쉘과 초콜라티를 이용하면 환경변수를 따로 손대지 않고도 플러터 개발환경을 세팅할 수 있습니다.

 

사전에 준비할 내용은 VS Code를 설치해두는 것 외에는 없습니다.

 

플러터 설치하기 1단계 파워쉘 설치하기

반응형

파워쉘이 설치되어있다면 이 단계는 건너뛰어도 됩니다.

먼저 아래 사이트로 들어가서 MSI 패키지로 간단히 파워쉘을 설치해 줍니다.

 

https://learn.microsoft.com/ko-kr/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.3 

 

Windows에 PowerShell 설치 - PowerShell

Windows에서 PowerShell을 설치하는 방법에 대한 정보

learn.microsoft.com

파워쉘 다운로드 화면 이미지
파워쉘 다운로드 화면 이미지

물론 다른 방법도 많지만 개인적으로는 MSI 패키지로 파워쉘을 설치하는 쪽이 가장 편리하더라고요.

윈도우 버전에 따라 64비트 내지 32비트(x86 버전)의 파워쉘을 설치해 줍니다.

 

플러터 환경 세팅 패키지 초콜라티 설치

반응형

파워쉘 설치가 끝났다면 관리자 권한으로 실행하기로 파워쉘을 열어줍니다.

참고로 관리자 권한으로 열지 않고 그냥 열면 설치 실패가 될 수 있으니 관리자 권한으로 파워쉘을 열어줘야 합니다.

그리고 아래 초콜라티 설치 사이트로 들어가 줍니다.

https://chocolatey.org/install

 

Installing Chocolatey

Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments.

chocolatey.org

스크롤을 약간 내려주면 아래와 같이 파워쉘에서 초콜라티를 설치할 수 있는 명령어가 보이는데요.

초콜라티 설치 설명 이미지
초콜라티 설치 설명 이미지

설명과 같이 Now run the following command에 있는 내용을 복사해서 관리자 권한으로 파워쉘에 복사한 내용을 마우스 우클릭으로 붙여 넣어 명령어를 실행해 줍니다.

이렇게 입력하고 나면 뭐가 술술술 나오면서 파워쉘을 이용한 초콜라티 설치가 끝납니다.

설치가 완료되었다면 아래와 같이 choco라는 명령어를 입력해서 설치가 제대로 되었는지 확인해 줍니다.

초콜라티 설치 확인 방법 이미지입니다.
초콜라티 설치 확인 방법

초콜라티를 이용한 플러터 설치

초콜라티 설치가 끝났다면 choco install flutter라는 명령어를 아래와 같이 입력해 줍니다.

초콜라티로 플러터 설치 이미지
초콜라티로 플러터 설치

초콜라티로 플러터 설치 실행을 해주면 중간에 스크립트를 출력할지 물어보는데 Y를 입력해 주도록 합니다.

그러고 나면 뭐가 계속 나오죠? 아마 문제없다면 차례로 알아서 흘러갈 겁니다.

혹시 용량 부족으로 플러터 설치 실패했다는 문구가 나올 경우 "choco install flutter --force"라고 입력해서 다시 설치해 줍니다.

자 이렇게 정상적으로 설치가 끝났다면 flutter doctor라는 명령어를 한번 더 입력해서 플러터 설치가 정상적으로 완료되었는지 한번 더 확인해 줍니다.

flutter doctor 실행화면
flutter doctor 실행화면

보면 몇 가지 문제가 보이죠?

일단 무시하고 VS Code로 프로젝트 생성을 원하는 폴더로 이동해 줍니다.

VS Code에서 터미널을 열고 flutter create "프로젝트명"을 입력해서 플러터 프로젝트가 정상적으로 생성되는지 확인해 줍니다.

다음으로 VS Code에 다트 플러그인을 설치해 줄 겁니다.

VS Code 다트 플러그인 설치
VS Code 다트 플러그인 설치

VS Code의 좌측 Extension 버튼을 클릭하고 Dart를 검색해 주면 맨 위에 다트 플러그인이 나옵니다.

이걸 설치해 줍니다.

설치가 끝났다면 이번에는 Flutter로 검색해서 역시 맨 위에 나오는 플러터 플러그인을 설치해 줍니다.

이렇게 다트와 플러터 플러그인 설치가 끝났다면 VS Code를 껐다가 재실행해줍니다.

VS Code 우측 하단 이미지 캡처
VS Code 우측 하단 이미지

그리고 우측 하단을 보면 이런 문구가 보일 텐데요.

아마 Chrome 대신 Windows라던지 다른 문구가 있을 수 있습니다.

이걸 클릭해 주면 상단에 플랫폼을 선택할 수 있게 되는데요.

Chrome을 선택해 준 뒤 프로젝트 폴더 내에 lib으로 들어가 main.dart를 열어주고,  VS Code 우측 상단에 있는 디버그 버튼을 눌러 컴파일해 줍니다.

플러터 크롬 실행화면
플러터 크롬 실행화면

아마 대부분은 이렇게 잘 컴파일된 화면을 볼 수 있을 텐데요.

"SocketException: Failed to create server socket"으로 시작되는 에러가 나왔다면 cmd 창을 열어줍시다.

ipconfig 명령어를 입력하면 IPv4 주소를 확인할 수 있는데요.

VS Code의 터미널에서 프로젝트 폴더로 이동한 뒤 아래와 같은 명령어를 입력해 줍니다.

flutter run -d chrome --web-port=8080 --web-hostname="확인한 IPv4주소"

이렇게 입력을 해주면 크롬에서 샘플로 만든 플러터 앱이 제대로 작동하는 것을 확인할 수 있을 겁니다.

 

별도로 안드로이드 컴파일을 하기 위해서는 아래의 플러터 홈페이지에서 순서대로 따라 하시면 됩니다.

https://docs.flutter.dev/get-started/install/windows#android-setup

반응형
 

Windows install

How to install on Windows.

docs.flutter.dev

 

Comments