Flutter: Row Alignment

Question

Good afternoon, everyone!

I’m starting now to learn to mess with flutter, and I’m having doubts about the alignment of the words underneath the Suspected and Investigated cards.

I would like to leave them centered as well as the word Suspicious in the center of the card. I wanted to do the same for the word Investigated. returning in a Gridview

What would be the correct method? Follow my code:

Container(
        padding: const EdgeInsets.all(2.0),
        width: 400,
        height: 30,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'Suspeitos',
              style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
            ),
            Text('Investigados',
                style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold))
          ],
        );

Answer 1

From what I understand, you want the line with the titles 'Suspects' and 'Investigated' to be aligned according to their respective cards. For this you can involve creating the cards in one Column which will contain the card + title.

As is best understood in practice, it would be something like the code below:

  Widget _buildBody() {
    return Row(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        _buildCardText('Suspeitos'),
        _buildCardText('Investigados'),
      ],
    );
  }

  Widget _buildCardText(String title) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 100,
              color: Colors.green,
              child: Center(
                child: Text(
                  '0',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            SizedBox(height: 10),
            Text(
              title,
              style: TextStyle(
                color: Colors.black,
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            )
          ],
        ),
      ),
    );
  }

Basically you own a Row that has two Column, where each contains a card + the title.

You will control the alignment of the title according to the crossAxisAlignment of Column, which by default aligns to the same center.

Upshot:

Online test with the Dartpad.