[플러터2.0] 기존 프로젝트에 플러터 웹 지원하기

 

플러터가 2.0으로 업데이트가 되면서 본격적으로 웹을 지원하게 되었습니다.

이 글에서는 기존 플러터 프로젝트에 웹을 지원하도록 하는 방법을 배워볼게요

 

준비 사항은

• 자신이 진행하고 있던 플러터 프로젝트 (물론 새로운 프로젝트를 만들어서 사용해도 됩니다)
• 플러터 2.0 버젼 (만약 이전 버젼이면 여기서 업그레이드하는 법을 알 수 있습니다)

먼저 터미널에서 프로젝트 최상위 프로젝트로 이동합니다

 

명령어 flutter create . 를 쳐줍니다

조금만 기다리면

(안드로이드 스튜디오)

(vscode)

web 폴더가 생성되었음을 볼 수 있습니다!

이제 ide에서 device를 chrome으로 선택해주고 run을 하면 해줍니다

 

(안드로이드 스튜디오)

(vscode)

 

콘솔 창에 다음과 같이 뜰 것입니다.

처음으로 앱을 만들 때는 시간이 조금 걸립니다

 

그리고 크롬이 열리면서 프로젝트가 실행된 것을 볼 수 있습니다.

명령어 몇 개만 쳤더니 모바일 앱으로 만들었던 앱이 웹에서도 실행되는 것을 볼 수 있습니다!

 

 

웹을 지원하게 되면 알아야 할 점 몇 가지가 있습니다.

컴파일러

웹용 compiler와 native용 compiler는 다릅니다.

출처 : flutter engage

웹용 컵파일러는 프레임워크는 dart로 되어있고 그 dart를 js로 바꿔줍니다.

 

웹에 최적화

웹은 모바일에 비해 화면의 사이즈도 다양하고, input도 손가락이 아닌 마우스와 키보드를 사용합니다

그래서 reactive한 layout을 고려해서 UI를 고려해야 하고,

웹에서 더 편하게 이용할 수 있도록 플러그인과 위젯을 수정해야 합니다.

해당 글에서는 너무 길어질 것 같아서 여기에 더 자세히 작성했습니다.

 

렌더링

렌더링 방법에는 두 가지가 있습니다

출처: flutter engage

간단히 비교를 해보면...

HTML

• 성능은 조금 떨어지지만 용량이 작다

CanvasKit

• 성능적으로 더 좋지만 용량이 크다

기본적으로는

• 모바일 : html, 데스크탑 : canvaskit으로 렌더링이 되게 설정되어있습니다.

현재 어떠한 설정으로 렌더링 되는지는 크롬 개발자 도구를 이용하여 알 수 있습니다.

 

배포하기

웹 앱을 만들었으면 배포도 해야겠죠

파이어베이스를 이용하여 무료로 배포하는 법을 여기서 더 자세히 설명했습니다.