CODEWITHSUNDEEP
flutterdartalignmentrow
Simon
Simon

Reputation: 75

Flutter is it possible to align items in each row the same?

I'm learning how to make apps and I'm looking to align the items in the rows all the same, no mather how long the text gets. The first picture is what i already got, and the second picture is how i would like the items in the rows to be aligned. https://i.sstatic.net/aEB5P.jpg (each drink is a card with a row) Thanks in advance!

return Card(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(name),
          Text(amount.toString()),
          IconButton(
            onPressed: () {
              order.add(name);
              setState(() {
                orderAmounts = orderAmounts;
              });
              print(order);
            },
            icon: Icon(Icons.exposure_plus_1),
          ),
          IconButton(
            onPressed: () {
              order.remove(name);
              setState(() {
                orderAmounts = orderAmounts;
              });
              print(order);
            },
            icon: Icon(Icons.exposure_neg_1),
          ),
        ],
      ),
    );

Upvotes: 0

Views: 1408

Answers (1)

Tonny Bawembye
Tonny Bawembye

Reputation: 576

I think the best way for you to do this is to use a Flexible widget.

You will wrap each of the children in the row in a flexible widget and provide fit: FlexFit.tight by default each flexible widget will have a flex: 1.

So in that way each of the children in the row will cover equal space no matter the size. Or you can decide to make some take up bigger space by increasing their flex which must be a whole number.
eg. flex: 2 means will will cover twice as much as other children.

Expanded can also achieve the same. though i recommend Flexible.

Upvotes: 1

Related Questions