Search code examples
flutterdartflutter-layout

How can I fix an icon onto the right hand side of a Row?


Flutter Card

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,
                ),
              ]),
        ),

Solution

  • 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)
                          ],
                        ),
                      ),