Por que a linha não está horizontalmente centrada dentro de uma coluna

Aug 17 2020

Como sabemos por padrão, Coluna centraliza horizontalmente seus filhos se tiver largura total. Mas quando coloquei duas cartas e uma linha dentro de uma coluna, duas cartas são colocadas horizontalmente no centro por vibração, mas a linha permanece a mesma em sua posição inicial? Por quê?
Acho que row deve ser horizontalmente centralizado porque é filho de Column no meu caso, mas não é.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Container(
        color: Colors.purple,
        height: double.infinity,
        child: Column(
          //  mainAxisAlignment: MainAxisAlignment.center,
          //  crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: Text(
                'Chart',
                style: TextStyle(fontSize: 20.0),
              ),
              elevation: 5,
              color: Colors.blue,
            ),
            Card(
              child: Text(
                'list of tx',
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
              color: Colors.purple,
            ),
            Row(
              children: [
                Text('this is row'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}



saída deste código

Respostas

1 Uni Aug 17 2020 at 16:14

Isso está acontecendo porque, por padrão, Row ocupará todo o espaço horizontal. Você pode consertar dizendo para ocupar o mínimo de espaço possível:

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)

Definir o mainAxisAlignmentda linha como MainAxisAlignment.centerfuncionará apenas se houver um widget dentro da linha. Ele apenas diz a seus filhos para irem ao centro.

2 faroukosama Aug 17 2020 at 16:17

Por padrão, a mainAxisSizepropriedade está MainAxisSize.maxno widget de linha , o que você precisa fazer é apenas alterá-lo para MainAxisSize.min, para afetar pelo widget pai, que neste exemplo é a coluna

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)
1 Yash Aug 17 2020 at 16:08

Tente passar o mainAxisAlignmentargumento para sua linha. Por exemplo

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    ...
)

Isso fará com que os filhos da Linha sejam centralizados.