Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

                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)
                      ],
                    ),
                  ),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading