Flutter Web Application 만들기 1

안녕하세요. 블루라군입니다. 

 

오늘은 Flutter로 WebApplication을 배포하는 것으로 글을 작성합니다.

 

 

[환경]

IDE : Android Studio 2022.2.1

Flutter version: 3.19.4-stable

 

 

환경이 달라서, 나오는 오류상황에 대해서는 글에서 언급하지 않겠습니다.

 

1. 신규 Flutter 프로젝트 생성 

 

그림 1 신규 플러터 프로젝트 생성

 

 

 

2. Flutter 환경 설정 

 

다음 zip 파일을 Flutter 공식 페이지에서 다운 받아서 설정함.

그림 2 Flutter 공식 가이드

 

그림 3 Flutter 프로젝트 환경 설정

 

 

 

 

3.  지원할 Platform들을 선택합니다. 

주의사항 : Intellij 계열의 Project name을 지정할 때는 영어 소문자와 _(언더스코어) 구성을 하는게 좋습니다. 

 

그림 4 Flutter Platform 설정

 

 

4. 생성된 기본 프로젝트에서 Web을 실행 시킵니다. 이에대한 2가지 방법으로는 다음과 같습니다. 

 

4-1 Android Studio에서 기본적으로 지원되는 버튼을 이용하는 방법입니다.

 

먼저 실행할 웹브라우저 (Edge or Chrome)을 설정한다음 재생 모양 버튼을 클릭합니다. 

 

그림 5 Flutter 웹 실행

 

 

 

4-2 Console 화면에서 Flutter 실행하기.

 

flutter run -d chorme

 

 

Chromium 기반의 Edge나 Chrome 등 설치된 브라우저를 실행합니다. 

예시 

 

 

그림 6 Console에서 실행하기.

 

 

 

 

5. Flutter Web 실행 화면 

 

 

그림 7 Flutter Web Application 실행 화면

 

[도움]

 

1. 응원 댓글은 글 쓰는데 힘이 됩니다.

2. 공감도 글 쓰는데 힘이 됩니다. 

3. 광고 한번 클릭 해주시면 힘은 두배가 됩니다. 

4. 혹시라도 부족한 부분이 있다면 덧글로 남겨주세요. 남기시면, 더 나은 글을 쓸 재료가 됩니다.

 

[reference]

 

Flutter 공식가이드

https://docs.flutter.dev/get-started/install/windows/desktop

Start building Flutter native desktop apps on Windows

 

Flutter Web 빌드하는 방법 공식 가이드

 

https://docs.flutter.dev/platform-integration/web/building