svg icons are not rendered correctly

[BigGitWorld]

Hi. I was using flutter-pi corresponding to flutter 2.8 and everything was working fine in both my laptop (ubuntu) and raspberrypi. I upgraded my flutter to the version 3.0.3 and also updated flutter-pi and engine-binaries, but I don't know why my SVG icons are not shown correctly sometimes in the raspberrypi (I tested it both debug and release mode), while everything is working fine in my laptop (ubuntu).

The following images are 2 cases from raspberrypi :

bad rendered images:

correct images:

what is the problem?

[ardera]

what method are you using for rendering the svg images? which package are you using? or is there some way to render svgs with vanilla flutter?

[BigGitWorld]

I'm using latest version of flutter_svg package.

example:

import 'package:flutter_svg/flutter_svg.dart';

SizedBox(
    width: 100,
    height: 100,
    child: SvgPicture.asset( 'assets/icons/temperature.svg',  color: Colors.white,),
),

I'm using this package for different projects and its working fine in android/iOS, web. Also as I mentioned, Its working with flutter-pi corresponding to the flutter 2.8.

[ardera]

Can you send me some example svgs that don't work for you?

[BigGitWorld]

sure. I emailed you ([email protected]) some pictures.

[ardera]

Somehow these all work fine for me:

https://user-images.githubusercontent.com/2488440/177048016-b974c7c4-b55a-490c-afb7-d4fc1b12e530.mp4

(EDIT: different link: https://photos.app.goo.gl/giPr8Gwc9czB5uTq6)

This is with latest flutter-pi and flutter 3.0.3. (I used the SizedBox template you commented)

It could be a weird Heisenbug maybe some race condition with rendering. You can try fiddling with the rendering a bit, maybe add an invisible overlay layer or something. (That helped in the past)

Other than that you can also try reducing the pages of your app where the problem ocurrs to some minimal code that reproduces the issue. I don't know if this is a graphics driver, flutter, flutter_svg or flutter-pi bug and I'd like to look into it, but I can't do anything when I can't reproduce it

[BigGitWorld]

Thank you so much dear @ardera. When I used png images instead of svg, everything works fine. So I think something is wrong with svg.

It could be a weird Heisenbug maybe some race condition with rendering. You can try fiddling with the rendering a bit, maybe add an invisible overlay layer or something. (That helped in the past)

can you provide an example please?

Other than that you can also try reducing the pages of your app where the problem ocurrs to some minimal code that reproduces the issue. I don't know if this is a graphics driver, flutter, flutter_svg or flutter-pi bug and I'd like to look into it, but I can't do anything when I can't reproduce it

The pages that this problem occurs, are not heavy. first I'm getting data from database or shared_preferences and then give the values to the UI and everything was working fine with flutter-pi corresponding to the flutter 2.8.

[dLogicC]

Hi, I have the same problem, and I haven't been able to find the cause yet. Only svg, with png everything works fine. In my case it is quite random, in the sense that if I change the page and then return to the previous one it may be that it is displayed correctly, but also the reverse, that is, it was first displayed correctly and then badly.

@ardera Thanks for this fantastic project!

[BigGitWorld]

@dLogicC which version of flutter are you using?

[dLogicC]

@dLogicC which version of flutter are you using?

3.0.3, but also in version 3.0.0 there was the same problem.

[ardera]

@BigGitWorld

can you provide an example please?

Opacity(opacity: 0.9999, child: ...);
DecoratedBox(
  position: DecorationPosition.foreground,
  decoration: BoxDecoration(
    color: const Color(0x01000000),
  ),
  child: ...
);
Stack(children: [..., Positioned.fill(child: ColoredBox(color: Colors.transparent)]);
RepaintBoundary(child: ...);

something like that

[BigGitWorld]

@ardera Thank. But unfortunately your above solution did not help and SVG pictures are not rendered successfully yet.

[gerkol]

Hi @BigGitWorld I had the same problem. For me the solution was to add some missing libraries to my image. Specifically I followed the instructions in: https://github.com/jwinarske/manifests/tree/honister for the DRM version. Make sure to rename flutter-pi to flutter-pi-release though. Otherwise you will get "Nothing provides flutter-pi" from bitbake. Hope this will help you.

[ardera]

It could be this is caused by flutter enabling usage of stencil buffers in 3.0: https://github.com/flutter/engine/blob/d1b9a6938ad77326ac3a94d92bbc77933ed829ed/shell/platform/embedder/embedder.cc#L624

They were disabled in 3.3 again though, so if that's the cause the rendering artifacts should be gone in 3.3.

[ardera]

I'll add EGL_STENCIL_SIZE, 8 to the context options, that should fix it should they decide to enable stencil buffer usage again.