1

I am going to write flutter web in vs code. Before creating a flutter app, I already feed following commands.

flutter channel beta

flutter upgrade

flutter config --enable-web

After that I create a flutter web app via

vsCode > Shift+Command+P > Flutter:New Application Project

I added some Japanese and Arab text in generated sample code after creating a new flutter web app. Japanese Text are not shown when I running with Shift+F5 or F5.

enter image description here

Japanese and Arab Text are displayed if I run from terminal with following command.

flutter run -d chrome

But this doesn't work hot reload if I don't press 'r' or 'R' in terminal again.

Is there anyone who is facing that problem and have solution for this?

hmmh
  • 57
  • 2
  • 10

1 Answers1

2

When launching Flutter project by pressing F5, dartdevc compiler is used, but command flutter run -d chrome uses dart2js compiler.

dartdevc renders text on canvas HTML-element (with CanvasKit) and uses system fonts.

dart2js renders text as paragraph HTML-element, and therefore uses fonts from browser.

As a workaround, you can use a custom font, for example Noto Sans JP.

There is related issue.

Spatz
  • 18,640
  • 7
  • 62
  • 66