[BUG] Base64 Image is flickering

[leckkaisiongsg]

Describe the bug: Hi,

I am having problem displaying base64 image in HTML content. My base64 image flickers every time whenever state changes in my UI. I have tried to resolve it with gaplessPlayback: true in previous version (1.3.0), but it was no longer working in 2.1.2.

I am aware that the latest version does support base64 image rendering without the use of customRender, however the same problem persist. I wonder if I am doing this the correct way or someone has similar issue as well?

HTML to reproduce the issue:

Container( margin: EdgeInsets.only(left: 20, right: 20, bottom: 20), child: Html( data: widget.questions[index].questionText, style: { "p": Style( fontSize: FontSize.percent(150), ), "u": Style( fontSize: FontSize.percent(100), ), "b": Style( fontSize: FontSize.percent(100), ), "i": Style( fontSize: FontSize.percent(100), ), }, customRender: { "img": (RenderContext context, Widget child) { Uint8List _image = base64Decode( context.tree.attributes["src"].substring(22)); return Image.memory( _image, gaplessPlayback: true, ); }, }, ), ),

Html widget configuration:

customRender: { "img": (RenderContext context, Widget child) { Uint8List _image = base64Decode( context.tree.attributes["src"].substring(22)); return Image.memory( _image, gaplessPlayback: true, ); }, },

Expected behavior: The image should not flicker

Screenshots:

Device details and Flutter/Dart/flutter_html versions: Flutter 2.5.0 Dart 2.14.0 flutter_html 2.1.2

A picture of a cute animal (not mandatory but encouraged) :)

[chenxianqi]

Yes, I also have image bounce

[LucMoreau33560]

Hi, Same problem for me. It wasn't present in version 1.3.0

If you have a workaround or a fix, please share ;-)

[chenxianqi]

I don’t know, wait for the author to see

[leckkaisiongsg]

I just reverted back to 1.3.0 for time being, hopefully someone will be able to enlighten us.

[chenxianqi]

hi, I temporarily found the root cause of the problem flutter ui rebuild leads to re-rendering, maybe flutter_html does not cache the data loaded for the first time, and reloads the network image every time, which causes flickering My temporary solution is, I hope it works for you

Widget cacheHtml;
if(cacheHtml != null){
    return cacheHtml
}else{
cacheHtml = Html();
}
return cacheHtml;

[LucMoreau33560]

Hi, Unfortunately it doesn't solve the problem. The behavior is still the same using this trick.

[chenxianqi]

I upgraded it to the status management of the page, and it works normally

[LucMoreau33560]

Hi @chenxianqi , Can you please give a piece of code that is working ? Many thanks !

[chenxianqi]

For your reference

class _MyHomePageState extends State<MyHomePage> {
  String articleContent =
      '''<img style="width:100px" src="https://mmbiz.qpic.cn/mmbiz_png/uG11qwRicVC2D3ibiaVaFIxqsjKTlZUdNjEOngPxLP36PI4Vzgo1yYuVgPGjbscb8f64mOm6I1v2ibxNnMw5jMGh7A/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="IMAGE"/>''';

  late Widget articleContentHtml;

  @override
  void initState() {
    super.initState();

    articleContentHtml = Html(
      data: articleContent,
    );

    // simulate UI bee rebuild，
    Timer.periodic(Duration(milliseconds: 500), (timer) {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView(
          children: [
            //  normal
            articleContentHtml,

            // Flashing
            Html(
              data: articleContent,
            )

          ],
        ));
  }
}

[chenxianqi]

In fact, the problem is that every time rebuild HTML will consume the instance of the image, resulting in flickering

[gusterwoei]

Yup facing the same issue after upgrading to 2.1.5

[erickok]

Should be fixed in 2.2.0.