Flutter Web 환경 구성하기

 

 

Flutter 공부를 한 것들을 지금부터 차근차근 정리해보려고 합니다. 이번 포스팅에서는 Flutter로 Web 서비스를 개발하기 위한 환경 세팅법에 대해 포스팅하도록 하겠습니다.

 

1. Flutter가 뭐길래?

 

Flutter(플러터)가 뭐길래?

Flutter(플러터)가 뭐길래?

 

2. Flutter Web 환경 구성 이유

 

Flutter의 최대 장점은 Web, Android, ios 3가지 환경을 동시에 개발할 수 있다는 점입니다.

 

그와 동시에 Android, ios 관련 포스팅은 조금씩 보이지만 아직 Web에 대한 포스팅이 부족해 보여 정리하기 위해서입니다.

 

 

3. 구성하자

 

저는 Winodws 10 환경이기 때문에 이것에 맞춰서 설명하도록 하겠습니다.

또한 제 IDE 환경은 Visual Studio Code(VScode) 입니다.

 

1. Flutter Web Application을 구성하기 위한 필요조건

  1) Chrome

  2) Flutter SDK

Flutter SDK 다운로드 페이지

Install

Windows를 클릭하여 zip 파일을 다운로드 합니다. 압축을 풀어줍니다.

압축 폴더 내 flutter라는 폴더를 C드라이브에 폴더를 하나 생성하여 옮겨줍니다.

공식 문서에서 src 폴더를 만들었길래 저도 동일하게 했습니다. ProgramFiles 와 같은 폴더에는 넣지 말라는 주의사항도 적혀있습니다.

 

환경 변수에서 flutter\bin 위치를 새로 등록하여줍니다. 등록을 해야만 command 명령어를 사용하실 수 있습니다.

 

2. 설치

 

flutter channel beta
flutter upgrade
flutter config --enable-web

cmd 창에서 해당 명령어를 순서대로 입력하여 줍니다.

Flutter SDK에서 최신 beta channel과 web을 지원하게 해주는 명령어 입니다.

 

 

flutter devices

해당 명령어는 앞으로 만들 앱이 Chrome 환경에서 실행될 수 있도록 하고 Web Server를 제공 할 수 있도록 해줍니다.

 

3. 생성과 실행

 

flutter create myapp

'myapp' 이라는 앱을 하나 만듭니다. 원하시는 이름으로 변경하시면 됩니다.

flutter run -d chrome

해당 앱을 Chrome으로 실행합니다. -d는 옵션입니다.

 

 

4. 마무리

 

Flutter로 Web 환경을 구성하는 방법을 알아보았습니다. 다음 포스팅에서는 Flutter의 구조에 대해서 설명하도록 하겠습니다. 그럼~~