Educação em programação
PAC·DART
Treinador de digitação que ensina Dart e Flutter com código de verdade, e um campeonato de corrida em 3D em que as palavras do Dart são o volante.
- Cliente
- Produto próprio da CG Mixart
- Categoria
- EdTech / jogo educativo
- Período
- jul–set 2026
- Estado
- Em produção
O problema
Quem aprende Dart e Flutter lê muito e digita pouco: o tutorial mostra o código pronto, a mão não decora a sintaxe e o primeiro app de verdade trava na primeira chave que falta. Treinador de digitação existe, mas com texto genérico; curso de Flutter existe, mas sem prática de teclado. Ninguém junta as duas coisas, e o jogo educativo que se propõe a isso costuma parar num quiz.
O que foi construído
Um app Flutter para web em que cada exercício é um trecho real de Dart: um Pac-Man marca o cursor, a indentação é comida sozinha e, ao terminar o trecho, ele compila e mostra a saída no console. Nos projetos Flutter a tela do app se monta ao vivo enquanto o código é digitado. São 32 trilhas, 336 lições e 2.354 exercícios, com teoria por lição, quiz e um tutor com IA, o Prof. Dash, que enxerga o trecho em estudo e responde no contexto. Em volta do curso, um Arcade com seis jogos e o Dart Turismo: um campeonato de 10 pistas em 3D real, com Three.js embutido num platform view, em que a palavra digitada escolhe a faixa e cada tecla certa é gás.
Decisões de engenharia
A palavra é o volante: Dart Turismo em 3D real
Campeonato de 10 pistas, de 4 a 12 km, em seis mundos: campina, deserto, cidade à noite, neve, vulcão e espaço. Dois modos de dirigir: digitação, em que a palavra de cada portal escolhe a faixa e toda tecla certa é gás, e setas, com controle clássico e botões na tela no celular. Tráfego que arranca quando o carro chega, batidas com física, fichas de código que valem moedas, quatro câmeras, carro-fantasma da melhor volta, medalhas por tempo derivadas de uma velocidade-alvo por pista e 12 troféus.
lib/features/arcade/domain/turismo.dart:88-97 (PistaGt 1 a 10, distancia 4000 a 12000, tema 1 a 6, velAlvo 60 a 150); :181 (enum ModoControle { digitacao, setas }); lib/features/arcade/domain/progresso_turismo.dart:414-420 (camerasGt: perseguição, capô, cinema, helicóptero), :96 (trofeusGt, 12 itens); web/turismo3d/turismo3d.js:29-33 (5 carros glTF), :1175 (fantasma da melhor volta)
Motor em Dart, cena em JavaScript, testado sem tela
A física, a pista gerada por semente, os portais e a pontuação vivem num motor Dart puro, coberto por teste sem abrir tela nenhuma. A cena Three.js recebe só o estado a cada frame, então o jogo continua igual fora da web. Antes da primeira corrida um benchmark de cerca de 0,3 s mede a GPU e escolhe um de três níveis de qualidade, e o tutorial abre sozinho na primeira largada.
lib/features/arcade/domain/turismo.dart:333 (TurismoEngine), :465 (_gerarPista); test/turismo_test.dart; web/turismo3d/turismo3d.js:65-96 (benchmark da GPU, níveis alta, leve e mínima)
Prévia ao vivo: o app se monta enquanto o código é digitado
Nos 30 projetos Flutter do curso, a tela do app aparece renderizada conforme o trecho vai sendo digitado, sem compilar nada: um motor de prévia com 32 regras interpreta o código e monta o widget. Há teste de que a prévia nunca fica em branco e de cobertura das regras.
assets/master.json (lista de 30 itens com cod, out e flutter); lib/features/preview/demos/demos.dart:28 (_regras, 32 _Regra); test/previa_viva_test.dart, test/previa_sem_branco_test.dart, test/preview_cobertura_test.dart, test/preview_engine_test.dart
Tutor que enxerga o trecho: Prof. Dash com Gemini
O tutor recebe a lição e o trecho exato em que o aluno está e responde no contexto, com atalhos como 'o que esse trecho faz' e 'explica como se eu tivesse 10 anos'. O modelo só é criado na primeira pergunta e a chave da API nunca fica no código: é lida do Firestore em runtime. No Turismo, a mesma IA vira engenheira de pista, lê a telemetria da corrida e comenta no rádio ao final.
lib/features/tutor/; lib/main.dart:112 (modelo criado na primeira pergunta); lib/core/voz/voz_natural.dart:10 (chave buscada do Firestore); lib/features/arcade/data/engenheiro_gt.dart:191
Prova visual sem login
Para fotografar e testar o curso sem conta, um segundo ponto de entrada sobe o app com usuário, progresso e tutor de mentira; outro sobe só o Arcade sem Firebase. O Playwright liga a acessibilidade do canvas do Flutter e passa a clicar por nome de botão. Foi assim que saíram os prints desta página e as provas de que o voo da bola e a pausa funcionam.
lib/main_portfolio_probe.dart:2; lib/main_arcade_probe.dart; ESTADO-DO-PROJETO.md:209-217 (receita: flutter build web -t lib/main_arcade_probe.dart, flt-semantics-placeholder)
Stack
Telas
O papel da CG Mixart
Único desenvolvedor: conceito, currículo, motor de digitação e de prévia, o campeonato em Dart e a cena Three.js, as integrações com Gemini e Firebase, os testes e o deploy.
Ressalvas e notas técnicas, verificadas no códigoabrir
Produto próprio, com código público em github.com/carlosdesenvolvedor/pac_dart (30 commits, de julho a setembro de 2026). Os prints desta página saíram de um ponto de entrada de prova (lib/main_portfolio_probe.dart) com usuário e tutor de mentira, para fotografar o curso sem login; a receita está em ESTADO-DO-PROJETO.md. Testes: 191 no flutter test; um teste de tela do Dart Turismo é intermitente (falhou em uma de duas rodadas no mesmo dia). Os prints e a interface do app usam os tokens do design system da mixart (lib/core/theme/mixart.dart), por isso a paleta deste caso é a mesma do caso mixart. Assets do Dart Turismo com licença aberta: carros 3D por Lexyc16 (Sketchfab, CC BY 4.0); céus HDRI, texturas, rochas e arbustos do Poly Haven (CC0); fachadas dos prédios do ambientCG (CC0); músicas de Kevin MacLeod, incompetech.com (CC BY 4.0); som de motor e pneu do OpenGameArt (CC BY 3.0); motor 3D three.js (MIT).