Does not work with Flutter Web --web-renderer = html (default for mobile)

[MyBuzzTechnologies]

Create a simple app with AutoSizeText:

Widget build(BuildContext context) {
return Container(
// color: Colors.red,
// child: const Center(child: Text("Reports")),
child: Center(
child: Container(
width: 60,
decoration: BoxDecoration(border: Border.all()),
child: const AutoSizeText("Sample long text", minFontSize: 5, maxLines: 1),
)));
}

Run with:

flutter -d chrome --web-renderer html

Note: the text does not resize correctly.
If you run with --web-renderer canvasKit (the default for desktop) the text resizes correctly.

Flutter (Channel beta, 1.26.0-17.3.pre, on macOS 11.2.1 20D74 darwin-arm, locale en-GB)
• Flutter version 1.26.0-17.3.pre
• Framework revision 4b50ca7f7f (11 days ago)
• Engine revision 2c527d6c7e
• Dart version 2.12.0 (build 2.12.0-259.8.beta)

auto_size_text: ^2.1.0 (also tried 3.0.0-nullsafety.0 - same problem)

Reproducible on Chrome version 88.0.4324.150 (Official Build) (x86_64 translated)

Also has same problem on iPhone Safari browser (iOS 14.3)

[ghunkins]

I have this exact issue as well.

[Xim-ya]

please stable version.. after the flutter event

[MiroLiebschner]

Same problem.

[doppio]

This is caused by flutter/flutter#65940. auto_size_text checks TextPainter.didExceedMaxLines to determine the right font size, but it's always returning false. The package is given the impression that the text always fits.

[skiunke]

Could this be the reason that debugging in desktop chrome and changing to a smartphone aspect ratio resizes the text, but on a smartphone itself it doesn't?

Is there any workaround for this?

[leonardopivetta]

I'm facing the same issue, on desktop is all fine but when I compile and run on the smartphone it doesn't work

[smok95]

I have this exact issue as well.

[P-B1101]

Same here.

[kipouras]

same here

[JorisObert]

A little hack if you have to deploy your web app (not a fix):

• add this right after your tag in your web/index.html:
  <script> window.flutterWebRenderer = 'canvaskit'; </script>

• build using
  flutter build web --web-renderer auto

It will force the web renderer to 'canvaskit'.

[doppio]

A little hack if you have to deploy your web app (not a fix):

• add this right after your tag in your web/index.html:
  <script> window.flutterWebRenderer = 'canvaskit'; </script>
• build using
  flutter build web --web-renderer auto

It will force the web renderer to 'canvaskit'.

You can actually just flutter build web --web-renderer canvaskit. No need to modify your HTML.

[JorisObert]

@doppio I had to launch a little website on Firebase Hosting and doing just flutter build web --web-renderer canvaskit did not work for me.

[guccisekspir]

still same. In Flutter Web doesnt work properly