Screen
Por que importa
screen Nome: é a unidade navegável da DSL. Cada tela organiza conteúdo, conecta fluxos e serve como destino para botões, links ou navegadores. Estruturar telas corretamente garante navegação previsível e manutenção simples.
Forma canônica (sintaxe mínima)
Tela com container principal
Por quê: define uma tela com layout centralizado e hierarquia textual básica.
Padrões de uso
Screen com fluxos complementares
Quando usar: acionar modais a partir da tela principal sem perder contexto. Por quê: mantém foco na tarefa atual enquanto resolve ações complementares.
Screen com múltiplos containers
Quando usar: combinar colunas diferentes na mesma tela mantendo alinhamento consistente. Por quê: distribui o conteúdo em zonas claras (visualização ampla x ações complementares).
Screen com navigator persistente
Quando usar: replicar menu inferior em todas as telas do grupo. Por quê: promove navegação previsível entre seções irmãs.
Erros comuns (Do/Don’t)
Não faça — declarar telas com o mesmo nome
Faça — escolha nomes únicos
✅ Correto — Nomes distintos
Por quê: slugs duplicados quebram navegação e confundem acionadores.
❌ Errado — Conteúdo solto
✅ Correto — Uso de container
Por quê: layouts (container, stack, card) controlam largura, espaçamento e responsividade.
Referências cruzadas
Relacionados
Navigator: organiza menus que apontam para diferentes screens.Modal: complementa telas com confirmações e formulários rápidos.Drawer: oferece painéis laterais dentro da mesma tela.Container: layout principal aplicado dentro de screens.
Composições recomendadas
- Screen + Container → base para qualquer conteúdo navegável.
- Screen + Modal/Drawer → fluxos complementares sem trocar de tela.
- Screen + Navigator → navegação persistente entre seções principais.