Flutter Web changes text issue

Question

When I work with flutter web and use the html renderer, some of the texts changes into a weird format (shown in the screenshot).

How can I fix it? is there any way without using the canvas renderer?

Answer 1

When running and building apps for the web, you can choose between two different renderers. This page describes both renderers and how to choose the best one for your needs. The two renderers are:

HTML renderer

This renderer, which has a smaller download size than the CanvasKit renderer, uses a combination of HTML elements, CSS, Canvas elements, and SVG elements.

CanvasKit renderer

This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 1.5MB in download size. CanvasKit uses WebGL to render Skia paint commands.

This flag can be used with the run or build subcommands. For example:

• Run using html renderer:

flutter run -d chrome --web-renderer html

• Run using canvaskit renderer:

flutter run -d chrome --web-renderer canvaskit

• Build using html renderer:

flutter build web --web-renderer html

• Build using canvaskit renderer:

flutter build web --web-renderer canvaskit

To override the web renderer at runtime: https://docs.flutter.dev/platform-integration/web/renderers#runtime-configuration

Reference link: https://docs.flutter.dev/platform-integration/web/renderers