I have a row containing an image and a column. But when the image stretches the parent container, the blue container doesn't stretch. I thought that Container stretches by default. What is the reasoning behind this?

Image

Container(
  color: Colors.purple,
  child: Row(
    children: [
      Flexible(
        child: AspectRatio(
          aspectRatio: 4 / 3,
          child: Image.asset(
            'assets/images/image.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
      Flexible(
        child: Container(
          color: Colors.blueAccent,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [Text('data'), Text('data')],
          ),
        ),
      )
    ],
  ),
);

CodePudding user response：

Container's size is determined by a various factors, including whether the parent's constraint is bounded, and whether it has a child etc. Containers do not "stretch by default".

In your case, the easiest solution is to set crossAxisAlignment: CrossAxisAlignment.stretch on your Row widget, and then wrap it with an IntrinsicHeight widget.

Modifying your code:

Container(
  color: Colors.purple,
  child: IntrinsicHeight( // <--- add this
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch, // <-- add this
      children: [
        ...