Child Container's Height is depending on parent Container's Widget - flutter

Question

I Creating a Container giving it a height and width responsively, but the issue is that in the child of Container I use a ListView to show some Cards which are basically container and I give them a constant height but the height of the card are totally depending on Container's height, even if I give the of cards to 0, nothing will happen, and when I increase the container height, the card height increases, same happens while decreasing. this never happens to me before in flutter, may be this is a new version, I need help, please give answers with an explanation. You can see the Code of the container and Card.
Container Code
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
child: Container(
child: ListView(
scrollDirection: Axis.horizontal,
children: sample
.map((obj) => card.PredictionCard(
temprature: obj.temprature, status: obj.status))
.toList(),
),
height: _device.height * 0.22,
decoration: cardDecoration,
),
),
Card Code
class PredictionCard extends StatelessWidget {
final temprature;
final status;
const PredictionCard({this.temprature, this.status});
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
margin: EdgeInsets.symmetric(
vertical: 10,
),
height: 120,
decoration: predictionCardDecoration,
width: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'$temprature',
style: TextStyle(
color: Colors.white,
fontSize: 40,
),
),
Text(
'$status',
style: TextStyle(
color: Colors.white, fontSize: 15, letterSpacing: 1),
),
SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Column(
children: [
Image(
image: AssetImage('assets/rainIcon.png'),
),
Text(
'23%',
style: TextStyle(
color: Colors.white, fontSize: 15, letterSpacing: 1),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset('assets/rainDropIcon.png'),
Text(
'0%',
style: TextStyle(
color: Colors.white, fontSize: 15, letterSpacing: 1),
),
],
),
],
)
],
),
),
);
}
}
Code of Class from where Responsive height is integrated
// widget binging method
class DeviceConfig {
final height = WidgetsBinding.instance.window.physicalSize.height /
WidgetsBinding.instance.window.devicePixelRatio;
final width = WidgetsBinding.instance.window.physicalSize.width /
WidgetsBinding.instance.window.devicePixelRatio;
}
// using media query {uses context to set value of device configuration}
class DeviceConfigQuery {
var height;
var width;
DeviceConfigInit(BuildContext context) {
height = MediaQuery.of(context).size.height;
width = MediaQuery.of(context).size.width;
}
}

Answer 1

Ok I will allow myself to copy the answer from another post as its worth to remember that and I woudnt put it better.
Constraints in Flutter works a bit different than usual. Widgets
themselves do not have constraints.
When you specify a width/height on a Container, you're not
constraining Container. You're constraining the child of Container.
Container will then size itself based on the size of its child.
As such, parent widgets always have the last word on how their
descendants should be sized.
If you want to go around this, you have to use Align widget:
Container(
width: 200.0,
height: 200.0,
child: Align(
alignment: Alignment.topLeft,
child: Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
),
),
);
This may seem weird and limiting. But this single weirdness is the
reason why Flutter's layout is so powerful and composable.
answered by:
Rémi Rousselet in this post https://stackoverflow.com/a/54717843/2945977
In your example instead of using Padding, use Align with alignment: Alignment.center