Flet Multi-Step Wizard — Modern UI Template

Template moderno de wizard multi-step em Python com Flet, pensado para quem quer sair do “funciona” e chegar no “isso aqui parece produto”.

Não é sobre criar um formulário em etapas.
É sobre fazer isso com estado previsível, transições reais e UI que não parece improviso.

O que você vai perceber de cara

• A navegação entre etapas é fluida
• O estado não “some” quando você troca de tela
• A interface responde como um app de verdade, não como um script Python com botões

O problema real que isso resolve

Construir um wizard parece simples… até não ser.

Você começa com:

• um campo de nome
• um botão “próximo”
• um contador de etapa

E quando percebe:

• o valor digitado some ao trocar de step
• a sidebar não atualiza quando deveria
• a animação simplesmente não acontece
• você começa a espalhar atualização manual tentando “forçar” a UI

Nada quebra completamente… mas tudo fica instável.

Esse projeto nasce exatamente desse ponto.

Como isso foi resolvido

Estado que realmente reage

O estado da aplicação não fica perdido em variáveis soltas.

Ele vira um centro de controle único, que qualquer parte da interface pode observar.

Resultado prático:

• você altera um valor → a interface reflete automaticamente
• a sidebar acompanha o progresso sem intervenção manual
• o fluxo deixa de ser imperativo e vira previsível

Estado local vs estado global

Dentro de um campo de input, existe um detalhe que muita gente ignora:

• o valor precisa atualizar na hora
• mas também precisa existir fora daquele componente

Esse projeto usa os dois ao mesmo tempo.

E é exatamente isso que impede:

• campo travando
• valor sumindo ao navegar
• inconsistência entre tela e dados

Transição que realmente funciona

Trocar conteúdo não significa que a UI entende que precisa animar.

Sem isso, o comportamento é seco:

• um step some
• outro aparece

Aqui, cada etapa é tratada como uma entidade própria.
E isso faz com que a transição exista de verdade.

Async sem travar a interface

O botão final simula uma ação real:

• loading aparece
• interface continua responsiva
• depois o fluxo segue

Nada de travamento.

UI não é detalhe aqui

Esse projeto não tenta ser minimalista.
Ele tenta parecer real.

• sidebar com progresso animado
• indicadores visuais de etapa
• seleção de tema com preview
• feedback imediato em cada ação

O Step3 não está ali para ensinar.

Ele está ali para responder:

“isso aqui daria pra virar um produto?”

Por que isso importa

Se você já tentou montar interface com Flet, provavelmente esbarrou em algum desses pontos:

• quando atualizar a UI
• onde guardar estado
• por que algo não re-renderiza
• por que a animação não dispara

Esse projeto não tenta cobrir tudo.

Mas resolve o suficiente para você parar de brigar com o básico
e começar a construir coisa séria.

🔗 Código

*Adapte como queira.

O importante é não voltar para o caos depois de entender esse fluxo.