[Flutter] 플러터 웹 이슈 기록

---

저의 웹은 정적 페이지이고 깃헙 호스팅을 이용하고 있습니다.

---

 

[1] 종종 사파리에서 흐리게 나올 때가 있음 (크롬에서는 안그런 듯)

 

왼쪽 사파리 / 오른쪽 크롬

 

[2] 종종 텍스트 스타일이 설정 해준 것과 다르게 나오는 경우가 있음

이것은 html 렌더러를 사용했을 때 주로 발생했던 것 같습니다.
(html 렌더러 몇번, canvaskit 렌더러 몇번 이렇게 정량적으로 테스트를 안했어서 정확하지는 않아요!)

왼쪽 사파리 / 오른쪽 크롬

 

[3] 웹 > PDF 내보내기 짤림

이슈 리포팅 함.
html, canvaskit 렌더러 둘다 그렇다고 테스트 해주심.

https://github.com/flutter/flutter/issues/91671#issuecomment-942055373

[Proposal] Support Print Web app To PDF from the browser · Issue #91671 · flutter/flutter

 

[4] 모바일 웹앱

크롬에서 모바일 사이즈로 돌려봤을 때 잘되어서 별 문제 없겠거니 생각하고 개발했는데,

 

배포 후 모바일 크롬 앱으로 접속해보니까 우선 로딩이 너무 느리다!
그리고 iOS 15에서 화면이 blank 로 나온다,,,

# 테스트 해본 모바일 기기

- iOS 15 아이폰, 아이패드: 안나옴 (사파리, 크롬 둘다)
- iOS 14 아이패드: 잘나옴 (사파리, 크롬 둘다)

 

iOS 14 아이패드 크롬 앱

하지만 다른 플러터 웹앱 (ex. https://flutterlistview.netlify.app/#/ ) 은 로딩이 느리지만 iOS 15에서 기다리면 잘나온다!!!
그래서 일단 이슈리포팅 안함,,

[궁금] 렌더러 모드

html, canvaskit 두가지 렌더러를 선택할 수 있는데, canvaskit이 모바일 웹에서 더 로딩이 빠르고 잘 나오는 것 같다.  (iOS 14 아이패드에서)

 flutter build web --web-renderer html

flutter build web --web-renderer canvaskit

Flutter web support hits the stable milestone 글 보면

- HTML renderer : 사이즈와 광범위한 호환성에 최적화 되어있음
- CanvasKit renderer: WebAssembly 및 WebGL 을 사용하여 Skia 페인트 명령 (Skia paint commands) 을 브라우저 캔버스에 렌더링함.

이라고 되어있는데, 나의 웹 정도 같은 경우는 html 쓰는게 맞는 것 같은데 왜 canvaskit 이 더 빠르게 잘되는 지 모르겠다ㅠㅠㅠ

https://flutterlistview.netlify.app/#/ 요런 팔레트 많은 사이트에서만 canvaskit 쓰면 될 것 같은데 ㅠㅠ