fix: Svg pictures aren't rendered in CI mode

[mhnowak]

Is there an existing issue for this?

• [X] I have searched the existing issues.

Version

0.4.1

Description

Svg pictures aren't rendered correctly in CI mode. They work fine in macOS, but once you fit them with widgets with size below them they appear weirdly.

I'm using flutter_svg: 1.1.4

Steps to reproduce

1. Create a golden test with this widget:

Scaffold(
  body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SvgPicture.asset(
          R.ILLUSTRATIONS_GENERIC_ERROR,
          fit: BoxFit.fitWidth,
        ),
        const SizedBox(height: 84),
      ],
  ),
);

2. Run flutter test --update-goldens - when you open the generated image that's the effect:

I've also attached the svg picture I'm generating the svg with.

Expected behavior

The generated golden should be identical to macOS one.

Screenshots

No response

Additional context and comments

I'm using flutter 3.0.5

[mhnowak]

Update: it seems like removing this line from column solves this issue

      mainAxisAlignment: MainAxisAlignment.center,

I don't yet know why tho.

[Kirpal]

Hi @mhnowak, thanks for the issue! I think this is caused by the method we use to block out the text affecting the layout of the svg. So in that case it would make sense that changing the alignment might fix it, but there's still an underlying issue to fix there. Unfortunately I don't have a good workaround at the moment, but will continue to update the issue as I figure out more details.

[Giuspepe]

I've encountered the same issue and another problem I have found with regards to this is that running goldenTest without a GoldenTestGroup also causes a similar issue. I added my example here, hope it helps: https://github.com/Giuspepe/alchemist/tree/example-svg-bug/example/test/svg_bug

I'm using Flutter 3.3.1 on channel stable.