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

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,
            ),
          ),
        ],
      ),
    );
  }
}

Image example

CodePudding user response：

The key here is the fit parameter. Also, since you want to cut off the bottom and see the top, use Alignment.topCenter.

Container(
  height: bubbleDiameter.toDouble() / 2,
  width: bubbleDiameter.toDouble(),
  child: SvgPicture.asset(
    assetName,
    fit: BoxFit.fitWidth,
    alignment: Alignment.topCenter,
  ),
),

CodePudding user response：

You cannot modify an asset image in flutter. even if you can, it won't be ideal, because it's an asset, you can remove , edit and add it back, rather than modifying the asset every time you run your app.

CodePudding user response：

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,
            ),
          ),