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

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

CodePudding user response：

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

CodePudding user response：

You can try to put Spacer between your quantity text widget and icon widget to align your icon widget to far right. For further information you need to include your code to your post.

CodePudding user response：

Either add a relative space between icon and the text or, wrap the icon on the right and everything on the left inside another row and use mainAxisAlignment as spaceBetween

CodePudding user response：

Change your last widgets in row to this:

Expanded(
                    child: Text("x"   quantity.toString(),
                        style:
                            const TextStyle(color: Colors.black, fontSize: 20),
                        textAlign: TextAlign.start),
                  ),
                  const SizedBox(width: 20),
                  Padding(
                    padding: const EdgeInsets.only(right: 16.0),
                    child: GFIconButton(
                      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,
                    ),
                  ),