How to make whole row expanded? - flutter

Question

I'm getting below overflow error and I want to make an expanded view for hashtags.
For example, I want 4th hashtag in the new line.
Ive tried to wrap Row with Expanded and tried to give fix width but not working.
My issue :
My code:
Container(
margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
decoration: BoxDecoration(
color: ColorRes.white,
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
Container(
height: 40,
width: 40,
margin: EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
color: ColorRes.primaryColor,
borderRadius: BorderRadius.all(
Radius.circular(60),
),
),
alignment: Alignment.center,
child: Text(
"PS",
style: TextStyle(
color: ColorRes.white,
fontSize: 16,
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Jane Mosca Battello",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Row(
children: [
Expanded(
child: Row(
children: [
Text(
"Stage : ",
style: TextStyle(
fontSize: 14,
color: ColorRes.black,
),
),
Container(
decoration: BoxDecoration(
color: ColorRes.green,
borderRadius: BorderRadius.circular(4),
),
padding: EdgeInsets.symmetric(horizontal: 3),
child: Text(
"Lead",
style: TextStyle(
fontSize: 12,
color: ColorRes.white,
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Text(
"Source : ",
style: TextStyle(
fontSize: 14,
color: ColorRes.black,
),
),
Container(
decoration: BoxDecoration(
color: ColorRes.primaryColor,
borderRadius: BorderRadius.circular(4),
),
padding: EdgeInsets.symmetric(horizontal: 3),
child: Text(
"Website",
style: TextStyle(
fontSize: 12,
color: ColorRes.white,
),
),
),
],
),
),
],
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: ["Buyer Lead", "Seller Lead","Buyer Lead ", "Seller Lead"]
.map(
(e) => Container(
decoration: BoxDecoration(
color: ColorRes.primaryColor.withOpacity(0.7),
borderRadius: BorderRadius.circular(4),
),
padding: EdgeInsets.symmetric(horizontal: 3),
margin: EdgeInsets.only(right: 5),
child: Text(
"#$e",
style: TextStyle(
fontSize: 12,
color: ColorRes.white,
),
),
),
)
.toList(),
)
],
),
),
),
],
),
)

Answer 1

instead of row use Wrap Widget. it will work

Answer 2

Add your container to flexible widget
Row(
mainAxisSize: MainAxisSize.min, children: [
"Buyer Lead",
"Seller Lead",
"Buyer Lead ",
"Seller Lead",
"Seller Lead",
"Seller Lead",
]
.map(
(e) => Flexible(
child: Container(
decoration: BoxDecoration(
color: Colors.red.withOpacity(0.7),
borderRadius: BorderRadius.circular(4),
),
padding: EdgeInsets.symmetric(horizontal: 3),
margin: EdgeInsets.only(right: 5),
child: Text(
"#$e",
style: TextStyle(
fontSize: 12,
color: Colors.white,
),
),
),
),
)
.toList(),
)