Widget is taking maximum space in Flutter - flutter

Question

I have some widgets (message bubbles ) inside a StreamBuilder, however this message bubbles are taking the maximum space possible when they should adapt to the size of the text inside.
This is the code of the main screen:
#override
Widget build(BuildContext context) {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
StreamBuilder<QuerySnapshot>(
stream: _firestore.collection('messages').snapshots(),
builder: (context, snapshot){
List<Widget> messagesWidgets = [];
if (snapshot.hasData){
final messages = snapshot.data.docs;
for (var message in messages){
final messageText = message.data()['text'];
final messageSender = message.data()['sender'];
final messageWidget = MessageBubble(
text: messageText,
sender: messageSender,
);
messagesWidgets.add(messageWidget);
}
}
return Expanded(
child: ListView(
//padding: EdgeInsets.symmetric(horizontal: 0.0, vertical: 20.0),
children: messagesWidgets,
),
);
},
),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 6,
child: TextInput(
textAlign: TextAlign.left,
onChanged: (value){
messageText = value;
},
hintText: 'Type a message',
),
),
Expanded(
flex: 1,
child: Button(
child: Icon(Icons.send, color: background,),
function: (){
if(messageText.trim() == '') return;
_firestore.collection('messages').add({
'text': messageText,
'sender': Usr.email,
});
setState(() {
messageText = '';
});
},
tag: 'hey2d2',
),
),
],
),
),
],
),
);
And this is the code of the message bubbles:
#override
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
child: Material(
elevation: 10.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.white,
child: Padding(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'$sender',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: background,
),
),
Text(
'$text',
style: TextStyle(
fontSize: 15.0,
color: background,
),
),
],
),
),
),
),
);
Here there is a screenshot of what I mean:

Answer 1

This happens because the ListView widget automatically forces its children to take up all the available width. You can bypass this behaviour by wrapping the message bubble container with the Align widget. See below:
#override
Widget build(BuildContext context) {
return Align(
// Set the align's alignment to centerLeft.
alignment: Alignment.centerLeft,
child: Container(
...
),
);
}