Flutter SVG delay when rendering

user_3897426 0
Viewed 1415

I display in row both an image as an SVG file and a text.

For some reason, the svg image renders slower than the rest of the screen, leading to a delay which isn't good for the user experience.

Is this delay normal ? What could I do so that the whole screen renders at the same time ?

Row(
   mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SvgPicture.asset(
            'lib/assets/muslim_coloc_logo.svg',
            height: 40.0,
            width: 40.0,
          ),
          SizedBox(width: 2.0,),
          RichText(
            text: TextSpan(children: [
              TextSpan(
                text: 'uslim',
                style: MC_titleWhite,
              ),
              TextSpan(
                text: 'Coloc',
                style: MC_titleWhite50,
              ),
            ]),
          ),
        ],
      ),

enter image description here

flutter rendering svg
1 Answers

You can use a PreCachePicture, it works for me:

Future.wait([
  precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/my_icon.svg'),
    null,
  ),
  precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/my_asset.svg'),
    null,
  ),
]);

You need to do it in a previous screen widget, like in your main, as example

user_96798070
Related