Flutter PopupMenuButton padding or full width - flutter

Question

I need to show ... if text-overflow and on click need to show the full text. So I use PopupMenuButton It's all working fine but the issue is it's showing just 3 alphabets and showing ... then I know width is short but before I use this text it's showing almost 10 words I think there is some padding or something I have enough width to show more text but it's not showing
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Container(
width: Width *
0.225,
child:
Align(
alignment:
Alignment.topLeft,
child: PopupMenuButton<
String>(
icon:
Container(
child: Text(datashowThis[index]['data'][i]['serviceName'] != null ? datashowThis[index]['data'][i]['serviceName'] : '',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(color: textGreyColor, fontSize: 12, fontFamily: 'SegoeUI-SemiBold')),
),
onSelected:
(choice) {},
itemBuilder:
(BuildContext context) {
return [
'${datashowThis[index]['data'][i]['serviceName']}'
].map((String
choice) {
return PopupMenuItem<String>(
value: choice,
child: Container(width: 100, child: Text(choice, style: TextStyle(color: kPrimaryColor, fontFamily: 'SegoeUI'))),
);
}).toList();
},
),
),
),
Container(
width: Width *
0.16,
child:
Center(
child: Text(
datashowThis[index]['data'][i]['hourBooked_Productivity']
.toString(),
textAlign: TextAlign
.center,
style: TextStyle(
color: textGreyColor,
fontSize: 12,
fontFamily: 'SegoeUI-SemiBold')),
),
),
Container(
width: Width *
0.16,
child:
Center(
child: Text(
datashowThis[index]['data'][i]['hourScheduled_Productivity']
.toString(),
textAlign: TextAlign
.center,
style: TextStyle(
color: textGreyColor,
fontSize: 12,
fontFamily: 'SegoeUI-SemiBold')),
),
),
Container(
width:
Width *
0.2,
child:
Center(
child: Text(
datashowThis[index]['data'][i]['appointmentsBooked_Productivity']
.toString(),
textAlign: TextAlign
.center,
style: TextStyle(
color: textGreyColor,
fontSize: 12,
fontFamily: 'SegoeUI-SemiBold')),
),
),
Container(
width: Width *
0.15,
child:
Center(
child: Text(
datashowThis[index]['data'][i]['bookedPercentange_Productivity']
.toString(),
textAlign: TextAlign
.center,
style: TextStyle(
color: textGreyColor,
fontSize: 12,
fontFamily: 'SegoeUI-SemiBold')),
),
),
],
),
);
You can see issue on image

Answer 1

The issue is you are putting other widget where icon widget is expected. So it's default icon width is taken.
Solution:
Use child instead of 'icon' in PopUpMenuButton widget.
Here is example:
Container(
width: ProjectResource.screenWidth * 0.4,
color: AppColors.blueColor,
child: Align(
alignment: Alignment.topLeft,
child: PopupMenuButton<String>(
child: Container(
color: AppColors.greenColor,
child: Text('Data here sa as a a a as asas a',
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.whiteColor,
fontSize: 12,
)),
),
onSelected: (choice) {},
itemBuilder: (BuildContext context) {
return ['Data here'].map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Container(
width: ProjectResource.screenWidth * 0.225,
child: Text(choice,
style: TextStyle(color: AppColors.greenColor))),
);
}).toList();
},
),
),
)
So you can use any width and height of PopUpMenuButton child.
Thanks.