[Flutter] Flutter 2.0 & Stable Flutter WEB

안녕하세요, 황대성입니다 :)

오랜만에 작성하는 포스팅인 것 같네요!

이번 글에서는 Flutter 2.0과 Stable이 된 Flutter WEB에 관해 정리한 사항을 공유하려합니다!

---

Flutter 2.0에서 Flutter 앱을 브라우저에서 기본적으로 실행할 수 있습니다.

 

Flutter 2.0에서 가장 큰 사항은 웹에 대한 프로덕션 품질 지원입니다.

How? WebAssemby로 빌드 된 새로운 CanvasKit 기반 렌더링 엔진을 추가하여 성능 최적화에 대한 많은 진전을 이루었다.

 

이번 릴리즈에서는 특히 아래의 세 가지 앱 시나리오에 중점을 둡니다.

• PWA
• SPA
• 기존 Flutter 모바일 앱을 웹에서 지원

Flutter Web에서는 dartdevc or dart2js 컴파일러를 통해 JavaScript로 앱을 변환합니다.

 

Flutter 모바일 앱과 웹 앱의 실질적 차이는 기본 엔진입니다.

 

이해를 돕기 위한 자료

Hot Reload를 웹에서도 지원한다. 렌더링 모드를 무엇으로 설정할 것인지 생각해야한다.

• DOM Canvas API를 사용하는 HTML
• Webassembly와 WebGL을 사용하는 CanvasKit

렌더링 모드는 기본적으로 설정된다.

• 모바일 브라우저 HTML
• 데스크톱 브라우저 CanvasKit

이 두 가지의 차이점?

• HTML은 다운로드 용량에 따라 최적화되고, 적은 대역폭을 사용한다.
• CanvasKit은 속도가 빠르다.

무엇을 선택해야하는가?

• 빌드를 하거나 run으로 실행시킬 때 렌더링 모드를 명시하지 않으면 자동으로 지정됩니다.
• 하지만 자신이 원하는 렌더링 모드를 선택하고 싶다면 아래의 코드 예시를 보고 작성하면 된다.
• 아래에 적힌 코드를 참고하세요!

Run in Chrome using the default renderer option (auto):
flutter run -d chrome

Build your app in release mode, using the default (auto) option:

flutter build web --release

Build your app in release mode, using just the CanvasKit renderer:

flutter build web --web-renderer canvaskit --release

Run your app in profile mode using the HTML renderer:

flutter run -d chrome --web-renderer html --profile

---

글을 작성하다보니 Flutter 2.0보다는 Flutter WEB에 초첨이 맞춰져 글이 작성되었네요.. :)

이 외에도 Flutter 2.0에서 Null Safety, Window, Mac, Linux 지원, 임베디드 개발 등 정말 많은점들이 추가되었답니다.

 

Flutter 공식 문서 혹은 Flutter 공식 유튜브에서 더 많은 자료들을 보시는 것을 추천드립니다!

 

오늘도 긴 글 읽어주셔서 감사합니다 :)

 

참고

Flutter 공식 유튜브 - www.youtube.com/watch?v=HAstl_NkXl0

Flutter 공식 문서 - flutter.dev/docs/development/tools/web-renderers