Flutter Web squeezed Text, worspacing not working, on some in app browsers (instagram, facebook)

Question

In Flutter Web apps, words get scrambled, with negative spaces between them, when running from an in-app browser, such as facebook and instagram browsers, from some android devices.

I`ve been living with this issue for over a year, and a good portion of my users complain about this. However, this problem is not easy to reproduce, as it only happens if all conditions below are met:

1. The web app has to be on HTLM renderer
2. Happens on many Android devices, but I can`t precise which ones - usually when the font size of the phone is at least medium
3. The link to the flutter web has to be opened in an in app browser (such as facebook, instagram or even in a webview of a flutter app itself)

I`m sharing below 2 pictures of a Samsung that reproduces this problem.

1. When Flutter Web link is opened inside an in-app browser, it looks like this

2. When opened on a normal browser, it looks like this

I tested adding a high number for "wordspacing" in text widget, and it only adds spaces for normal browsers. For in-app browsers, wordspacing doesn`t seem to work at all.

Anyone has a solution for this?

Answer 1

 return MediaQuery(
        data: MediaQuery.of(context).copyWith(
          textScaler: const TextScaler.linear(
              1), //so that the font size doesnot change depending on device font size
        ),
        child: MaterialApp(home: homePage());

textScaler must be TextScaler.linear(1) so that the device font size doesn't change the project font (only works for web browsers)

but when it comes to Facebook and Instagram embedded browsers you cant have it as 1 because Facebook and Instagram force the font size, so to fix this you have to get the user device font size by textScaleFactorNow=double.parse("${MediaQuery.of(context).textScaleFactor}"); then setting textScaler to TextScaler.linear(1/textScaleFactorNow) ... so to do both you must check if you r on an embedded browser or not

  double textScaleFactorNow = 1; // 1 if normal browser

    if (kIsWeb &&
        (html.window.navigator.userAgent.contains("FBAV") ||
            html.window.navigator.userAgent.contains("Instagram")) &&
        (defaultTargetPlatform == TargetPlatform.iOS ||
            defaultTargetPlatform == TargetPlatform.android)) {
     
        textScaleFactorNow=double.parse("${MediaQuery.of(context).textScaleFactor}"); // 1/textScaleFactor if external browser
     
    }

return MediaQuery(
            data: MediaQuery.of(context).copyWith(
              textScaler: const TextScaler.linear(
                  1/textScaleFactorNow), //so that the font size doesnot change depending on device font size
            ),
            child: MaterialApp(home: homePage());

and with this you fix the font size problem ... but sadly Facebook and Instagram embedded browsers change the spacing of text too ... so to fix that too ... you must change the spaces between words from " " to "　" (Ideographic Space) or " " (Em Quad) ... don't worry these are invisible characters that have different sizes for your needs.