DevInspector
Inspecione qualquer widget em debug com um long press e copie o contexto direto pra IA.
O DevInspector é uma ferramenta exclusiva de debug: segure um widget por ~1 segundo e um painel abre com nome, arquivo, linha e propriedades. O botão Copiar para IA formata tudo numa mensagem que você cola no Claude ou Cursor: ele já sabe o que e onde mudar.
Só aparece em debug. Em produção, DevInspector.wrap() retorna o filho direto. Zero impacto.
Não confunda com o Device Preview. DevInspector identifica um widget na tela. Quem quiser simular o app em moldura de iPhone/iPad dentro do navegador (pra ver como fica em telas diferentes) quer o Device Preview, que é outra ferramenta, só na web.
Implementação
-
Se ainda não estiver ativo, ligue em Settings → Admin → Ferramentas → Dev Inspector (toggle). Disponível pra qualquer dev em debug, mesmo sem role admin.
-
Rode o app em debug (
kasy run). -
Segure qualquer widget por ~1 segundo. O painel abre com as informações do widget.
-
Toque em Copiar para IA e cole no chat.
Informações
O que aparece no painel
[DevInspector: Kit]
Widget: ElevatedButton
Arquivo: lib/features/auth/presentation/login_page.dart
Linha: 87
Propriedades:
- text: "Entrar"
- backgroundColor: Color(0xFF6750A4)
Contexto pai: Column > Padding > ElevatedButtonComo funciona por baixo
Usa o WidgetInspectorService do próprio Flutter DevTools para localizar o widget tocado. O screenshot é tirado automaticamente.
Estrutura no projeto
lib/core/dev_inspector/
├── dev_inspector.dart ← entry point
├── dev_inspector_overlay.dart ← captura o long press
├── dev_inspector_panel.dart ← bottom sheet com as infos
├── dev_inspector_service.dart ← chama o WidgetInspectorService
└── dev_inspector_clipboard.dart ← formata e copia pra IAAtualizado em 03/11/2026