SvgPicture.asset does not properly size image

Asked Dec 29 '18 at 12:30

Active Dec 29 '18 at 15:22

Viewed 2,011 times

I can't get my SVG file to be scaled properly when I load it. I just want it to be centered inside of my Container and only 24x24. But instead, it takes up much more space. Here's the code:

       Container(
          width: 88,
          height: 88,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white.withOpacity(0.2))
          ),
          child: SizedBox(
            width: 24,
            height: 24,
            child: SvgPicture.asset(
              iconName,
              width: 24,
              height: 24,
              fit: BoxFit.scaleDown,
              color: Colors.white,
            ),
          ),
        ),

And this is how it looks:

Any ideas on why the size is not being respected of either the SvgPicture.asset or the SizedBox that wraps it? Thanks

edited Dec 29 '18 at 15:22

asked Dec 29 '18 at 12:30

brwngrldev

3,664
3
24
45

post your image again with [this](https://flutter.io/docs/testing/debugging#visual-debugging) – pskink Dec 29 '18 at 14:07
@pskink ok, I've updated the image – brwngrldev Dec 29 '18 at 15:23
4

so it seems that the easiest solution is to add the following: `alignment: Alignment.center,` in the `Container` widget – pskink Dec 29 '18 at 20:35
`Center(child: SizedBox(width: 20,height: 20,child: SvgPicture.asset('images/svg/back.svg', semanticsLabel: 'Back') ) )` hope this helps – Saahithyan Vigneswaran Sep 04 '20 at 01:47

SvgPicture.asset does not properly size image

0 Answers0