Widgets de base

Existem várias centenas de widgets no framework, e o catálogo oficial é intimidador. A boa notícia é que um aplicativo real usa cerca de quinze deles o tempo todo, e esses valem a pena ser conhecidos a fundo em vez de apenas vistos por cima.

A distinção útil não é "widget simples" contra "widget avançado", mas widget de conteúdo contra widget de decoração contra widget de estrutura. Text e Image exibem algo. Container e Card revestem o que outros exibem. ListView organiza. Confundir as três famílias produz aquele código em escada que se vê em muitos projetos iniciantes: sete Container aninhados onde dois Padding bem posicionados bastariam.

Esta lição apresenta cada widget com os parâmetros realmente utilizados e destaca o que a documentação menciona discretamente: o Container que não assume o tamanho solicitado, o ListView que constrói mil itens de uma vez e derruba a taxa de quadros por segundo, o Image.network sem tratamento de erro que exibe um quadrado cinza quando a rede cai.

Text: o estilo vem do tema, não do widget

// O mais simples.
const Text('Bonjour')

// Com um estilo local. Note o `const`: nem a string nem o estilo
// mudam, então o compilador pode fixar o widget de uma vez por todas.
const Text(
  'Titre de section',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w600,
    color: Colors.black87,
  ),
)