i am continuously being wrong with this data overflow - flutter

Question

I want to display the text under the images. I am able to see the Images and text, but My text is overflowing. I want to display it on each text under each image. Below is my code.
What should I do to solve this situation.
Widget firstStyleRow(String ImgPath1, String ImgPath2, String avatarImg) {
return Container(
height: 250.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: [
Container(
height: 250.0,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Column(
children: [
Container(
height: 125.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(ImgPath1),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 15.0,
),
Text(
'i like the wy to show more item',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('assets/chris.jpg'),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'mon hll',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
'10:28 pm',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
],
),
),
SizedBox(
width: 10.0,
),
Container(
height: 350,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Container(
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage('assets/letter.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
'i hvxxxx',
style: TextStyle(
fontSize: 50,
),
),
),
],
),
);
}

Answer 1

Try below code hope its help to you.add your inside row widget wrap it with Expanded or Flexible, just change my images with your images
Container(
height: 250.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: [
Expanded(
child: Container(
height: 250.0,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 125.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 15.0,
),
Text(
'i like the wy to show more item',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
),
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'mon hll',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
'10:28 pm',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
],
),
),
),
),
SizedBox(
width: 10.0,
),
Container(
height: 350,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Container(
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
'i hvxxxx',
style: TextStyle(
fontSize: 50,
),
),
),
),
],
),
),
Your result screen->