Como você constrói UIs responsivas e adaptativas no Flutter?

Question

Accepted Answer

Aplicativos Flutter rodam em muitos tamanhos de tela (telefones, tablets, web, desktop), então construir UIs **responsivas** (adaptando-se ao tamanho) e **adaptativas** (adaptando-se à plataforma) é importante. Flutter oferece ferramentas como **MediaQuery**, **LayoutBuilder** e widgets flexíveis para isso.

## Responsiva: adaptando-se ao tamanho da tela

```dart
// MediaQuery — get screen dimensions and adapt
final width = MediaQuery.of(context).size.width;
if (width > 600) {
  // tablet/desktop layout (e.g. side-by-side)
} else {
  // phone layout (e.g. stacked)
}

// LayoutBuilder — adapt based on the available space (parent constraints)
LayoutBuilder(builder: (context, constraints) {
  if (constraints.maxWidth > 600) return WideLayout();
  return NarrowLayout();
})
```

## Widgets de layout flexível

```text
✓ EXPANDED / FLEXIBLE → children share available space proportionally
✓ FractionallySizedBox → size relative to the parent
✓ Wrap → flow children to the next line when out of space
✓ AspectRatio, FittedBox → maintain ratios / fit content
✓ Avoid hardcoded sizes; use flexible/relative sizing for responsiveness
```

## Adaptativa: adaptando-se à plataforma

```text
→ ADAPTIVE = adjust to the PLATFORM (iOS vs Android vs web/desktop):
  → platform-appropriate widgets (Material vs Cupertino), navigation, conventions
  → e.g. .adaptive constructors (Switch.adaptive); check the platform
→ RESPONSIVE = adjust to SCREEN SIZE; ADAPTIVE = adjust to PLATFORM/device type
```

## Padrões

```text
✓ Breakpoints (e.g. <600 phone, 600-1200 tablet, >1200 desktop) → different layouts
✓ Different layouts for phone vs tablet (e.g. master-detail on tablet)
✓ OrientationBuilder → adapt to portrait/landscape
✓ SafeArea → avoid notches/system UI; test on multiple sizes
```

## Por que isso importa

Entender como construir UIs responsivas e adaptativas é importante porque **aplicativos Flutter rodam em diversos tamanhos de tela e plataformas** (telefones, tablets, web, desktop), e as UIs devem funcionar bem em todos eles, portanto é conhecimento prático valioso.

Como a base de código única do Flutter visa muitos fatores de forma, construir UIs que **se adaptem a diferentes tamanhos de tela (responsiva)** e **diferentes plataformas (adaptativa)** é uma preocupação real e importante — um layout projetado apenas para telefone fica ruim em um tablet ou desktop.

Entender **técnicas responsivas** — **MediaQuery** (obtendo dimensões da tela para adaptar layouts), **LayoutBuilder** (adaptando com base no espaço/restrições disponíveis) e **widgets de layout flexível** (Expanded/Flexible para compartilhamento proporcional de espaço, Wrap para conteúdo fluindo, evitando tamanhos codificados em favor de dimensionamento flexível/relativo) — é necessário para layouts que se ajustem graciosamente ao tamanho da tela.

Entender a dimensão **adaptativa** (ajustando-se à plataforma — usando widgets apropriados da plataforma como Material vs Cupertino, convenções e construtores `.adaptive`) aborda a criação de aplicativos que se sentem nativos em cada plataforma.

Entender a **distinção** (responsiva = adaptar ao tamanho da tela; adaptativa = adaptar à plataforma/tipo de dispositivo) esclarece essas preocupações relacionadas.

Conhecer **padrões** comuns (pontos de quebra para diferentes layouts, layouts distintos de telefone/tablet como master-detail, OrientationBuilder para orientação, SafeArea para entalhos, e testes em múltiplos tamanhos) reflete design responsivo prático.

Como aplicativos Flutter visam dispositivos diversos e devem funcionar bem em todos eles (um benefício-chave e desafio do desenvolvimento multiplataforma), e como técnicas responsivas/adaptativas (MediaQuery, LayoutBuilder, widgets flexíveis, pontos de quebra, adaptação de plataforma) são como você consegue isso, entender UI responsiva e adaptativa no Flutter é conhecimento valioso e praticamente relevante para construir aplicativos que funcionem bem em todos os muitos tamanhos de tela e plataformas que Flutter visa, uma consideração importante para entregar boas experiências em todos os dispositivos.