Flutter card layout with column - flutter

Question

I have a simple card design, my card is wrapped with a container with a specific height and width, so the children are bounded
The card has a picture from Image.network and a text at the bottom, both occupying half the height of the card
However, my code receives this error:
Error: Cannot hit test a render box that has never been laid out.
From what I know, constraints goes down the tree and children return the size to the parent. I know the column would not pass constraints to the children, however, the two expanded widget SHOULD know to take up half of the card's height?
My goal is to understand WHY this doesn't work, moreover than the actual working code. thank you!
Code:
var height = MediaQuery.of(context).size.height;
return Container(
height: height * 0.45,
width: double.infinity,
child: Card(
elevation: 4,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: Column(
children: [
Expanded(
flex: 1,
child: FittedBox(
child: Image.network('https://source.unsplash.com/random'),
),
),
Expanded(
flex: 1,
child: Container(
child: Text("hello"),
),
)
],
)),
);

Answer 1

The problem is that FittedBox tries to scale its child to fit accordingly; thus the child needs to be laid out before. Because the child is an image being loaded in this example, it's not laid before the fitting. To overcome this issue, you can use a SizedBox.expand instead of the FittedBox:
Container(
height: height * 0.45,
width: double.infinity,
child: Card(
elevation: 4,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: Column(
children: [
Expanded(
flex: 1,
child: SizedBox.expand(
child: Image.network('https://source.unsplash.com/random'),
),
),
Expanded(
flex: 1,
child: Container(
child: Text("hello"),
),
)
],
)),
)

Answer 2

-Don't use MediaQuery inside the build Methode, before the return.
-Avoid redundant argument: https://dart-lang.github.io/linter/lints/avoid_redundant_argument_values.html for the flex: 1
Use fit: BoxFit.contain
return Container(
height: MediaQuery.of(context).size.height* 0.45,
width: double.infinity,
child: Card(
elevation: 4,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: Column(
children: [
Expanded(
flex: 1,
child: Image.network('https://source.unsplash.com/random',fit: BoxFit.contain),
),
Expanded(
flex: 1,
child: Container(
child: Text("hello"),
),
)
],
)),
);