Construa interfaces lindas e responsivas
com Flutter e widgets na prática
Aqui você aprende a transformar ideias em telas reais. Domine widgets, layouts, navegação e animações para criar apps que parecem profissionais mesmo sendo seus primeiros projetos.
Carga horária estimada: 28 aulas · 32h com exemplos guiados, desafios visuais e construção de telas completas.
O que você sai sabendo após o Módulo 3
O objetivo é que você consiga montar telas completas em Flutter com segurança: pensando em layout, navegação, responsividade e experiência do usuário.
Widgets básicos e compostos
Entender a diferença entre widgets stateless e stateful, aprender a combinar widgets básicos (Text, Icon, Image, Row, Column, Container, etc.) e criar componentes reutilizáveis que organizam melhor o seu código.
Layouts responsivos com Flex e Grid
Usar Row, Column, Expanded, Flexible e widgets de alinhamento para montar telas que se adaptam bem a diferentes tamanhos de aparelho, além de listas e grades com ListView, GridView e SingleChildScrollView.
Navegação entre telas e fluxo do app
Entender o Navigator, rotas nomeadas, passagem de parâmetros entre telas e padrões de navegação usados no dia a dia (bottom navigation, drawers e telas de detalhe), criando uma experiência fluida para o usuário.
Temas, cores e tipografia
Configurar ThemeData, trabalhar com cores, espaçamentos e tipografia para criar uma identidade visual consistente, além de preparar o terreno para modo claro/escuro e reutilização de estilos.
Animações e microinterações
Criar animações simples com AnimatedContainer, AnimatedOpacity e transições de tela com PageRouteBuilder, entendendo como pequenos detalhes de movimento deixam o app com sensação de produto premium.
Arquitetura visual organizada
Separar telas, componentes e temas em pastas bem definidas, deixando o projeto pronto para crescer sem virar bagunça quando você conectar o back-end e o gerenciamento de estado nos módulos seguintes.
Acessibilidade e UX básica
Entender boas práticas simples de acessibilidade (tamanhos de toque, contraste, textos alternativos) e UX para que seus primeiros apps já nasçam mais agradáveis de usar.
Usando IA para criar UIs em Flutter
Aprender a pedir para a IA gerar rascunhos de telas em Flutter, refatorar layouts confusos e sugerir melhorias visuais — sempre analisando o código gerado e adaptando ao contexto do seu projeto.
Como o Módulo 3 está organizado
Bloco 1 · Fundamentos de UI no Flutter
- Revisão rápida de Dart focada em UI
- Estrutura de um app Flutter e MaterialApp
- Widgets básicos: Text, Icon, Image, Button, etc.
- Primeira tela completa construída passo a passo
Bloco 2 · Layouts com Flex, Listas e Grades
- Row, Column, Expanded, Flexible e alinhamentos
- Scroll com SingleChildScrollView
- ListView, GridView e itens customizados
- Mini projeto: tela de listagem de produtos/tarefas
Bloco 3 · Navegação e fluxo entre telas
- Navigator.push, pop e rotas nomeadas
- Passando dados entre telas e retornando resultados
- BottomNavigationBar, Drawer e telas de detalhe
- Mini projeto: app multi-telas com fluxo completo
Bloco 4 · Temas, estilos e identidade visual
- ThemeData, cores personalizadas e tipografia
- Componentização de botões, cards e inputs
- Preparando o app para modo claro/escuro
- Mini projeto: guia de estilos do seu app
Bloco 5 · Animações e microinterações
- AnimatedContainer, AnimatedOpacity e AnimatedAlign
- Transições entre telas com animações personalizadas
- Feedback visual em toques, erros e carregamentos
- Mini projeto: tela com animações sutis de UX
Bloco 6 · Organização visual para crescer
- Estruturando pastas por features ou camadas de UI
- Separando widgets em arquivos reutilizáveis
- Preparando o projeto para o gerenciamento de estado
- Checklist de qualidade visual antes de seguir para o Módulo 4
O que você constrói neste módulo
Este módulo é sobre ver o app ganhar forma na tela. Você sai com interfaces prontas para receber dados reais dos próximos módulos.
- Uma tela inicial completa com cabeçalho, listas, cards e ações.
- Um fluxo multi-telas (lista → detalhe → confirmação) usando Navigator.
- Uma tela com animações sutis e microinterações de UX.
- Um mini guia de estilos (cores, tipografia, componentes) do seu app.
- Um projeto Flutter organizado, pronto para conectar API e estado.
Como a IA te ajuda no Módulo 3
IA para acelerar layout e componentes
- Gerar rascunhos de telas em Flutter a partir de descrições em texto.
- Pedir para IA refatorar widgets gigantes em componentes menores.
- Experimentar variações de layout (lista, grid, cards) rapidamente.
- Usar IA para sugerir melhorias visuais e de hierarquia de informação.
IA como mentora de Flutter UI
- Pedir para explicar widgets específicos com exemplos simples.
- Transformar código de UI em explicações passo a passo.
- Criar desafios extras de layout para praticar além das aulas.
- Validar se a estrutura visual faz sentido do ponto de vista do usuário.
Pronto para ver seus apps ganhando vida na tela?
Ao concluir este módulo, você terá um app Flutter visualmente pronto para receber dados reais e regras de negócio nos próximos passos da mentoria.
🚀 Quero participar da mentoria completa🔒 Processo seletivo gratuito · 7 dias de garantia após matrícula
← Voltar para a página principal