Column child Container covers full width of parent - flutter

Question

I am adding a Container inside Column. I have given Container fixed width 60% of device width and height is 30% of device height. For height it is reflecting good but width covering whole parent.
I am not sure what I am doing wrong.
Here is my code:
Scaffold(
body: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height*.30,
child: Container(
width: MediaQuery.of(context).size.width*.20,
height: 40,
child: Text('test'),
color: Colors.blueAccent,
),
),
Expanded(
child: ListView(
children: chatList.map((chatModel) {
return ChatTileWidget(chatModel: chatModel,);
}).toList(),
),
)
],
),
);

Answer 1

Constraints in Flutter works different than usual. If you want to give height and width to the child, it will usually follows its parents constraints.
To read more about Constraints in Flutter: Understanding Constraints.
To get what you want, you need to use Align and set the alignment property to your preferred position. Here is an example for you. I have wrapped your inner Container with an Align widget and set the alignment to topLeft so it doesn't take it's parent height and width:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.3,
child: Align(
alignment: Alignment.topLeft,
child: Container(
height: 40.0,
color: Colors.blueAccent,
width: MediaQuery.of(context).size.width * 0.2,
child: Text('test')
)
)
)
]
)
RESULT
To know more about Align, please see this: Align Class.