Flutter listview always expands to available width - flutter

Question

What I need is green box should end where the text ends.
Here's my code
Widget buildFlexible() {
return Flexible(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
children: [
MessageBubble(title: 'Test1'),
MessageBubble(title: 'Test2'),
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Row(
children: [
buildFlexible(),
],
),
],
),
);
}
class MessageBubble extends StatelessWidget {
final String title;
MessageBubble({required this.title});
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10.0),
child: Material(
child: Text(title),
color: Colors.lightGreenAccent,
// elevation: 5.0,
),
);
}
}

Answer 1

Wrap your Padding widget from your MessageBubble class with the Wrap() widget
So, the final code for the MessageBubble should be:
class MessageBubble extends StatelessWidget {
final String title;
MessageBubble({required this.title});
#override
Widget build(BuildContext context) {
return Wrap(children: [
Padding(
padding: EdgeInsets.all(10.0),
child: Material(
child: Text(title),
color: Colors.lightGreenAccent,
// elevation: 5.0,
),
)
]);
}
}
Alternatively, you can achieve the same result with just using a Container widget and by removing the Material widget and the Padding widget as:
Wrap(children: [
Container(
padding: EdgeInsets.all(10.0),
child: Text('hi'),
color: Colors.lightGreenAccent,
)
])
Instead of:
Wrap(children: [
Padding(
padding: EdgeInsets.all(10.0),
child: Material(
child: Text(title),
color: Colors.lightGreenAccent,
// elevation: 5.0,
),
)
]);