Row
Row é um widget de layout no Flutter que organiza seus filhos horizontalmente, de acordo com o eixo principal, que é horizontal. Cada filho do Row é um widget que ocupa um pedaço horizontal do espaço disponível.
Aqui está um exemplo simples de como usar um Row:
Row(
children: <Widget>[
Icon(Icons.star),
Text('Texto ao lado do ícone'),
],
)
Neste exemplo, o Row possui dois filhos: um ícone e um texto. Eles são colocados lado a lado na ordem em que aparecem dentro da lista de children.
Alinhamento e Espaçamento:
1. MainAxisAlignment:
A propriedade mainAxisAlignment controla o alinhamento dos filhos do Row ao longo do eixo principal (horizontal no caso do Row).
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.star),
Text('Texto ao lado do ícone'),
],
)
No exemplo acima, spaceEvenly faz com que os filhos sejam distribuídos uniformemente ao longo do Row.
2. CrossAxisAlignment:
A propriedade crossAxisAlignment controla o alinhamento dos filhos do Row ao longo do eixo transversal (vertical no caso do Row).
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.star),
Text('Texto ao lado do ícone'),
],
)
Neste exemplo, center alinha os filhos verticalmente no centro do Row.
3. MainAxisAlignment e CrossAxisAlignment Juntos:
Você também pode usar ambas as propriedades juntas para controle preciso do alinhamento em ambos os eixos.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.star),
Text('Texto ao lado do ícone'),
],
)
Neste exemplo, spaceBetween distribui os filhos horizontalmente e center os alinha verticalmente no centro.
Uso de Expanded:
O widget Expanded é frequentemente usado dentro de um Row para fazer com que um dos filhos ocupe todo o espaço disponível no eixo principal.
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
child: Text('Widget Expandido'),
),
),
Icon(Icons.star),
],
)
Neste exemplo, o Container dentro do Expanded ocupará todo o espaço horizontal restante no Row.
O Row é uma ferramenta poderosa para criar layouts horizontais em Flutter, especialmente quando combinado com outras propriedades e widgets. Experimente diferentes combinações de alinhamentos, espaçamentos e Expanded para criar layouts personalizados para suas necessidades.
