Storyboard

O Storyboard é um canvas com miniaturas vivas de todas as telas do seu app e das navegações entre elas. Você vê o app inteiro de uma vez, abre qualquer tela com um clique e, com o Copiar para IA, diz ao assistente exatamente qual tela quer mudar.

Só aparece em debug. Em produção ele não existe.

ImplementaçãoCopiar link da âncora

1. Rode o app em debug na web (kasy run --web). O Storyboard abre pela barra do preview do dispositivo, que só existe na web.
2. Abra o Storyboard pelo botão na barra do preview do dispositivo.
3. Use a busca para achar uma tela por nome ou rota. Dois cliques abrem a tela no app.
4. Selecione uma tela e toque em Copiar para IA. Cole no chat do assistente.

O texto copiado tem a tela, a rota, o widget e a seção, por exemplo:

Contexto do Storyboard (Kasy)
Tela: Login por telefone
Rota: /signinWithPhone
Widget: PhoneAuthPage
Seção: Entrada e login

5. Depois que a IA mexer no código, toque em Recarregar. Ele faz o mesmo hot reload do r e remonta as telas, então você vê ao vivo o que mudou.

Pedir para a IA organizar o mapaCopiar link da âncora

Tudo que é apresentação fica em lib/core/storyboard/storyboard_registry.dart. Peça, por exemplo:

• "Renomeia a tela /pedidos para Meus pedidos no Storyboard."
• "Coloca as telas de checkout numa seção só."
• "Adiciona uma seta de Carrinho para Pagamento com o rótulo Finalizar compra."

Regra das setas: só existe seta para um botão ou link que realmente existe no código da tela. Seta inventada engana quem lê o mapa.

InformaçõesCopiar link da âncora

Como as telas são agrupadasCopiar link da âncora

• As abas do app viram a seção Abas do app, e as telas do /admin vão para o Console admin.
• Rotas com o mesmo primeiro trecho viram uma seção (/pedidos e /pedidos/detalhe formam "Pedidos").
• Uma tela nova e isolada fica em Suas telas.
• Rota aninhada gera a seta de sub-tela sozinha.

Cada tela aparece uma vezCopiar link da âncora

Quando duas rotas abrem a mesma tela (por exemplo, o Feedback das Configurações e o do console admin), o Storyboard mostra um card só. Os caminhos continuam no mapa: as setas que levavam à rota repetida apontam para esse card.

• É automático quando as duas rotas abrem a mesma classe de página (FeedbackPage, por exemplo).
• Se a mesma tela aparece embrulhada de outro jeito, a IA marca a rota no registro com aliasOf.
• Se uma rota abre a mesma página com um conteúdo bem diferente e você quer ver as duas, a IA marca showSeparately.
• Uma rota que mostra telas diferentes conforme o parâmetro (como os paywalls) vira um card por variante com variants.

SetasCopiar link da âncora

• Navegação: curadas no storyboard_registry.dart.
• Sub-tela: automática, de rotas aninhadas.
• Aprendida no uso: enquanto você usa o app, o Storyboard anota "tela A levou à tela B" e desenha uma seta tracejada. O botão Limpar apaga o que foi aprendido.

Telas com parâmetros e dados de exemploCopiar link da âncora

Uma rota como /drive/ride/:rideId precisa de um valor para renderizar. O registro aceita um sampleLocation (por exemplo /drive/ride/preview) e o app usa o valor preview (kStoryboardPreviewParam) para mostrar dados de exemplo só em debug. Telas de login aparecem como Visitante para não serem desviadas quando você já está logado.

Desempenho e zoomCopiar link da âncora

Ao abrir, o mapa foca na seção Entrada e login (não no projeto inteiro). Longe no zoom, os cards ficam leves (título e rota); ao aproximar, todas as telas visíveis carregam ao vivo, uma por vez (spinner), sem guardar imagens. Setas vistas no uso ficam ocultas por padrão (ligue na barra se quiser).

Cada miniatura é a tela de verdadeCopiar link da âncora

Cada card roda a própria rota num app isolado, com o mesmo tema e idioma. A tela selecionada e as que estão à vista com zoom rodam ao vivo; o resto vira uma foto da própria tela, para o mapa ficar leve. Chegue perto ou selecione a tela para ela voltar a rodar ao vivo.

Atualizado em 03/11/2026