Flutter: Row Alignment

Asked

Viewed 1,701 times

-2

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))
          ],
        );

inserir a descrição da imagem aqui

1 answer

0


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:

Resultado

Online test with the Dartpad.

  • Very good guy thanks, however the way you taught me, it creates one on the other side if I pass more parameters in the function for example _buildCardText('Suspects'), _buildCardText('Investigated'), it creates one next to the other there if I pass again for example 3 times buildCardText('Suspects'), _buildCardText('Investigated'), _buildCardText('Confirmed'), he keeps stacking one side to the other and I needed him to get the cards on the other side passed more vestments he keeps creating on the bottom in a new Row

  • would be in case return in a gridview in that code

  • 1

    But that’s not what your original question was asking, you didn’t mention there were more cards. Well, in that case, just use the Gridview https://api.flutter.dev/flutter/widgets/GridView-class.htmlwidget

  • Got friend thanks followed the link and a video on youtube about the Gridview obliged

  • @If Victor helped you, could mark the answer as accepted. ;)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.