Skip to content

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

@Ortes

Description

@Ortes

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 ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions