Search code examples
visual-studio-codeflutter-webflutter-hotreload

Flutter web app Japanese Character(Non English Character) doesn't work

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?

Solution

  • 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.