flutter stretch an SVG vertically in a Stack according to the size of the Stack

Question

Attempted many things from this answer: How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? but nothing worked. the closest I got was using Position.fill, but that stretched it both ways.

Here's my latest iteration, which seems to have no effect, the image is the same size as the image, not stretched:

Widget build(BuildContext context) => 
Padding(
  padding: EdgeInsets.only(left: 16, right: 16),
  child: Stack(children: [
    Flex(direction: Axis.vertical, children: <Widget>[
      SvgPicture.asset(
        'assets/icons/comments/lineVerticalReply.svg',
        fit: BoxFit.fitHeight,
      ),
    ]),
    Column(children: [
      //... bunch of stuff simulated by:
      SizedBox(width: 200, height:200)
    ]),
  ]),
);

Things I've tried:

Flex in combination with Expanded
FittedBox
Containers with boxConstraints
Positioned.fill <-- closest attempt
combinations of the above, and other stuff I've forgotten

The issue is that the size of the Stack widget is determined by the siblings of the SvgPicture widget. so I want the SvgPicture's height to respond to the height of the stack, which is determined by the largest item in the Stack.

How is this done?

score 0 · Answer 1 · answered Aug 28 '23 at 17:24

specifying the 'bottom' of the positioned did what I want, which I swear I tried first, but I must have been mistaken, maybe I tried it without the fitHeight, idk:

 Stack(children: [
          Positioned(
            top: 0,
            left: 19,
            bottom: 0,
            child: Container(
              width: 2,
              child: SvgPicture.asset(
                'assets/icons/comments/lineVerticalReply.svg',
                fit: BoxFit.fitHeight,
              ),
            ),
          ),
...

flutter stretch an SVG vertically in a Stack according to the size of the Stack

1 Answers1