Text flickering

[n3o2k7i8ch5]

Steps to Reproduce
The bug is caused by the inability to set a text size, when two AutoSizeText with the same AutoSizeTextGroup with certain parameters (as in sample code) are horizontally next to each other. Depending on the screen size, this results in a sort of text size flickering (in reality this flickering is much much faster, but the GIF has a low FPS).

The sample code is an app, to reproduce the bug just run it.

As mentioned above, to reproduce the bug on a specific screen size, the text length of the longest line in one of the AutoSizeTexts may need to be changed.

Code sample

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  AutoSizeGroup group;

  @override
  void initState() {
    group = AutoSizeGroup();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
                child: Card(
                    child: AutoSizeText(
                      'You have\npushed the\nbutton this\nmanyn times:aa',
                      group: group,
                      style: TextStyle(fontSize: 50),
                      maxLines: 4,
                    )
                )
            ),
            Card(
                child: AutoSizeText(
                    'Abd Abd\nAbd Abd\nAbd Abd\nAbd Abd',
                    group: group,
                  style: TextStyle(fontSize: 50),
                  maxLines: 4,
                )
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots

Version

• Flutter version: 1.12.13+hotfix.5
• auto_size_text version: 2.1.0

[simc]

@n3o2k7i8ch5 Do you have an idea how to solve this?

[ManolloGuedes]

@leisim and @n3o2k7i8ch5 I'm having the same problem here.
Do you have an idea about what is causing it?

[n3o2k7i8ch5]

If I'm not mistaken, the cause is the following:

1. Text A realizes it has more free space and can expand.
2. Text B, because it is in an AutoSizeGroup with text A, increases it's font size as well.
3. But now, after text B increased, it took some space and A is too big for it's borders.
4. So -> Text A decreases it's size.
5. Text B also decreases it's size (since it's in an AutoSzieGroup).
6. Now, both A and B decreased their sizes, and there is lots of free space -> We arrive at 1. again.

[g-balas]

Any workaround ?

[mpowloka]

Having a similar situation with [Image, SizedBox, AutoSizeText, SizedBox, AutoSizeText, SizedBox] in a horizontal, Instagram-like user profile.

In my situation, the only most-left text is flickering and only when Image is tapped or page is refreshed via RefreshIndicator. Really weird.

[mpowloka]

Did anyone find a working workaround?

EDIT: for me, setting presetFontSizes did the job. My preferred fontSize is 14, my presetFontSizes are [11, 12, 13, 14] and the flickering no longer occurs.

[caiogranero]

Did anyone find a working workaround?

EDIT: for me, setting presetFontSizes did the job. My preferred fontSize is 14, my presetFontSizes are [11, 12, 13, 14] and the flickering no longer occurs.

Not yet =(