[Flutter Web] Canvaskit render에 따른 issue

Flutter로 Web을 개발하고 처음 구동하시게 되면,

기본값으로 canvaskit으로 render를 하게 됩니다. 이전 게시글에서

https://islet4you.tistory.com/entry/Flutter-Web-web-rendering-%EB%B0%A9%EC%8B%9D%EC%9D%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

[Flutter Web] web rendering 방식의 이해하기

 

web render에 html, canvaskit에 있다는 것을 알아봤는데요.

이때 ISSUE가 하나 발생합니다. 바로 브라우저 창을 늘렸을때, 텍스트가 blur(흐려짐)가 된다는것입니다.

BEFORE

AFTER

 

이때, 해결방법이 여러가지 있는 것으로 보이나 본문에서는 두가지에 대해 말씀드리겠습니다.

첫째, build혹은 run에 --web-renderer html 인자를 주어, html로 render하게 하는 방법

둘째, index.html에 css를 주입시키는 방법

ex)

<script>
    const wait_until = setInterval(() => {
      var elt = document.querySelector('flt-glass-pane');
      if (elt) {
        clearInterval(wait_until);
        var sheet = new CSSStyleSheet;
        sheet.replaceSync('flt-scene-host * p, flt-scene-host * canvas { image-rendering: pixelated; }');
        elt.shadowRoot.adoptedStyleSheets = [sheet];
      }
    }, 500);
</script>

 

이 두가지의 방법으로 해당 issue를 일시적으로나마 해결이 가능합니다.

google측에서 해당 issue를 정석으로 해결할 방법을 하루 빨리 제시 해주었으면 좋겠군요.