search

dnfield / flutter_svg

SVG parsing, rendering, and widget library for Flutter
MIT License
1.67k stars 459 forks source link

Performance issues in scrollable widgets #560

Closed rs5173 closed 3 years ago

rs5173 commented 3 years ago

After repeated investigation, it is finally found that flutter_svg will cause severe frame drop in scrollable widgets, flutter version is 2.2

rs5173 commented 3 years ago

As the number of SvgPicture increases, frame drop will become very serious

rs5173 commented 3 years ago

After deleting SvgPicture, it becomes smooth

dnfield commented 3 years ago

What if you add repaint boundaries around the SVG?

dnfield commented 3 years ago

It also really depends on what the SVG is. :)

rs5173 commented 3 years ago

I don’t quite understand what "add repaint boundaries around the SVG" means. I tried to set allowDrawingOutsideViewBox to true, but it still has no effect.

rs5173 commented 3 years ago

The SVGs I use are all small icons, such as

`

`

rs5173 commented 3 years ago

All svg comes from adobe xd

dnfield commented 3 years ago

So instead of something like ListView(children: [SvgPicture.asset(...), SvgPicture.asset(...)], do ListView(children: [RepaintBoundary(child: SvgPicture.asset(...)), RepaintBoundary(child: SvgPicture.asset(...))].

rs5173 commented 3 years ago

Using RepaintBoundary did not help me much. In the end, I found a package called flutter_svg_provider. Its method is to convert SVG data into an Image at runtime. This issue was resolved.

pub:https://pub.dev/packages/flutter_svg_provider

rs5173 commented 3 years ago

thank you for your reply!

aytunch commented 2 years ago

I am having the exact same issue especially on web canvaskit I have several svg's on my GridView items and while scrolling the GridView the performance is very low. Once I remove the svg tags the performance is normal I tried RepaintBoundary but it did not change much + it requires lots of extra memory because flutter engine creates a new sperate tree for each RepaintBoundary.

olegyablokov commented 1 year ago

Any updates on this? In my app it used to be ok when I used flutter_svg: 0.23.0+1 version but after upgrading to latest version I also started experiencing huge problems with performance of svg items in scrollable lists

dnfield commented 1 year ago

@olegyablokov please share a reproduction.

alperefesahin commented 5 months ago

Using RepaintBoundary did not help me much. In the end, I found a package called flutter_svg_provider. Its method is to convert SVG data into an Image at runtime. This issue was resolved.

pub:https://pub.dev/packages/flutter_svg_provider

I also solved like that. Thanks