I am using a Card widget populated with a Row. At the end of the row I use a GFIconButton widget which is the bin and it currently moves depending on the length of the menu item's name. I want the bin to stay at the far right position no matter what the length of the menu item is.
I am already using Alignment.centerRight
Card(
margin: const EdgeInsets.fromLTRB(5, 10, 5, 10), //EdgeInsets.all(10),
color: Colors.white,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
ClipRect(
child: Align(
alignment: Alignment.centerLeft,
widthFactor: 0.8,
child: Image(
image: AssetImage(itemImg),
height: 100,
width: 70,
fit: BoxFit.cover,
),
)),
const SizedBox(width: 30),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: const TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold),
),
const SizedBox(height: 5),
Text(
"R$price",
style: const TextStyle(color: Colors.black, fontSize: 17),
),
const SizedBox(height: 5),
Text(
variety,
style: const TextStyle(color: Colors.black, fontSize: 17),
),
],
),
// Container(child: ),
const SizedBox(width: 30),
Text("x" + quantity.toString(),
style: const TextStyle(color: Colors.black, fontSize: 20),
textAlign: TextAlign.end),
const SizedBox(width: 20),
GFIconButton(
alignment: Alignment.centerRight,
onPressed: () async {
//If points are above 0 a reward
//Id hard coded
},
icon: const Icon(
Icons.delete_outline,
color: Colors.black,
textDirection: TextDirection.ltr,
),
type: GFButtonType.transparent,
),
]),
),
Here's the simplest solution:
Card(
child: Row(
children: [
Text('image'),
Text("texts cdppdwpwdpwdpolumn"),
Text('quantity'),
Expanded(child: SizedBox()), //this is crucial- this keeps icon always at the end
Icon(Icons.delete)
],
),
),