I have the following List.
I would like the scale Icons (on the right) to be aligned.
The top should be in the same spot as the one underneath.
@override
Widget build(BuildContext context) {
return Padding(
padding:
const EdgeInsets.only(left: 0.0, right: 0.0, top: 8.0, bottom: 8.0),
child: Slidable(
endActionPane: ActionPane(motion: StretchMotion(), children: [
//delete option
SlidableAction(
onPressed: deleteTapped,
backgroundColor: Colors.red.shade400,
icon: Icons.delete,
borderRadius: BorderRadius.circular(8),
)
]),
child: Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Color(0xFFD9F0FF),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const Icon(
Icons.date_range_outlined,
color: Color(0xFF006B8F),
),
const SizedBox(width: 8),
Text(date,
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
color: Color(0xFF006B8F))),
const Spacer(),
const Text(
"|",
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
const Spacer(),
const Icon(
Icons.monitor_weight_outlined,
color: Color(0xFF006B8F),
),
const SizedBox(width: 8),
Text(weight + " kg",
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
color: Color(0xFF006B8F))),
],
),
),
),
);
}
}
I have tried several things, like putting the Icon and the text in a container but with no luck.
Any help appreciate it!
2
Answers
While you are already using
Spacer
on both Size, you can usetextAlign: TextAlign.center,
Without spacer, it can be
try this: