Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Aspect ratio of container is not maintained when FittedBox is at play #1098

Open
Ortes opened this issue Aug 19, 2024 · 0 comments
Open

Aspect ratio of container is not maintained when FittedBox is at play #1098

Ortes opened this issue Aug 19, 2024 · 0 comments

Comments

@Ortes
Copy link

Ortes commented Aug 19, 2024

When FlutterSvg is used with contain or fitWidth visually the svg is correctly fitted like the option but the container does not keep the aspect ratio of the svg.
For example if the SvgPicture is contained in a Container with a background the background is visible outside of the svg boundary.
Here is an illustration:
2024-08-19-141309_319x873_scrot

Code:

Container(
  width: 300,
  color: Colors.green,
  child: SvgPicture.asset(
    'assets/background/svg/pattern-single.svg',
    fit: BoxFit.fitWidth,
  ),
),

In this example my svg is 768x821 and I it is contained in a 300 width container as we can see the svg in the center look correct but the container is still 821 pixel tall which makes my background overflow above and bellow the svg. Would it be nicer if the container resized the same way ?

I have found 2 workaround:

Container(
  width: 300,
  color: Colors.green,
  child: AspectRatio(
    aspectRatio: 768 / 821,
    child: SvgPicture.asset(
      'assets/background/svg/pattern-single.svg',
    ),
  ),
),

In this one you have to manually fill the pixel size of the image.

Container(
  width: 300,
  color: Colors.green,
  child: FittedBox(
    child: SvgPicture.asset(
      'assets/background/svg/pattern-single.svg',
    ),
  ),
),

This one works fine but I suppose you already use FittedBox in your code that is weird to use 2 nested Fittedbox Right ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant