want to achieve correct UI with all components aligned - flutter

Question

I want to achieve that specific result in UI but I think there is thing i am missing in the Row/column component.
the UI I want to achieve is as follows:
but i am able to do that change:
as you can see there are many gaps between the popup menu button and the right side width.
this the paint shows me:
how much width popUpMenuButton is getting which cause the UI to accommodate that space
i tried the following way to achieve that:
Row(
children: [
Expanded(
flex: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
date.toString(),
style: cTextStyleBold,
),
const SizedBox(
height: 20,
),
Text(
"${fromTime!} - ${toTime!}",
style: cTextStyle,
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
children: [
Text(
approvedText!,
style: cTextStyleTimeRegistrationBold,
),
const SizedBox(
width: 10,
),
Transform.scale(
scale: 1.2,
child: SizedBox(
width: 20,
child: Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
fillColor: MaterialStateProperty.all(
Colors.black,
),
checkColor: Colors.white,
shape: const CircleBorder(),
value: approved == "1" ? true : false,
splashRadius: 20,
onChanged: (value) {},
),
),
),
],
),
Row(
children: [
Text(
supervisorShiftText!,
style: cTextStyleTimeRegistrationBold,
),
const SizedBox(
width: 10,
),
Transform.scale(
scale: 1.2,
child: SizedBox(
width: 20,
child: Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
fillColor: MaterialStateProperty.all(
Colors.black,
),
checkColor: Colors.white,
shape: const CircleBorder(),
value: approvedBySupervisor == "1" ?
true : false,
splashRadius: 20,
onChanged: (value) {},
),
),
),
],
),
],
),
Row(
children: [
PopupMenuButton<String>(
position: PopupMenuPosition.under,
onSelected: handleClick,
itemBuilder: (BuildContext context) {
return {'Edit', 'Delete'}.map((String choice)
{
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
),
],
),
],
),