[Flutter] 플러터 Web 개발하는 법

21/11/27 수정된 글입니다.

---

플러터는 모바일 애플리케이션과 웹을 동시에 제작할 수 있게 고안된 프레임워크이다.

그리고 최근 2.0에서 리눅스, 맥, 윈도우와 같은 응용프로그램들도 개발 할 수 있게 업데이트 되었다.

 

웹에서 플러터의 기본 카운터 앱이 뜬다!

 

 

Flutter Gallery

 

플러터로 만들어진 샘플 웹 사이트이다.

나름대로 웹 사이트의 구색을 갖추고 있지만, 웹 사이트 크기를 늘리고 줄여보면 여지없이 성능이 떨어지는게 느껴진다.

필자는 최근 React를 경험하며 간단한 프로덕트들을 개발했고, 결론적으로 플러터 웹은 갈길이 상당히 멀다는걸 느꼈다.

아래는 React와 플러터 웹을 경험하며 느낀점을 간단하게 QA로 정리한 글이다.

[플러터] 플러터 웹에 대한 Q&A 모음

 

인력이 부족하거나 플러터에 올인하는 곳이 아니라면 플러터 웹은 지양하길 권장한다. 정말로.

하지만... Lingory는 플러터 웹으로 관리자 페이지 등을 개발하고 있다. 앞으로 관련된 기술적인 부분들을 포스팅할 예정이다. 

 

플러터는 지속적으로 개발되고 있고, 최근 네이버에서 플러터를 1년간 사용하고 있다는 이야기를 해왔다.

플러터의 부흥을 기대하며 플러터 웹을 한번 체험해보자.

 

RN / React와는 다르게 아예 다른 프레임워크가 아닌 빌드의 형태만 바꾸는 것이므로 특별히 건들게 없다.

 

 

플러터 웹 활성화

위의 구문을 터미널에 입력한다. 최초 1회만 하면 된다.

최근에 플러터를 설치했다면 아마도 자동으로 입력되었을 것이다.

flutter config --enable-web
flutter devices

무언갈 열심히 설치한다.

 

 

프로젝트 설정

프로젝트 생성시 일반적인 방식으로 생성하였다면 프로젝트에 web 폴더가 없을 것이다. web 폴더를 만들어주어야한다.

아래 명령어를 터미널에 입력한다. 마침표를 빼먹지 말 것.

flutter create .

web 폴더가 생성된다.

웹으로 실행

flutter run -d chrome
혹은
F5

터미널에 위와 같이 출력된다.

chrome이 열리며 플러터가 웹으로 열린다.

터미널 명령어로 디버깅을 할 경우 저장시 핫리로드가 아닌 터미널에 r을 입력해야 리로드가 된다.

F5가 편리하지만, 핫리로드가 불안정한 경우가 있어 터미널 명령어도 알아두자.

 

 

F5로 실행시에 주의점

F5로 실행시에는 선택되어있는 에뮬레이터에 따라 웹/모바일로 빌드된다.

VSCODE 기준 오른쪽 아래에 에뮬레이터를 설정하는 곳이 있다.

여기서 chrome, edge 등의 웹을 선택해야한다.

단, 엣지나 웨일 같은 서드파티 브라우저에서는 blank screen으로 출력되거나 문제가 있는 경우가 종종있어 chrome을 권장한다.

 

 

웹 배포

아래의 터미널 명령어로 빌드할 수 있다.

빌드된 웹 파일은 build/web 폴더에 저장된다.

flutter build web

 

github에서 웹 호스팅을 제공해주고 있는데 build/web 폴더를 github에 업로드하면 서버없이 웹을 간단하게 배포해볼 수 있다.

아래의 링크에서 따라하면 된다.

 

[Flutter] 웹을 깃허브로 배포 및 호스팅 하기

 

에러 및 이슈

Unable to launch browser: "Unable to find a Chrome installation on your system. Try installing it, or providing an absolute path to the browser in the "runtimeExecutable" in your launch.json."

 

 

 

 

플러터 웹으로 디버깅시 위와 같은 에러가 나거나, blank 화면에서 넘어가지 않는 경우가 있다.

프로젝트 내의 .vscode/launch.json 파일을 삭제해주면 해결된다.