Flutter: How to make height (or width) change dynamically depending on the parent

I have created a Card whose height depends on its content, so it's height is not defined anywhere. Now I want to add a left blue border to the Card, whose height adjusts to the current height of the Card (his parent).

So when I type in any fixed height (e.g. 50), the blue border looks like this: height: 50

This is my Code:

Card(
          margin: EdgeInsets.zero,
          elevation: 0,
          color: Colors.black12,
          shape: const OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(6)),
            borderSide: BorderSide.none,
          ),
          child: Container(
            width: double.infinity,
            child: Stack(
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Text("This is random text."),
                      Text("There can be more."),
                      Text("So the height of this Card is never fix."),
                    ],
                  ),
                ),
                Container(
                  height: 50, // This height must match the current height of the Card
                  width: 8,
                  decoration: const BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(6), bottomLeft: Radius.circular(6))
                  ),
                )
              ],
            ),
          ),
        )

But I want a dynamic height, with which it should look always like this, whether the content changes or not: height: matches current height of Card

Neither double.infinity helped me nor an Expanded Widget.

CodePudding user response：

You can use Container's decoration as parent and ClipRRect to round the corners. You can also wrap with Card if you feel needed.

Padding(
  padding: const EdgeInsets.all(24.0),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: Container(
      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: Colors.grey,
        border: Border(
          left: BorderSide(
            color: Colors.blue,
            width: 12,
          ),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: const [
          Text("This is random text."),
          Text("There can be more."),
          Text("So the height of this Card is never fix."),
        ],
      ),
    ),
  )),

CodePudding user response：

A way to do this with much less code:

        Container(
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            // add Card-like elevation
            boxShadow: kElevationToShadow[4],
            gradient: LinearGradient(
              stops: const [0.03, 0.03],
              colors: [
                Colors.blue,
                Colors.grey[900]!,
              ],
            ),
            borderRadius: BorderRadius.circular(3),
          ),
          child: const Text(' Sunt magna irure ut reprehenderit.'),
        ),

If you use a gradient you might want to add some padding on the left of the text though since it might go into that "Color Marker" in the next line depending on how big the width is.

Result