Is there an easier way to adjust the size of an SVG?

Issue

I am looking to cut the image of the SVG in half. The SVG is the lighter wave at the bottom of the circle. It is currently too high, and I need to reduce the size by about half. I placed the SVG in a container of its own, but modifying the size of the container isn’t exactly modifying the size of the image in ways I would expect. Any suggestion are appreciated.

    return Container(
      decoration: bubbleBoxDecoration,
      height: bubbleDiameter.toDouble(),
      width: bubbleDiameter.toDouble(),
      child: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Upper Body',
                  style: labelTextStyle,
                ),
                Text(
                  '45',
                  style: weightTextStyle,
                ),
                Text(
                  'lbs',
                  style: unitTextStyle,
                ),
              ],
            ),
          ),
          Container(
            height: bubbleDiameter.toDouble(),
            width: bubbleDiameter.toDouble(),
            child: SvgPicture.asset(
              assetName,
              alignment: Alignment.bottomCenter,
            ),
          ),
        ],
      ),
    );
  }
}

Solution

You can trick the UI while using Stack and make the image size the way you want. You need to resize the image and align properly. The only reason your code-snippet is not reflecting the size because Stack child require a positional widget like Positioned / Align to reflect custom size.

 Positioned(
            bottom: -100,// bubbleDiameter.toDouble() the way you like to align
            child: SvgPicture.asset(
              assetName,
            height: bubbleDiameter.toDouble() * 2,
            width: bubbleDiameter.toDouble() *2,
              alignment: Alignment.bottomCenter,
            ),
          ),

Answered By – Yeasin Sheikh