1
resposta

[Dúvida] Uso do expanded no column

Vimos que o Expanded() também pode definir o tamanho ou limites máximos de columns e rows (Me corrija se estiver errado).

Nesse caso, antes de usar o CustomScrollView(), ainda quando estavamos testando com o Column() na página de highlights. Daria erro de View caso usássemos o Expanded() no Column() para limitar o tamanho do ListView()?

1 resposta

Olá, Cauê, tudo bem?

Sobre o que você comentou: “Vimos que o Expanded() também pode definir o tamanho ou limites máximos de Column e Row.”

Na verdade, o Expanded() não define diretamente os limites de uma Column ou Row, mas sim de um dos seus filhos. O que ele faz é indicar que aquele filho deve ocupar todo o espaço restante disponível dentro do eixo principal da Column ou do Row. Então, ele não limita diretamente o tamanho da Column ou Row, mas sim dos widgets filhos dentro delas.

Agora, respondendo à sua dúvida sobre o uso de Expanded() com ListView() dentro de uma Column(), como foi o caso antes de usarmos o CustomScrollView() na tela de highlights:

Sim, daria erro se a gente colocasse um ListView() diretamente dentro de uma Column() sem usar algo que limitasse sua altura, como o Expanded().

Esse erro aconteceria porque o ListView() tenta ocupar o máximo de espaço possível, e como a Column() não impõe limite de altura aos seus filhos, o Flutter se perde tentando renderizar algo com tamanho “infinito”, o que causa um erro do tipo: Vertical viewport was given unbounded height.

Nesse caso, envolver o ListView() com um Expanded() é uma solução válida, pois ele diz ao Flutter: “Pode usar o espaço que sobrar aqui”, o que resolve o problema e deixa o layout funcional.

E além do Expanded, vale dizer que há outras formas corretas de limitar o tamanho do ListView dentro de uma Column(). Você pode, por exemplo, usar:

  • Flexible, quando quiser que ele ocupe o espaço restante, mas de forma mais flexível;
  • SizedBox, se quiser definir uma altura exata ou proporcional (ex: height: MediaQuery.of(context).size.height * 0.6).

Espero ter esclarecido!

Conteúdos relacionados

Os links acima estão em inglês, mas vale a pena utilizar a tradução automática do navegador, caso se sinta mais confortável. A documentação do Flutter é de fácil leitura e bem intuitiva

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!