CODEWITHSUNDEEP
flutter
Evan
Evan

Reputation: 880

Space text in row but only based on one child widget

So I want to create this:

|     12          5          300     |
|   monkeys    baboons   chimpanzees |

Basically, put the widgets in a Row and use mainAxisAlignment: MainAxisAlignment.spaceAround on the numbers. The problem is, the text is disrupting the spacing, and since 'chimpanzees' is longer, it causes the 5 baboons to be off center. What is the best way to have the spaceAround only align the numbers, then center the text underneath the numbers?

Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
        Column(
            children: <Widget>[
                Text('12'),
                Text('monkeys'),
            ],
        ),
        Column(
            children: <Widget>[
                Text('5'),
                Text('baboons'),
            ],
        ),
        Column(
            children: <Widget>[
                Text('300'),
                Text('chimpanzees'),
            ],
        ),
    ],
),

Upvotes: 0

Views: 42

Answers (2)

Parth Suthar
Parth Suthar

Reputation: 123

Try this

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

Upvotes: 0

Adlan Arif Zakaria
Adlan Arif Zakaria

Reputation: 1745

You can try to use Expanded() to have same width for the Row() children. No need to use spaceAround.

Row(
    children: <Widget>[
        Expanded(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Text('12'),
                    Text('monkeys'),
                ],
            ),
        ),
        Expanded(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Text('5'),
                    Text('baboons'),
                ],
            ),
        ),
        Expanded(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Text('300'),
                    Text('chimpanzees'),
                ],
            ),
        ),
    ],
),

Upvotes: 1

Related Questions