flutter_svg icon indicating copy to clipboard operation
flutter_svg copied to clipboard

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

Open Ortes opened this issue 1 year ago • 0 comments

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 ?

Ortes avatar Aug 19 '24 12:08 Ortes