Column
Column
é um widget de layout no Flutter que organiza seus filhos verticalmente, ao longo do eixo principal, que é vertical. Cada filho do Column
é um widget que ocupa um pedaço vertical do espaço disponível.
Aqui está um exemplo simples de como usar um Column
:
Column(
children: <Widget>[
Icon(Icons.star),
Text('Texto abaixo do ícone'),
],
)
Neste exemplo, o Column
possui dois filhos: um ícone e um texto. Eles são organizados verticalmente, 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 Column
ao longo do eixo principal (vertical no caso do Column
).
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.star),
Text('Texto abaixo do ícone'),
],
)
Neste exemplo, spaceEvenly
faz com que os filhos sejam distribuídos uniformemente ao longo do Column
.
2. CrossAxisAlignment:
A propriedade crossAxisAlignment
controla o alinhamento dos filhos do Column
ao longo do eixo transversal (horizontal no caso do Column
).
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.star),
Text('Texto abaixo do ícone'),
],
)
Neste exemplo, center
alinha os filhos horizontalmente no centro do Column
.
3. MainAxisAlignment e CrossAxisAlignment Juntos:
Você também pode usar ambas as propriedades juntas para controle preciso do alinhamento em ambos os eixos.
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.star),
Text('Texto abaixo do ícone'),
],
)
Neste exemplo, spaceBetween
distribui os filhos verticalmente e center
os alinha horizontalmente no centro.
Uso de Expanded:
O widget Expanded
é frequentemente usado dentro de um Column
para fazer com que um dos filhos ocupe todo o espaço disponível no eixo principal.
Column(
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 vertical restante no Column
.
O Column
é uma ferramenta poderosa para criar layouts verticais 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.