O que são widgets no Flutter?

Question

Accepted Answer

No Flutter, **tudo é um widget** — elementos de UI (botões, texto, imagens), estruturas de layout (linhas, colunas, preenchimento) e até o próprio app são todos widgets. Widgets são os blocos de construção imutáveis que se compõem para formar toda a interface do usuário.

## Tudo é um widget

```text
Widgets describe the UI. EVERYTHING is a widget:
  → visible elements: Text, Image, Icon, Button, etc.
  → layout: Row, Column, Container, Padding, Center, Stack, etc.
  → structure: Scaffold (page structure), AppBar, etc.
  → even the app itself (MaterialApp) and abstract things (Padding, Theme)
→ You build UI by COMPOSING widgets into a tree (widgets contain other widgets).
```

## Composição de widgets em uma árvore

```dart
// build a UI by NESTING widgets (composition)
Scaffold(                       // page structure
  appBar: AppBar(title: Text('Home')),   // app bar with text
  body: Center(                 // centers its child
    child: Column(              // vertical layout
      children: [
        Text('Hello'),          // text widget
        ElevatedButton(         // a button
          onPressed: () {},
          child: Text('Click'),
        ),
      ],
    ),
  ),
)
// → a WIDGET TREE: Scaffold > Center > Column > [Text, Button]
```

Widgets se aninham para formar uma **árvore de widgets** — composição é o padrão principal (combinar widgets simples em UIs complexas).

## Widgets são imutáveis; configuração

```text
→ Widgets are IMMUTABLE descriptions of the UI (configuration, not the actual rendered
  objects) — Flutter rebuilds them efficiently when state changes
→ build() methods return widget trees describing what the UI should look like
→ Flutter handles efficiently turning widgets into rendered pixels
```

## Por que isso importa

Entender widgets é fundamental no Flutter porque **tudo no Flutter é um widget** — toda a UI é construída a partir deles — então compreender o modelo de widget é conhecimento essencial e fundamental para qualquer desenvolvimento em Flutter.

O conceito principal — que elementos visíveis (texto, botões, imagens), estruturas de layout (linhas, colunas, preenchimento), estrutura de página e até o próprio app são **todos widgets** — é a característica que define como o Flutter funciona, e entender isso é o ponto de partida para construir qualquer UI no Flutter.

Entender que UIs são construídas **compondo widgets em uma árvore** (aninhando widgets, combinando simples em interfaces complexas) é o padrão fundamental do desenvolvimento em Flutter — composição em vez de herança, construindo UIs complexas a partir de blocos simples e reutilizáveis.

Entender que **widgets são descrições imutáveis** da UI (configuração em vez dos objetos realmente renderizados, com Flutter reconstruindo-os eficientemente quando o estado muda) é importante para entender como funciona o modelo declarativo de UI do Flutter — você descreve como a UI deve parecer e o Flutter cuida da renderização de forma eficiente.

Este modelo de widget e composição fundamenta tudo no Flutter: layouts, estilo, gerenciamento de estado e estrutura funcionam através de widgets.

Como o widget é a unidade atômica do Flutter (tudo é um widget, UIs são árvores de widgets construídas por composição) e entender este modelo é a base absoluta para construir UIs no Flutter, entender widgets — que tudo é um widget, composição em árvores e sua natureza declarativa imutável — é conhecimento essencial e fundamental do Flutter, o conceito central sobre o qual todo aspecto do desenvolvimento em Flutter se baseia e a primeira coisa a entender ao aprender Flutter.