Renderflex overflow caused by row - flutter

Question

I am trying to implement simple one-two line text.
Text will have a starting text then icon and ending text.Due to different styles i am using row with text,icon and text widgets.
I am getting A RenderFlex overflowed by 16 pixels on the right. error.
i enclose the row in flexible and expanded but still not working. i just want the text to drop at the end of line to next line.
Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
),
width: mdq.size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Tap ',
style: TextStyle(
fontSize: 17,
),
),
Icon(Icons.add),
Text(
'on the right hand corner to start a new chat.',
style: TextStyle(
fontSize: 17,
),
),
],
),
),
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
),
child: Text(
'You can communicate with the user who have installed Just Meetups and Deals app',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
),
child: InkWell(
onTap: () {},
child: Text(
'Start communicating',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
);

Answer 1

Use the Expanded widget
Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
),
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Tap ',
style: TextStyle(
fontSize: 17,
),
),
Icon(Icons.add),
Expanded(
child: Text(
'on the right hand corner to start a new chat.',
style: TextStyle(
fontSize: 17,
),
),
)
],
),
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
),
child: Text(
'You can communicate with the user who have installed Just Meetups and Deals app',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
),
child: InkWell(
onTap: () {},
child: Text(
'Start communicating',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
Here's a codepen of it working

Answer 2

You need not use any flex like [Expanded, Flexible, etc] for rows in the column because rows default takes max-width available by column
You are getting an error because your row child width is more than available screen size
you can use Expanded for the children of large width of rows in Expanded to wrap the child in available width inside a row.