CODEWITHSUNDEEP
androidflutterdartflutter-layout
iocomxda
iocomxda

Reputation: 103

How to SpaceEvenly and Resize two items in a Row?

I am trying to spaceevenly an Icon() and a AutoSizeText() in a Row(). When the amount is long as you can see in the attached images it renders as expected, but when the amount is zero or pretty short, the AutoSizeText() is being centered, but this causes that the same distance from the edges is no longer maintained. There is an extra distance caused by the centering. I do not know how to fix this.

Edit. If it wasn't clear, I'm referring to the pink shopping bag icon and the amount showed in the "Riepilogo Settimanale" section. If you look at the Restaurant Icon and its amount, you can notice how they are not centered, they are closer to the left edge.

orginal view

enter image description here

Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      width: size.width * 0.3,
      height: size.height,
      // height: size.height * 0.055,
      child: Row(
        children: [
          Spacer(),
          Expanded(
            flex: 3,
            child: Container(
              child: LayoutBuilder(
                builder: (context, constraint) {
                  return Icon(
                    icona,
                    color: colore,
                    size: constraint.biggest.width * 1,
                  );
                },
              ),
            ),
          ),
          Spacer(),
          Expanded(
            flex: 6,
            child: Center(
              child: AutoSizeText(
                importo,
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: colore,
                ),
                maxLines: 1,
              ),
            ),
          ),
          Spacer(),
        ],
      ),
    )

Upvotes: 0

Views: 83

Answers (1)

WSBT
WSBT

Reputation: 36373

If I understood you correctly, you want to right-align the text, not center them.

To achieve that, consider using a single Spacer() in-between the icon and the text. The outside spacing (margin and padding) can be done using Padding widget instead.

Upvotes: 1

Related Questions