Flutter ListView Text show on multiLine if overflow - flutter

Question

I have A listView in which I have another listview to show simple text in horizontal but the issue is its overflow on the left side If I give width to listview it's going to scroll list. I want if it's overflow then it will simply go to the next line instead of overflow or scroll.
My code
Expanded(
child: new ListView.builder(
itemCount: respondedData3['data'].length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: ScrollPhysics(),
itemBuilder: (context, index) {
String TimeFormat = DateFormat("yyyy-MM-dd").format(DateTime.parse(respondedData3['data'][index]['appointmentDate']));
return Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Container(
child: GestureDetector(
onTap: () async {
Navigator.pop(context);
},
// onTap: widget.onPressed,
child: Stack(children: [
Container(
height: 80,
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
Text(TimeFormat, style: TextStyle(fontSize: 14, fontFamily: 'SegoeUI-Bold', color: kPrimaryColor)),
Text(respondedData3['data'][index]['appointmentTime'].toString(), style: TextStyle(fontSize: 13, fontFamily: 'SegoeUI', color: textGreyColor))
],
),
SizedBox(
width: 10,
),
Container(
color: Colors.grey,
height: 40,
width: 1.5,
),
SizedBox(
width: 10,
),
Column(
children: [
Text(respondedData3['data'][index]['serviceProviderName'].toString(), style: TextStyle(fontSize: 13, fontFamily: 'SegoeUI-Bold', color: textGreyColor)),
Container(
height: 20.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: serviceShow.length,
itemBuilder: (BuildContext context, int index) => Text('${serviceShow[index]["Name"]} ${serviceShow[index]["Time"]} ${serviceShow[index]["Price"]}'),
),
),
],
)
],
),
],
),
),
]),
),
),
);
},
),
)
You can see in the image it's showing an overflow error I need to show it in the second line.

Answer 1

ListView.builder(
itemCount: 3,
// respondedData3['data'].length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: ScrollPhysics(),
itemBuilder: (context, index) {
String TimeFormat = "yyyy-MM-dd";
// DateFormat("yyyy-MM-dd").format(
// DateTime.parse(respondedData3['data'][index]['appointmentDate']));
return Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Container(
child: GestureDetector(
onTap: () async {
Navigator.pop(context);
},
// onTap: widget.onPressed,
child: Stack(children: [
Container(
height: 80,
// width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Column(
children: [
Text(
TimeFormat,
// style: TextStyle(
// fontSize: 14,
// fontFamily: 'SegoeUI-Bold',
// color: kPrimaryColor,
// ),
),
Text("Time"
// respondedData3['data'][index]
// ['appointmentTime']
// .toString(),
// style: TextStyle(
// fontSize: 13,
// fontFamily: 'SegoeUI',
// color: textGreyColor,
// ),
)
],
),
SizedBox(
width: 10,
),
Container(
color: Colors.grey,
height: 40,
width: 1.5,
),
SizedBox(
width: 10,
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"serviceProviderName",
// respondedData3['data'][index]
// ['serviceProviderName']
// .toString(),
style: TextStyle(
fontSize: 13,
// fontFamily: 'SegoeUI-Bold',
// color: textGreyColor
),
),
Container(
height: 20.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 33,
itemBuilder:
(BuildContext context, int index) =>
Text(
'{serviceShow[index]["Name"]} {serviceShow[index]["Time"]} {serviceShow[index]["Price"]}',
),
),
),
],
),
),
],
),
],
),
),
]),
),
),
);
},
),

Answer 2

add max lines on your Text
Text(
'Your multiline text',
maxLines: 2, //2 or more line you want
overflow: TextOverflow.ellipsis,
),
),

Answer 3

You get this error because you don't tell specific width For displaying Text widget and your getting text is huge.Always remeber, in Text widget => use 'overflow: TextOverflow.ellipsis' . Because in dynamic application, text can be large
Use FittedBox to when you want to try your text in limited width. And you want not get overflow error, use "overflow: TextOverflow.ellipsis"
FittedBox(
child:
Container(
width: 260,
// height: 50,
child: const Text(
"testing1 testing2 testing3 testing4 testing5 testing6 testing7 testing8 testing9 testing10 testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing",
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 17,
fontWeight: FontWeight.w600,
),
maxLines: 4,
overflow: TextOverflow.ellipsis
),
),
)

Answer 4

The text in my app was overflowing too , and maxLines: 2, overflow: TextOverflow.ellipsis, was not working since the text was part of the Expanded(child: ListView.builder( so what I did was
LimitedBox(
maxWidth: 150,
child: Text(
videoInfo[index]["title"],
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
)

Answer 5

use Expanded up your Column example;
Expanded(child:
Column(
children: [
Text ('long text'),
Text ('long text 2')
]
)
);