Desenvolvimento Multiplataforma com Flutter 📱💻

Capacite-se para desenvolver aplicações de alta performance utilizando Flutter e Dart, publicando para Android, Web e Desktop a partir de uma única base de código.

Foco do Curso

Metodologia: Aprendizado prático focado na construção de aplicações do mundo real, abordando desde fundamentos da linguagem Dart até a publicação em múltiplas plataformas.

🎯 O Que Você Vai Aprender

:material-language-dart: Linguagem Dart --- Domine o Dart do zero: variáveis, null safety, funções e programação assíncrona orientada a objetos. Ir para Módulo 1
Widgets & UI/UX --- Aprenda a criar interfaces modernas e responsivas utilizando a vasta biblioteca de Widgets do Flutter. Ver Interfaces
Lógica e Dados --- Gerenciamento de estado profissional (Provider), consumo de APIs REST e persistência de dados local (SQLite). Ver Dados
Multiplataforma --- Adapte e publique seu aplicativo para Android, Web, Windows e Linux com ajustes específicos de layout. Ver Projetos

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado em quatro módulos progressivos.

Plano de Ensino 📅

Curso: Desenvolvimento Multiplataforma com Flutter (Mobile, Web & Desktop)

Ementa

Módulo 1: Fundamentos: Ecossistema Flutter, Linguagem Dart básica, Estrutura de Projetos e Conceito de Widgets.
Módulo 2: Interfaces UI/UX: Layouts (Column/Row), Componentes Visuais, Navegação e Formulários.
Módulo 3: Lógica e Dados: Gerenciamento de Estado, Consumo de APIs REST, Persistência Local e Boas Práticas.
Módulo 4: Multiplataforma na Prática: Builds para Android, Web, Desktop e Projeto Integrador.

Cronograma (16 Aulas)

🟢 Módulo 1: Fundamentos

Aula 01: Introdução ao Desenvolvimento Multiplataforma
Aula 02: Linguagem Dart para Iniciantes
Aula 03: Estrutura de um Projeto Flutter
Aula 04: Widgets: A Base de Tudo

🟡 Módulo 2: Construção de Interfaces UI/UX

Aula 05: Layouts e Organização Visual
Aula 06: Componentes Visuais (Text, Button, AppBar)
Aula 07: Navegação entre Telas e Rotas
Aula 08: Formulários, Validação e Controllers

🔵 Módulo 3: Lógica e Dados

Aula 09: Gerenciamento de Estado (Provider)
Aula 10: Consumo de APIs REST (HTTP/JSON)
Aula 11: Persistência de Dados Local (SQLite/SharedPrefs)
Aula 12: Organização Profissional e Boas Práticas

🟣 Módulo 4: Multiplataforma na Prática

Aula 13: Publicando para Android (Build APK)
Aula 14: Publicando para Web (Responsividade)
Aula 15: Aplicações Desktop (Windows/Linux/Mac)
Aula 16: Projeto Final Integrador

Avaliação

Exercícios: 16 listas de exercícios (Básico, Intermediário, Desafio).
Projetos: 16 mini-projetos práticos de fixação.
Quizzes: 16 testes de conhecimento em cada aula.
Projeto Final: Aplicativo completo (Lista de Tarefas ou Agenda) multiplataforma.

Aulas

Aula 01 - Introdução ao Desenvolvimento Multiplataforma 🌍

Conceito

O desenvolvimento multiplataforma permite que você escreva o código uma única vez e o execute em diferentes sistemas operacionais como Android, iOS, Web e Desktop.

1. O que é desenvolvimento multiplataforma? 🤔

Historicamente, para criar um app para Android e outro para iOS, você precisava de duas equipes e dois códigos diferentes (Java/Kotlin e Objective-C/Swift). Com o Flutter, usamos uma única base de código.

📱 Diferença entre Nativo e Híbrido

Nativo --- Código específico para a plataforma. Performance máxima, mas custo dobrado.
Híbrido (WebView) --- Roda dentro de um navegador interno. Lento e com interface que parece um site.
Flutter (Canvas) --- Desenha cada pixel na tela. Performance próxima ao nativo e interface idêntica em tudo.

2. Ecossistema Flutter 🎨

O Flutter é o framework do Google para criar interfaces bonitas e rápidas.

📊 Estrutura de Renderização

graph TD
    A[App Flutter] --> B[Framework - Dart]
    B --> C[Engine - C++]
    C --> D[Skia/Impeller - Graphics]
    D --> E[Plataforma - Android/iOS/Web]

3. Instalação e Ambiente 🛠️

Para começar, precisamos preparar o terreno:

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.19.0)
[√] Windows Version (Version 10.0.19045.3930)
[√] Android toolchain - develop for Android devices
[√] VS Code (version 1.86.1)
[√] Connected device (1 available)

Dica

Sempre execute o flutter doctor para verificar se há pendências na sua instalação.

4. Mini-Projeto: Olá Flutter! 🚀

Vamos criar seu primeiro projeto pelo terminal:

Abra o terminal.
Digite os comandos abaixo:

flutter create meu_primeiro_app
cd meu_primeiro_app
flutter run

5. Exercício de Fixação 🧠

Explique com suas palavras a maior vantagem do Flutter em relação ao desenvolvimento nativo tradicional.
Qual a função do comando flutter doctor?
O que significa dizer que o Flutter "desenha seus próprios widgets"?

Próxima Aula: Vamos aprender a Linguagem Dart para Iniciantes! 🎯

Aula 02 - Linguagem Dart para Iniciantes 🎯

O que é Dart?

Dart é a linguagem por trás do Flutter. Criada pelo Google, ela é otimizada para interfaces rápidas, possui tipagem forte e é muito produtiva.

1. Variáveis e Tipos de Dados 📦

No Dart, tudo é um objeto. Os tipos mais comuns são:

String nome = "Flutter";
int idade = 5;
double versao = 3.19;
bool isGratis = true;

// Inferência de tipo
var cidade = "São Paulo";

2. Estruturas de Controle 🚦

Condicionais (if/else)

int nota = 8;
if (nota >= 7) {
  print("Aprovado!");
} else {
  print("Recuperação");
}

Repetição (for)

for (int i = 0; i < 5; i++) {
  print("Contagem: $i");
}

3. Funções e Null Safety 🧠

O Dart possui Null Safety, o que significa que variáveis não podem ser nulas por padrão, evitando erros comuns.

// ? permite que a variável seja nula
String? nomeNulavel; 

void saudar(String nome) {
  print("Olá, $nome!");
}

4. Diagrama de Fluxo (Mermaid) 📊

graph TD
    A[Início] --> B{Valor é nulo?}
    B -- Sim --> C[Erro de Compilação]
    B -- Não --> D[Executar Código]
    D --> E[Fim]

5. Mini-Projeto: Calculadora de IMC Simples 🚀

Crie um arquivo imc.dart e execute-o com dart run:

void main() {
  double peso = 80.0;
  double altura = 1.80;
  double imc = peso / (altura * altura);

  print("Seu IMC é: ${imc.toStringAsFixed(2)}");
}

$ dart run imc.dart
Seu IMC é: 24.69

6. Exercício de Fixação 🧠

Crie uma variável para armazenar o nome de um aplicativo e outra para a versão (ex: 1.0).
Escreva uma estrutura que verifique se a versão é maior ou igual a 2.0 e imprima "Versão atualizada".
O que acontece se você tentar atribuir null a uma variável int x = 10; sem o operador ??

Próxima Aula: Vamos entender a Estrutura de um Projeto Flutter! 🏗️

Aula 03 - Estrutura de um Projeto Flutter 🏗️

Dica

Compreender onde cada arquivo fica é fundamental para não se perder conforme o projeto cresce.

1. Arquivos e Pastas Principais 📂

Ao criar um projeto, o Flutter gera uma estrutura padrão:

lib/: Onde mora o código Dart. 99% do seu trabalho será aqui.
android/, ios/, web/: Pastas que contêm o código específico de cada plataforma para o build.
pubspec.yaml: O "RG" do projeto. Aqui definimos o nome, versão, dependências e assets (imagens/fontes).
test/: Onde escrevemos os testes automatizados.

2. O arquivo pubspec.yaml 📝

Este é o arquivo de configuração mais importante do seu projeto.

name: meu_projeto
description: Um novo app Flutter.
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # Exemplo de dependência externa

$ flutter pub get
Resolving dependencies...
Got dependencies!

3. O arquivo main.dart 🚀

O ponto de entrada de qualquer aplicativo é a função main().

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

Árvore de Widgets (Mermaid) 📊

graph TD
    A[runApp] --> B[MaterialApp]
    B --> C[Scaffold]
    C --> D[AppBar]
    C --> E[Body]
    E --> F[Center]
    F --> G[Text]

4. Mini-Projeto: Adicionando Dependências 🚀

Abra o pubspec.yaml.
Adicione a dependência google_fonts: ^6.1.0.
Rode flutter pub get no terminal.

5. Exercício de Fixação 🧠

Para que serve a pasta lib?
Qual comando usamos para baixar novas dependências listadas no pubspec.yaml?
Qual a função principal que inicia o aplicativo no Flutter?

Próxima Aula: Vamos mergulhar nos Widgets: A Base de Tudo! 🧱

Aula 04 - Widgets: A Base de Tudo 🧱

Conceito

No Flutter, tudo é um Widget. Um botão é um widget, uma cor é um widget, o próprio aplicativo é um widget.

1. O que são Widgets? 🤔

Widgets são as peças de Lego da interface. Existem dois tipos principais que você usará o tempo todo:

⚪ StatelessWidget (Estático)

Não muda de estado. Exemplo: Um texto fixo ou um ícone.

🔴 StatefulWidget (Dinâmico)

Pode mudar conforme a interação do usuário. Exemplo: Um contador ou uma caixa de checkout.

2. Árvore de Widgets 🌳

A interface do Flutter é organizada de forma hierárquica.

graph TD
    A[MaterialApp] --> B[Scaffold]
    B --> C[AppBar]
    B --> D[Center]
    D --> E[Column]
    E --> F[Text]
    E --> G[Icon]

3. Hot Reload: O Super Poder do Flutter ⚡

Diferente do desenvolvimento tradicional onde você precisa recompilar tudo para ver uma mudança, o Flutter tem o Hot Reload. Você salva o arquivo e a mudança aparece instantaneamente no emulador.

$ flutter run
...
Performing hot reload...
Reloaded 1 of 534 libraries in 126ms.

4. Estrutura Material Design 🎨

O Flutter já vem com o sistema de design do Google (Material) pronto para usar.

Scaffold(
  appBar: AppBar(title: Text("Meu App")),
  body: Center(child: Text("Olá mundo")),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

5. Mini-Projeto: Contador Colorido 🚀

Crie um novo projeto.
Altere a cor do FloatingActionButton no main.dart.
Use o Hot Reload para ver a cor mudar instantaneamente.

6. Exercício de Fixação 🧠

Diferencie StatelessWidget de StatefulWidget.
O que é a Árvore de Widgets?
Como o Hot Reload acelera o desenvolvimento?

Próxima Aula: Vamos aprender sobre Layouts e Organização Visual! 🎨

Aula 05 - Layouts e Organização Visual 🎨

Dica

Um bom layout é o que separa um app amador de um profissional. O segredo está em saber alinhar os elementos.

1. Column e Row: A Base de Tudo 🏗️

A maioria das interfaces é composta por elementos empilhados verticalmente ou lado a lado.

Column: Alinha widgets de cima para baixo.
Row: Alinha widgets da esquerda para a direita.

Propriedades de Alinhamento

mainAxisAlignment: Alinha no eixo principal (vertical para Column, horizontal para Row).
crossAxisAlignment: Alinha no eixo cruzado.

2. Container, Padding e Margin 📦

Container: Funciona como uma caixa onde você pode definir cor de fundo, bordas e tamanho.
Padding: Espaço interno.
Margin: Espaço externo.

Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(horizontal: 10),
  color: Colors.blue,
  child: Text("Conteúdo"),
)

3. Expanded e Flexible ↔️

Servem para controlar como os widgets ocupam o espaço disponível.

graph LR
    A[Container Fixo]
    B[Expanded - Ocupa o resto]
    C[Container Fixo]
    subgraph "Row"
    A --- B --- C
    end

4. Praticando Layouts (Termynal) 💻

$ flutter create layout_app
$ cd layout_app
# Substitua o body por uma Column com 3 Containers coloridos
$ flutter run

5. Mini-Projeto: Perfil de Usuário Simples 🚀

Crie uma interface que contenha: 1. Uma Column principal. 2. Uma CircleAvatar para a foto. 3. Um Text para o nome. 4. Uma Row com ícones de redes sociais.

6. Exercício de Fixação 🧠

Qual a diferença entre MainAxisAlignment e CrossAxisAlignment em uma Column?
Para que serve o widget Expanded?
Como adicionamos espaço interno a um Container?

Próxima Aula: Vamos explorar os Componentes Visuais! 🖼️

Aula 06 - Componentes Visuais 🖼️

Material Design

O Flutter facilita o uso de componentes que seguem o padrão Material Design, garantindo consistência visual.

1. Text, Icon e Image 📸

Esses são os blocos básicos para exibir informação.

Text("Estilizado", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
Icon(Icons.favorite, color: Colors.red),
Image.network("https://url-da-imagem.com"),

2. Buttons: Interação com o Usuário 🖱️

Existem diversos tipos de botões pré-estilizados:

ElevatedButton: Botão com sombra e relevo.
TextButton: Botão apenas com texto (para ações secundárias).
OutlinedButton: Botão com borda contínua.

ElevatedButton(
  onPressed: () { print("Clicou!"); },
  child: Text("Salvar"),
)

3. AppBar e Scaffold 🏗️

O Scaffold é o esqueleto da tela, e a AppBar é a barra de título superior.

graph TD
    A[Scaffold] --> B[AppBar]
    A --> C[body]
    A --> D[FloatingActionButton]
    A --> E[BottomNavigationBar]

4. Testando Componentes (Termynal) 💻

$ # Experimente trocar o Icon por um Image.asset no seu projeto
$ flutter pub get
$ flutter run

5. Mini-Projeto: Tela de Boas-Vindas 🚀

Crie uma tela que tenha: 1. Uma imagem centralizada. 2. Um texto de boas-vindas grande. 3. Um botão "Começar" no final da página.

6. Exercício de Fixação 🧠

Como alteramos o tamanho da fonte em um widget Text?
Cite três tipos de botões do Flutter.
Para que serve o widget Scaffold?

Próxima Aula: Vamos aprender a Navegação entre Telas! 🛣️

Aula 07 - Navegação entre Telas 🛣️

Conceito

Raramente um aplicativo tem apenas uma tela. A navegação permite que o usuário transite entre diferentes funcionalidades de forma fluida.

1. Navigator e Pilha de Telas 📚

O Flutter usa o conceito de Pilha (Stack) para navegação. Imagine uma pilha de pratos: * Push: Adiciona uma nova tela no topo. * Pop: Remove a tela atual e volta para a anterior.

// Indo para uma nova tela
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => OutraTela()),
);

// Voltando
Navigator.pop(context);

2. Rotas Nomeadas 🏷️

Para aplicativos maiores, é melhor organizar as rotas por nomes no MaterialApp.

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => TelaHome(),
    '/detalhes': (context) => TelaDetalhes(),
  },
);

// Navegando
Navigator.pushNamed(context, '/detalhes');

3. Passagem de Parâmetros 📦

Podemos enviar dados de uma tela para outra através do construtor ou do ModalRoute.

Flow de Navegação (Mermaid) 📊

graph LR
    A[Tela Lista] -- Clicar Item --> B[Tela Detalhes]
    B -- Navigator.pop --> A
    B -- Argumento: ID do Item --> B

4. Testando Rotas (Termynal) 💻

$ flutter create rotas_app
# Crie dois widgets de tela no main.dart
$ flutter run

5. Mini-Projeto: App de Receitas 🚀

Crie duas telas: 1. Lista de Receitas: Uma lista com nomes de pratos. 2. Detalhe da Receita: Ao clicar em um prato, navegue para uma tela que mostre o nome da receita selecionada.

6. Exercício de Fixação 🧠

O que acontece com a tela atual quando usamos Navigator.push?
Qual a principal vantagem de usar "Rotas Nomeadas"?
Como voltamos para a tela anterior sem fechar o app?

Próxima Aula: Vamos aprender a criar Formulários e Validação! 📝

Aula 08 - Formulários e Validação 📝

Interatividade

Formulários são a principal forma de capturar dados do usuário, seja para um cadastro, login ou busca.

1. TextField e Controllers ⌨️

O TextField é o widget básico de entrada de texto. Para capturar o que o usuário digita, usamos um TextEditingController.

final controller = TextEditingController();

TextField(
  controller: controller,
  decoration: InputDecoration(labelText: "Seu Nome"),
)

// Acessando o valor
print(controller.text);

2. Form e TextFormField 🧱

Para validações complexas, usamos o widget Form em conjunto com o TextFormField.

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "Campo obrigatório";
    }
    return null;
  },
)

3. Validação de Dados ✅

A validação garante que o usuário insira os dados no formato correto antes de enviarmos para um banco de dados ou API.

Fluxo de Validação (Mermaid) 📊

graph TD
    A[Usuário clica em Enviar] --> B{Campos válidos?}
    B -- Não --> C[Mostrar mensagens de erro]
    B -- Sim --> D[Processar Dados]
    D --> E[Mostrar Sucesso]

4. Máscaras Básicas 🎭

Podemos usar o pacote mask_text_input_formatter para campos de CPF, Telefone ou Data.

$ flutter pub add mask_text_input_formatter

5. Mini-Projeto: Tela de Cadastro 🚀

Crie um formulário com: 1. Campo de E-mail (com validação de @). 2. Campo de Senha (mínimo 6 caracteres). 3. Botão que só exibe uma SnackBar de sucesso se os dados forem válidos.

6. Exercício de Fixação 🧠

Para que serve o TextEditingController?
Qual a diferença entre TextField e TextFormField?
Como acionamos a validação de um formulário?

Próxima Aula: Vamos dominar o Gerenciamento de Estado! 🔄

Aula 09 - Gerenciamento de Estado 🔄

Atenção

Gerenciar o estado é um dos tópicos mais importantes. Se o estado estiver bagunçado, o app terá bugs visuais e perda de dados.

1. O que é Estado? 🤔

Estado é qualquer dado que pode mudar durante a vida do aplicativo e que precisa ser refletido na interface (ex: contador, itens no carrinho, se o usuário está logado).

2. setState: O Básico 🔴

Para mudanças simples dentro de um único widget, usamos o setState. Ele avisa ao Flutter: "Ei, algo mudou, redesenhe a tela!".

int contador = 0;

void incrementar() {
  setState(() {
    contador++;
  });
}

3. Introdução ao Provider 🔷

Conforme o app cresce, o setState fica difícil de gerenciar. O Provider é uma das soluções mais populares para gerenciar estado de forma global.

Ciclo de Vida do Estado (Mermaid) 📊

graph LR
    A[Ação do Usuário] --> B[Modificar Dados]
    B --> C[Notificar Widgets]
    C --> D[Interface Atualiza]

4. Instalando o Provider (Termynal) 💻

$ flutter pub add provider

5. Mini-Projeto: Lista de Favoritos 🚀

Crie um app onde: 1. O usuário pode clicar em um botão de "coração" em um item. 2. O estado do coração (preenchido ou vazio) deve ser persistido enquanto o app estiver aberto. 3. Use um ChangeNotifier para gerenciar essa lista.

6. Exercício de Fixação 🧠

O que acontece com a interface quando chamamos setState?
Por que não usamos setState para tudo em apps grandes?
Qual o papel do notifyListeners() no Provider?

Próxima Aula: Vamos aprender o Consumo de APIs REST! 📡

Aula 10 - Consumo de APIs REST 📡

Comunicação

A maioria dos aplicativos modernos depende de dados vindos da internet. Saber consumir uma API REST é essencial para qualquer desenvolvedor.

1. O que é uma API REST? 🌐

REST é um conjunto de regras que permite que o seu app converse com um servidor. Usamos o protocolo HTTP para enviar e receber dados, geralmente no formato JSON.

Principais Métodos

GET: Buscar dados.
POST: Enviar dados novos.
PUT/PATCH: Atualizar dados.
DELETE: Remover dados.

2. Pacote HTTP e JSON 📦

Para fazer requisições, usamos o pacote http.

import 'package:http/http.as http;
import 'dart:convert';

Future<void> buscarDados() async {
  final response = await http.get(Uri.parse('https://api.exemplo.com/dados'));
  if (response.statusCode == 200) {
    var dados = jsonDecode(response.body);
    print(dados['projeto']);
  }
}

3. Future e Async/Await ⏳

Como a internet pode ser lenta, não podemos travar o app esperando a resposta. Usamos Programação Assíncrona.

Ciclo de Requisição (Mermaid) 📊

graph TD
    A[App solicita dados] --> B[Aguardando resposta...]
    B --> C{Sucesso?}
    C -- Sim --> D[Converter JSON para Objeto]
    C -- Não --> E[Tratar Erro]
    D --> F[Atualizar Interface]

4. Instalando Dependências (Termynal) 💻

$ flutter pub add http

5. Mini-Projeto: App de CEP 🚀

Crie um app que: 1. Tenha um campo para digitar o CEP. 2. Consuma a API do ViaCEP (https://viacep.com.br/ws/CEP/json/). 3. Exiba o endereço na tela.

6. Exercício de Fixação 🧠

Para que serve o comando await?
O que é o jsonDecode?
Por que usamos Future em requisições de rede?

Próxima Aula: Vamos aprender a Persistência de Dados! 💾

Aula 11 - Persistência de Dados 💾

Dados Locais

Nem tudo precisa de internet. Às vezes queremos salvar preferências do usuário ou dados que funcionem offline.

1. SharedPreferences 🔑

Ideal para salvar pequenas quantidades de dados, como configurações (Ex: tema escuro, se o usuário já viu o tutorial). Salva pares de Chave-Valor.

final prefs = await SharedPreferences.getInstance();
await prefs.setBool('show_ads', false);
bool? showAds = prefs.getBool('show_ads');

2. Banco de Dados Local (SQLite) 🗄️

Para grandes volumes de dados (como uma lista de tarefas ou contatos), usamos o SQLite através do pacote sqflite.

Estrutura CRUD

Create (Inserir)
Read (Ler)
Update (Atualizar)
Delete (Excluir)

3. Fluxo de Dados Offline (Mermaid) 📊

graph LR
    A[App] --> B{Tem Internet?}
    B -- Sim --> C[Buscar na API]
    B -- Não --> D[Buscar no Banco Local]
    C --> E[Salvar no Banco Local]
    D --> F[Mostrar na Tela]
    E --> F

4. Instalando Pacotes (Termynal) 💻

$ flutter pub add sqflite path_provider shared_preferences

5. Mini-Projeto: Bloco de Notas Simples 🚀

Crie um app que: 1. Permita escrever uma nota. 2. Salve a nota no SharedPreferences ao fechar o app. 3. Recupere a nota automaticamente ao abrir o app novamente.

6. Exercício de Fixação 🧠

Quando devemos usar SharedPreferences em vez de um Banco de Dados SQL?
O que significa a sigla CRUD?
Qual a principal vantagem de ter um banco de dados local no app?

Próxima Aula: Vamos aprender a Organização Profissional do Projeto! 🏛️

Aula 12 - Organização Profissional do Projeto 🏛️

Escalabilidade

Organizar bem o código é o que permite que um projeto dure anos e seja fácil de manter por vários desenvolvedores.

1. Separação por Camadas 🍰

Não devemos colocar tudo dentro da interface. Dividimos o código em responsabilidades:

Model: Representa os dados (Classes Dart).
Service: Lida com a comunicação externa (APIs, Banco de Dados).
Controller/Provider: Gerencia a lógica de negócio e o estado.
View: Apenas desenha a interface na tela.

2. Clean Architecture (Simplificada) 🏗️

A ideia é que a interface dependa da lógica, e não o contrário.

Diagrama de Dependências (Mermaid) 📊

graph BT
    UI[View - Telas] --> CTR[Controller/Provider]
    CTR --> SRV[Services]
    SRV --> MDL[Models]

3. Boas Práticas de Código ✨

Nomes Claros: getUserData() é melhor que getD().
Don't Repeat Yourself (DRY): Se você está copiando e colando código, crie uma função ou widget reutilizável.
Single Responsibility: Cada arquivo deve fazer apenas uma coisa bem feita.

4. Organizando Pastas (Termynal) 📂

$ mkdir lib/models lib/services lib/providers lib/views
$ ls lib/
models/
providers/
services/
views/
main.dart

5. Mini-Projeto: Refatorando o App de CEP 🚀

Pegue o projeto da Aula 10 e organize-o: 1. Crie uma classe EnderecoModel. 2. Crie um EnderecoService para a chamada HTTP. 3. Crie um EnderecoProvider para gerenciar o estado da busca.

6. Exercício de Fixação 🧠

Por que não devemos fazer chamadas de API diretamente dentro do widget da tela?
O que é um "Model" no contexto de camadas de software?
Qual a vantagem de usar Widgets reutilizáveis?

Próxima Aula: Vamos aprender a Publicar para Android! 🤖

Aula 13 - Publicando para Android 🤖

O Ecossistema Android

Publicar para Android exige algumas configurações no Gradle e a geração de uma chave de assinatura (Keystore).

1. Configurações do SDK e Gradle 🛠️

O arquivo android/app/build.gradle controla as versões do Android suportadas pelo seu app.

minSdkVersion: Versão mínima do Android que pode rodar o app.
targetSdkVersion: Versão para a qual o app foi otimizado.
versionCode: Número interno da versão (ex: 1, 2, 3).
versionName: Versão amigável ao usuário (ex: 1.0.0).

2. Gerando o APK e o App Bundle 📦

APK (Android Package)

Usado para instalação direta no dispositivo.

flutter build apk --release

App Bundle (AAB)

O formato obrigatório para a Google Play Store. O Google otimiza o tamanho do app para cada dispositivo.

flutter build appbundle

3. Ícone e Nome do Aplicativo 🎨

Para trocar o ícone em todas as resoluções de forma automática, usamos o pacote flutter_launcher_icons.

Fluxo de Build (Mermaid) 📊

graph TD
    A[Código Dart] --> B[Compilação AOT]
    B --> C[Engine Flutter]
    C --> D[Bundling de Assets]
    D --> E[Assinatura do APK/AAB]
    E --> F[Pronto para Instalação]

4. Testes em Dispositivo Físico (Termynal) 💻

Testar em um celular de verdade é essencial para validar a performance.

$ flutter devices
$ flutter run -d [id-do-dispositivo]

5. Mini-Projeto: Gerando seu primeiro APK 🚀

Troque o nome do app no AndroidManifest.xml.
Execute o comando flutter build apk.
Localize o arquivo gerado em build/app/outputs/flutter-apk/app-release.apk.

6. Exercício de Fixação 🧠

Qual a diferença entre APK e App Bundle?
Para que serve o minSdkVersion?
Por que devemos testar em dispositivos físicos e não apenas em emuladores?

Próxima Aula: Vamos aprender a Publicar para Web! 🌐

Aula 14 - Publicando para Web 🌐

Flutter Web

O Flutter converte seu código Dart em HTML, CSS e JavaScript, permitindo que o app rode em qualquer navegador moderno.

1. Responsividade: O Desafio da Web 📱💻

Diferente do celular, na web o usuário pode redimensionar a janela a qualquer momento. Precisamos usar o widget LayoutBuilder ou pacotes como responsive_framework.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 800) {
      return VistaDesktop();
    } else {
      return VistaMobile();
    }
  },
)

2. Compilação para Web 🏗️

O Flutter oferece dois motores de renderização para a web: * HTML: Menor tamanho de arquivo, melhor para SEO. * CanvasKit (WebAssembly): Melhor performance e fidelidade visual (idêntico ao mobile).

flutter build web --release

3. Deploy Simples 🚀

Após o build, o Flutter gera uma pasta build/web/. Você pode subir esses arquivos para o GitHub Pages, Firebase Hosting ou Netlify.

Fluxo de Deploy (Mermaid) 📊

graph LR
    A[Build Web] --> B[Pasta build/web]
    B --> C[Servidor Estático]
    C --> D[Acesso via Navegador]

4. Rodando na Web (Termynal) 💻

$ flutter devices
$ flutter run -d chrome
$ flutter build web

5. Mini-Projeto: Portfólio Web 🚀

Adapte um dos seus mini-projetos anteriores para: 1. Ter uma barra de navegação lateral no desktop. 2. Ter uma barra de navegação inferior no mobile.

6. Exercício de Fixação 🧠

Como o Flutter lida com diferentes tamanhos de tela na Web?
Qual a pasta que contém o resultado final do build para web?
Cite uma ferramenta de hospedagem gratuita para o Flutter Web.

Próxima Aula: Vamos explorar Aplicações Desktop! 💻

Aula 15 - Aplicações Desktop 💻

Windows, macOS e Linux

O Flutter permite criar aplicativos de desktop nativos com acesso total ao sistema de arquivos e periféricos.

1. Habilitando o suporte Desktop 🛠️

Dependendo do seu sistema operacional, você precisará instalar ferramentas extras (como o Visual Studio com C++ para Windows).

flutter config --enable-windows-desktop
flutter config --enable-macos-desktop
flutter config --enable-linux-desktop

2. Ajustes de Layout para Desktop 🖥️

No desktop, temos janelas que podem ser maximizadas. Usamos o mouse e o teclado como entradas principais, não o toque.

Menus de Contexto: Clique com o botão direito.
Hover: Efeitos ao passar o mouse por cima.
Atalhos de Teclado: Ex: Ctrl+S para salvar.

3. Empacotamento Básico 📦

Para distribuir seu app desktop, você pode gerar um executável .exe (Windows), .app (macOS) ou um binário Linux.

Arquitetura Desktop (Mermaid) 📊

graph TD
    A[App Flutter] --> B[Dart Runner]
    B --> C[C++ Embedding]
    C --> D[Plataforma Nativa - Win/Mac/Lin]
    D --> E[Acesso ao Hardware/Arquivos]

4. Rodando Desktop (Termynal) 💻

$ flutter run -d windows
$ flutter build windows

5. Mini-Projeto: Editor de Texto Simples 🚀

Crie um app desktop que: 1. Tenha um campo TextField que ocupe a tela toda. 2. Tenha um botão de "Salvar em Arquivo" (use o pacote file_picker).

6. Exercício de Fixação 🧠

Qual a principal diferença de input entre mobile e desktop?
Como habilitamos o suporte para Windows no Flutter?
Por que janelas redimensionáveis são importantes no desktop?

Próxima Aula: É hora do Projeto Final Integrador! 🎓

Aula 16 - Projeto Final Integrador 🎓

Objetivo Final

Parabéns por chegar até aqui! Agora é hora de unir todo o conhecimento em um único projeto profissional completo.

1. O Desafio Final 🏆

Você deverá desenvolver um aplicativo multiplataforma (Mobile, Web e Desktop) que resolva um problema real.

Sugestões de Temas

Lista de Tarefas (ToDo): Com persistência local e categorias.
Controle Financeiro Simples: Cadastro de gastos e receitas com gráficos.
Agenda de Contatos: Com integração de foto e busca.

2. Requisitos Obrigatórios ✅

Para que o projeto seja considerado completo, ele deve conter:

Arquitetura: Separação em camadas (Models, Services, Providers).
UI/UX: Layout responsivo (funciona bem em telas grandes e pequenas).
Navegação: Pelo menos duas telas.
Dados: Consumo de uma API externa OU persistência local (SQLite/SharedPrefs).
Formulários: Cadastro de dados com validação.

3. Estrutura do Projeto (Mermaid) 📊

graph TD
    subgraph "Camada de UI"
    V1[Home View]
    V2[Form View]
    end

    subgraph "Camada de Lógica"
    P[Provider de Dados]
    end

    subgraph "Camada de Dados"
    S[Service API/Local]
    M[Model de Dados]
    end

    V1 --> P
    V2 --> P
    P --> S
    S --> M

4. Preparando para Apresentação 🚀

Um bom desenvolvedor também sabe apresentar seu trabalho.

Faça o Build: Gere o APK, a versão Web e o executável Desktop.
Repositório: Suba o código para o GitHub com um README.md bem escrito.
Vídeo/GIF: Grave o funcionamento do app em diferentes telas.

5. Próximos Passos na Carreira 🚀

O aprendizado não para aqui. Explore: * Gerenciamento de estado avançado (Bloc, Riverpod). * Testes Unitários e de Integração avançados. * Integração com Firebase (Auth, Firestore, Cloud Functions).

Certificação

Conclua o projeto, publique no seu portfólio e compartilhe sua conquista!

Fim da Jornada! Boas codificações! 📱💻🚀

Exercícios

Listas de Exercícios 🏋️

Pratique o que aprendeu com desafios graduais para cada aula.

Módulo 1: Fundamentos ---
Módulo 2: Interfaces ---
Módulo 3: Lógica ---
Módulo 4: Prática ---

Exercícios - Aula 01: Introdução ao Desenvolvimento Multiplataforma 🌍

🟢 Básicos (Fixação)

Definição: Explique com suas palavras a principal diferença entre um aplicativo nativo e um aplicativo desenvolvido com Flutter.
Diagnóstico: Qual o comando do Flutter SDK que usamos para verificar se o ambiente de desenvolvimento (Android Studio, VS Code, SDK) está configurado corretamente?

🟡 Intermediários (Aplicação)

Arquitetura: O que significa dizer que o Flutter "não usa widgets nativos"? Qual o benefício dessa abordagem para a consistência visual entre Android e iOS?
Instalação: Liste os 3 principais componentes de software que devem estar instalados na sua máquina para começar a programar em Flutter.

🔴 Desafio (Pesquisa/Prática)

Comparativo: Pesquise sobre o motor de renderização "Impeller" do Flutter. Explique brevemente qual problema ele veio resolver em relação ao motor antigo (Skia) nas plataformas iOS e Android.

Exercícios - Aula 02: Linguagem Dart para Iniciantes 🎯

🟢 Básicos (Fixação)

Variáveis: Crie um programa simples em Dart que declare três variáveis: uma String com o nome de um app, um int com a versão e um double com a nota da loja. Imprima os valores usando interpolação de string ($).
Tipagem: Diferencie as palavras-chave var, final e const no Dart. Quando devemos usar cada uma?

🟡 Intermediários (Aplicação)

Condicionais: Escreva uma função que receba uma idade e imprima se a pessoa é "Maior de idade" ou "Menor de idade".
Repetição: Use um laço for para imprimir todos os números pares de 0 a 20.

🔴 Desafio (Pesquisa/Prática)

Null Safety: Explique o que é a "Null Safety" no Dart. Dê um exemplo de código que causaria um erro antes do Null Safety e como ele deve ser escrito agora usando o operador ?.

Exercícios - Aula 03: Estrutura de um Projeto Flutter 🏗️

🟢 Básicos (Fixação)

Diretórios: Qual a função da pasta lib/ em um projeto Flutter? O que acontece se deletarmos o arquivo main.dart?
Configuração: Para que serve o arquivo pubspec.yaml? Liste três tipos de informações que configuramos nele.

🟡 Intermediários (Aplicação)

Dependências: Adicione o pacote google_fonts ao seu arquivo pubspec.yaml. Qual comando você deve rodar no terminal para que o projeto reconheça a nova biblioteca?
EntryPoint: Explique o papel da função main() e do comando runApp(). Por que passamos um Widget para o runApp?

🔴 Desafio (Pesquisa/Prática)

Platform Folders: Por que o Flutter gera pastas como android/, ios/ e web/ se escrevemos o código apenas em Dart? O que essas pastas contêm de essencial para o funcionamento do app?

Exercícios - Aula 04: Widgets: A Base de Tudo 🧱

🟢 Básicos (Fixação)

Conceito: O que significa a frase "Tudo no Flutter é um Widget"? Dê 3 exemplos de coisas que são widgets mas que não são elementos visuais "clicáveis" (ex: cores, alinhamentos).
Stateless vs Stateful: Explique a diferença de ciclo de vida entre um StatelessWidget e um StatefulWidget.

🟡 Intermediários (Aplicação)

Árvore de Widgets: Desenhe (em texto ou papel) a hierarquia de widgets de uma tela que tem: Um scaffold, uma appbar com título, e no corpo um texto centralizado.
Hot Reload: Explique a diferença técnica entre "Hot Reload" e "Hot Restart". Em que situação o Hot Reload não é suficiente e precisamos dar um Restart?

🔴 Desafio (Pesquisa/Prática)

Composição: Crie um pequeno código Dart que implemente um StatelessWidget chamado CartaoBoasVindas. Ele deve receber um parâmetro String nome no construtor e exibir um texto "Olá, $nome!" dentro de um widget de sua escolha.

Exercícios - Aula 05: Layouts e Organização Visual 🎨

🟢 Básicos (Fixação)

Eixos: Em uma Column, qual a diferença entre MainAxisAlignment e CrossAxisAlignment?
Caixas: Para que serve o widget Container? Imagine 3 propriedades que você poderia mudar nele para destacar um título da tela.

🟡 Intermediários (Aplicação)

Espaçamento: Diferencie Padding de Margin. Se você quiser afastar um botão das bordas de um cartão, qual dos dois deve usar dentro do cartão?
Expansão: Para que serve o widget Expanded? O que acontece se colocarmos dois widgets Expanded dentro da mesma Row?

🔴 Desafio (Pesquisa/Prática)

Responsividade: Como você faria para que uma lista de itens aparecesse em 1 coluna no celular (vertical) mas em 3 colunas em um tablet (horizontal)? Pesquise sobre LayoutBuilder ou MediaQuery.

Exercícios - Aula 06: Componentes Visuais 🖼️

🟢 Básicos (Fixação)

Text: Como você mudaria a cor de um texto para vermelho e o tamanho para 24 usando TextStyle?
Botões: Cite os 3 tipos principais de botões do Material Design no Flutter e dê um exemplo de uso para cada um.

🟡 Intermediários (Aplicação)

Imagens: Qual a diferença entre carregar uma imagem via Image.asset e Image.network? Qual delas exige configuração no pubspec.yaml?
Ícones: Como você adicionaria um ícone de "coração" vermelho ao lado de um texto em uma Row?

🔴 Desafio (Pesquisa/Prática)

Iteração: Pesquise como funciona o widget ListView.builder. Por que ele é mais eficiente que apenas colocar uma Column dentro de um SingleChildScrollView quando temos 1000 itens?

Exercícios - Aula 07: Navegação entre Telas 🛣️

🟢 Básicos (Fixação)

Pilha: O que acontece com a memória do app quando usamos Navigator.push sucessivas vezes sem nunca usar o pop?
Voltar: Qual comando usamos para fechar a tela atual e retornar à anterior? Ele precisa de algum parâmetro obrigatório?

🟡 Intermediários (Aplicação)

Parâmetros: Descreva como você passaria o ID de um produto da "Tela de Listagem" para a "Tela de Detalhes".
Rotas: Qual a vantagem de usar initialRoute em vez do parâmetro home no seu MaterialApp?

🔴 Desafio (Pesquisa/Prática)

UX de Navegação: O que faz o método Navigator.pushAndRemoveUntil? Dê um exemplo prático de onde ele seria essencial em um aplicativo (ex: Logout).

Exercícios - Aula 08: Formulários e Validação 📝

🟢 Básicos (Fixação)

Input: Qual a diferença entre TextField e TextFormField no contexto do Flutter?
Captura: Para que serve o TextEditingController? Onde ele deve ser declarado?

🟡 Intermediários (Aplicação)

Validação: Escreva uma função de validação (validator) para um campo de e-mail que verifique se o texto contém pelo menos um "@" e um ".".
Teclado: Como você mudaria o teclado para mostrar apenas números quando o usuário clicar em um campo de "Telefone"?

🔴 Desafio (Pesquisa/Prática)

Feedback: Além de mudar a cor do texto para vermelho, pesquise como podemos usar o widget SnackBar para mostrar uma mensagem de erro geral caso o usuário tente enviar um formulário com campos vazios.

Exercícios - Aula 09: Gerenciamento de Estado 🔄

🟢 Básicos (Fixação)

Estado: Dê 3 exemplos de dados em um aplicativo que seriam considerados "Estado" (que precisam ser atualizados na tela quando mudam).
setState: O que acontece se você mudar o valor de uma variável em um StatefulWidget mas esquecer de chamar o setState()?

🟡 Intermediários (Aplicação)

Injeção: Para que serve o widget ChangeNotifierProvider? Onde ele deve ser posicionado na árvore de widgets?
Escuta: Qual a diferença entre usar context.watch<T>() e context.read<T>() dentro de um método build?

🔴 Desafio (Pesquisa/Prática)

Performance: Pesquise sobre o widget Consumer do pacote Provider. Como ele ajuda a otimizar a performance do aplicativo em comparação com o uso do watch no topo do método build?

Exercícios - Aula 10: Consumo de APIs REST 📡

🟢 Básicos (Fixação)

JSON: O que é um arquivo JSON e por que ele é preferido em vez de XML no desenvolvimento mobile atual?
HTTP: Liste os 4 verbos HTTP principais e descreva brevemente para que cada um serve em uma API de "Cadastro de Usuários".

🟡 Intermediários (Aplicação)

Async: Explique com um exemplo do mundo real por que usamos async e await ao fazer uma chamada de rede, em vez de travar o app até a resposta chegar.
Parsing: Para que serve a função jsonDecode()? O que ela devolve no Dart se o JSON for uma lista de objetos {...}?

🔴 Desafio (Pesquisa/Prática)

Erros: Como você trataria um cenário onde o usuário tenta buscar um CEP (Aula 10), mas está sem internet? Pesquise sobre blocos try-catch e como verificar o statusCode da resposta.

Exercícios - Aula 11: Persistência de Dados 💾

🟢 Básicos (Fixação)

Armazenamento: Qual pacote você escolheria para salvar se o usuário prefere o app em "Modo Escuro" ou "Modo Claro"? Justifique.
SQLite: O SQLite é considerado um banco de dados relacional ou não-relacional (NoSQL)?

🟡 Intermediários (Aplicação)

CRUD: Escreva o comando SQL necessário para criar uma tabela chamada tarefas com as colunas id (inteiro), titulo (texto) e concluida (inteiro 0 ou 1).
Camadas: Por que não é boa prática abrir a conexão com o banco de dados diretamente dentro do método build da sua tela?

🔴 Desafio (Pesquisa/Prática)

Sincronização: Imagine um app que funciona offline mas precisa enviar os dados para a nuvem quando a internet volta. Pesquise e explique brevemente como você organizaria esse fluxo de dados.

Exercícios - Aula 12: Organização Profissional do Projeto 🏛️

🟢 Básicos (Fixação)

Responsabilidades: Em um projeto organizado, o que deve ficar dentro da pasta services/?
Modelos: Por que criamos classes "Model" em vez de usar apenas Map<String, dynamic> para manipular os dados da API em todo o app?

🟡 Intermediários (Aplicação)

DRY: O que significa o princípio DRY? Dê um exemplo de como você o aplicaria ao notar que 3 telas diferentes possuem o mesmo botão azul arredondado.
Singleton: Pesquise o que é o padrão de projeto "Singleton" e por que ele é útil para gerenciar a conexão com o banco de dados SQLite.

🔴 Desafio (Pesquisa/Prática)

Arquitetura: Pesquise sobre o padrão MVVM (Model-View-ViewModel). Como o Provider se encaixa nesse padrão para separar a lógica (ViewModel) da tela (View)?

Exercícios - Aula 13: Publicando para Android 🤖

🟢 Básicos (Fixação)

Gradle: Onde definimos o versionName e o versionCode do nosso aplicativo Android?
Build: Qual o comando usado para gerar um App Bundle (.aab) para a Google Play Store?

🟡 Intermediários (Aplicação)

Assinatura: O que é uma Keystore e por que ela é obrigatória para publicar um app na loja oficial? O que acontece se você perder esse arquivo?
Permissões: Cite duas permissões comuns que devem ser declaradas no AndroidManifest.xml (ex: Internet, Câmera).

🔴 Desafio (Pesquisa/Prática)

Distribuição: Pesquise sobre o "Internal App Sharing" da Google Play. Como ele ajuda no processo de teste antes de liberar o app para o público geral?

Exercícios - Aula 14: Publicando para Web 🌐

🟢 Básicos (Fixação)

Plataforma: Qual comando usamos para rodar o projeto especificamente no navegador Chrome?
Saída: Após rodar flutter build web, qual a pasta que contém os arquivos prontos para subir no servidor?

🟡 Intermediários (Aplicação)

Renderizadores: Explique a diferença entre usar o renderizador HTML e o CanvasKit. Em qual situação você escolheria o HTML?
PWA: O que é um PWA (Progressive Web App)? Cite um benefício de transformar seu app Flutter Web em um PWA.

🔴 Desafio (Pesquisa/Prática)

Hospedagem: Pesquise como realizar o deploy de um app Flutter Web no GitHub Pages. Quais são os passos básicos após gerar a pasta build?

Exercícios - Aula 15: Aplicações Desktop 💻

🟢 Básicos (Fixação)

Desktop: Qual comando habilita o suporte para desenvolvimento Windows no seu SDK do Flutter?
Input: Cite uma diferença fundamental de interação entre um app mobile (toque) e um app desktop (mouse/teclado).

🟡 Intermediários (Aplicação)

Responsividade: Como você garantiria que um app desktop não fique com o texto minúsculo ao ser aberto em um monitor 4K?
Periféricos: Pesquise como poderíamos detectar um comando de "Atalho de Teclado" (ex: Ctrl + S) para salvar um arquivo no Flutter Desktop.

🔴 Desafio (Pesquisa/Prática)

Ambiente: Quais são os requisitos de software obrigatórios para compilar um app Flutter para Windows (ex: C++, IDE)?

Exercícios - Aula 16: Projeto Final Integrador 🎓

🟢 Básicos (Fixação)

Escopo: Escolha um dos temas sugeridos (ToDo, Finanças ou Agenda) e descreva 3 funcionalidades principais que seu app terá.
Arquitetura: Desenhe ou descreva como você organizará suas pastas para este projeto final.

🟡 Intermediários (Aplicação)

UI: Como você planeja tornar seu app responsivo para que ele funcione bem tanto no celular quanto no navegador?
Dados: Você usará uma API externa (como a de CEP) ou salvará os dados localmente (SQLite)? Justifique sua escolha baseado no tema escolhido.

🔴 Desafio (Pesquisa/Prática)

Pitch: Escreva um pequeno parágrafo (3 a 5 linhas) vendendo a ideia do seu aplicativo. Qual problema ele resolve e por que usar Flutter foi a escolha certa para construí-lo?

Projetos

Projetos Práticos 🚀

Transforme teoria em prática com desafios progressivos que compõem seu portfólio.

Módulo 1: Fundamentos ---
Módulo 2: Interfaces ---
Módulo 3: Lógica ---
Módulo 4: Prática ---

Projeto 01 - Hello Flutter 🚀

🎯 Objetivo

Criar seu primeiro projeto Flutter e rodá-lo no emulador ou dispositivo físico.

📝 Descrição

Neste projeto, você vai validar sua instalação do Flutter criando o projeto padrão e realizando pequenas modificações visuais para entender como o framework reage.

🛠️ Requisitos

Criar o projeto via terminal ou IDE.
Trocar o título da AppBar.
Trocar a cor do tema principal no MaterialApp.
Entender o funcionamento do contador padrão.

💡 Dica

Use o comando flutter run no terminal para ver o app em ação pela primeira vez.

Projeto 02 - CLI Dart 🎯

🎯 Objetivo

Praticar a lógica da linguagem Dart sem a complexidade visual do Flutter.

📝 Descrição

Desenvolva um pequeno programa de linha de comando (CLI) que receba dados do usuário pelo terminal e realize cálculos matemáticos simples.

🛠️ Requisitos

Receber o nome do usuário.
Solicitar dois números.
Exibir a soma, subtração e média dos números.
Usar Null Safety corretamente.

💡 Dica

Utilize stdin.readLineSync() do pacote dart:io para ler dados do teclado.

Projeto 03 - Blueprints de App 🏗️

🎯 Objetivo

Entender a anatomia de um projeto comercial e organizar o pubspec.yaml.

📝 Descrição

Configure a estrutura inicial de um aplicativo fictício, adicionando pastas organizadas e registrando assets e fontes personalizadas.

🛠️ Requisitos

Organizar a pasta lib/ em subpastas (models, views, widgets).
Adicionar uma imagem de logo à pasta assets/.
Registrar a imagem no pubspec.yaml.
Trocar a fonte padrão do sistema pela fonte Google Sans (via pacote google_fonts).

💡 Dica

Mantenha os caminhos das imagens curtos e sem caracteres especiais para evitar erros no build.

Projeto 04 - Primeiro App Visual 🏆

🎯 Objetivo

Construir uma interface estática atraente usando widgets básicos.

📝 Descrição

Crie uma "Tela de Apresentação" (Landing Page) para um aplicativo, focando totalmente no layout e nos componentes visuais do Material Design.

🛠️ Requisitos

Usar um Scaffold com AppBar.
Exibir um texto de "Boas-vindas" estilizado.
Adicionar uma imagem centralizada.
Incluir um botão que, ao ser clicado, imprime uma mensagem no console.

💡 Dica

Explore o widget Center e Column para organizar os elementos no meio da tela.

Projeto 05 - Dashboard Pessoal 🎨

🎯 Objetivo

Dominar widgets de layout como Column, Row e Expanded.

📝 Descrição

Crie uma tela de painel (Dashboard) que exiba informações resumidas de um usuário, como nome, saldo fictício e uma grade de ícones de navegação rápida.

🛠️ Requisitos

Cabeçalho com foto (CircleAvatar) e nome.
Um cartão centralizado com um saldo estilizado.
Uma grade 2x2 de botões/ícones usando Row e Column.
Uso correto de Padding para evitar que os elementos toquem as bordas da tela.

💡 Dica

Utilize o widget Card para dar um efeito de elevação e bordas aos seus elementos.

Projeto 06 - Galeria de Fotos 📸

🎯 Objetivo

Trabalhar com componentes de imagem e rolagem de conteúdo.

📝 Descrição

Desenvolva uma galeria que exiba fotos vindas da internet. O foco aqui é carregar imagens de forma eficiente e garantir que a interface seja rolável.

🛠️ Requisitos

Uso de Image.network com imagens reais.
Implementação de SingleChildScrollView ou ListView.
Adição de legendas abaixo de cada foto usando Text estilizado.
Efeito de carregamento (placeholder) enquanto a imagem baixa.

💡 Dica

O site unsplash.com oferece URLs de imagens aleatórias ótimas para testes.

Projeto 07 - App de Receitas 🛣️

🎯 Objetivo

Implementar navegação entre múltiplas telas e passagem de parâmetros.

📝 Descrição

Crie um aplicativo com duas telas: uma lista de receitas e uma tela de detalhes que mostra os ingredientes quando uma receita é clicada.

🛠️ Requisitos

Tela 01: Lista de Receitas (mínimo 3).
Tela 02: Detalhes da Receita selecionada.
Uso de Navigator.push para transição.
Botão de voltar na tela de detalhes.

💡 Dica

Crie uma classe Receita para organizar os dados que serão passados de uma tela para outra.

🎯 Objetivo

Construir formulários robustos com validação de dados em tempo real.

📝 Descrição

Desenvolva uma tela de login profissional, com campos para e-mail e senha, tratando erros de digitação e exibindo mensagens de feedback.

🛠️ Requisitos

Widget Form com GlobalKey.
Campos TextFormField com validação (e-mail válido e senha curta).
Uso de obscureText para a senha.
Exibição de uma SnackBar de sucesso caso tudo esteja correto.

💡 Dica

Não esqueça de usar um TextEditingController para limpar os campos após o login.

Projeto 09 - Lista de Desejos 🔄

🎯 Objetivo

Aplicar o gerenciamento de estado global usando o pacote Provider.

📝 Descrição

Crie um aplicativo onde o usuário pode visualizar uma lista de produtos e "favoritar" aqueles que deseja. O estado do coração deve ser compartilhado entre diferentes widgets.

🛠️ Requisitos

Instalação e configuração do pacote Provider.
Criação de um ChangeNotifier para gerenciar a lista de favoritos.
Uso de context.watch() para exibir o contador de favoritos.
Uso de context.read() para adicionar/remover itens.

💡 Dica

Lembre-se de envolver seu MaterialApp com o ChangeNotifierProvider no arquivo main.dart.

Projeto 10 - Consulta de CEP 📡

🎯 Objetivo

Consumir dados de uma API externa e tratar processos assíncronos.

📝 Descrição

Desenvolva um buscador de endereços. O usuário digita o CEP e o aplicativo busca as informações (Rua, Bairro, Cidade) usando a API do ViaCEP.

🛠️ Requisitos

Uso do pacote http.
Chamada assíncrona (async/await) para a API.
Tratamento de erro (caso o CEP não exista).
Exibição de um CircularProgressIndicator durante a busca.

💡 Dica

A URL da API é: https://viacep.com.br/ws/01001000/json/. Substitua o número pelo valor digitado pelo usuário.

Projeto 11 - Bloco de Notas SQL 💾

🎯 Objetivo

Persistir dados de forma permanente usando o banco de dados SQLite.

📝 Descrição

Crie um aplicativo de bloco de notas onde as anotações do usuário não desapareçam quando o app for fechado.

🛠️ Requisitos

Uso do pacote sqflite.
Criação da tabela no banco de dados local.
Operações de Inserir e Listar notas.
Funcionalidade de deletar uma nota.

💡 Dica

Crie um arquivo database_helper.dart para concentrar toda a lógica do SQLite em um só lugar.

Projeto 12 - Refatoração Profissional 🏆

🎯 Objetivo

Organizar o código seguindo padrões de arquitetura e boas práticas.

📝 Descrição

Pegue um dos projetos anteriores (como a Consulta de CEP) e reorganize-o totalmente, separando a interface da lógica de negócio.

🛠️ Requisitos

Criação de uma pasta models/ com a classe de dados.
Criação de uma pasta services/ para a chamada da API.
Criação de uma pasta providers/ para o gerenciamento de estado.
Limpeza do arquivo main.dart (deixando apenas as rotas e tema).

💡 Dica

O objetivo não é adicionar funções novas, mas sim deixar o código "limpo" e fácil de ler para outro desenvolvedor.

Projeto 13 - App Android Final 🤖

🎯 Objetivo

Gerar a versão de produção para dispositivos Android.

📝 Descrição

Neste projeto, você vai preparar o seu aplicativo (pode ser o da Aula 12) para o mundo real. Você irá configurar o nome oficial, o ícone e realizar o build de produção.

🛠️ Requisitos

Trocar o ícone do aplicativo usando flutter_launcher_icons.
Configurar o nome do app no AndroidManifest.xml.
Aumentar o versionCode no build.gradle.
Gerar o arquivo APK assinado.

💡 Dica

Sempre use o comando flutter build apk --release para garantir que o seu arquivo final seja o menor possível.

Projeto 14 - Portfólio Web 🌐

🎯 Objetivo

Hospedar seu primeiro aplicativo na internet.

📝 Descrição

Transforme um de seus apps em uma versão Web e realize o deploy em um servidor gratuito. O objetivo é que qualquer pessoa com o link possa acessar seu trabalho pelo navegador.

🛠️ Requisitos

Habilitar o suporte Web no projeto.
Garantir que o layout não quebre ao ser aberto no computador.
Gerar o build com flutter build web.
Realizar o deploy no GitHub Pages (ou Firebase Hosting).

💡 Dica

Use o widget LayoutBuilder para remover elementos desnecessários (como botões gigantes) quando a tela for muito larga.

Projeto 15 - Editor de Texto Desktop 💻

🎯 Objetivo

Criar uma aplicação funcional para computadores (Windows/macOS/Linux).

📝 Descrição

Desenvolva um editor de notas simples que rode como uma janela nativa no seu computador, permitindo escrever textos longos.

🛠️ Requisitos

Ajustar o layout para janelas redimensionáveis.
Uso de um TextField com múltiplas linhas (maxLines: null).
Adição de um botão "Copiar Texto" (use o pacote clipboard).
Gerar o executável nativo do sistema.

💡 Dica

Lembre-se que no desktop o usuário tem mouse, então você pode adicionar efeitos de hover nos botões.

Projeto 16 - Super App Multitela 🎓

🎯 Objetivo

Consolidar todo o aprendizado em um projeto final completo e profissional.

📝 Descrição

Este é o seu TCC do curso. Você deve construir um aplicativo que consuma uma API, salve dados localmente e tenha um login funcional, rodando tanto em Mobile quanto em Web.

🛠️ Requisitos

Persistência de Dados (SQLite ou SharedPreferences).
Consumo de API (HTTP).
Gerenciamento de Estado Global (Provider).
Navegação com Rotas Nomeadas.
Layout Responsivo (Mobile + Web).

💡 Dica

Documente bem o seu código e faça um bom README.md no seu GitHub explicando como rodar o projeto. Isso conta muito no seu portfólio!

Quizzes

Quizzes Interativos 🧠

Teste seus conhecimentos rapidamente ao final de cada aula.

Módulo 1: Fundamentos ---
Módulo 2: Interfaces ---
Módulo 3: Lógica ---
Módulo 4: Prática ---

Quiz 01

1. O que define o desenvolvimento multiplataforma?

Criar um código exclusivo para cada sistema operacional.

Usar uma única base de código para várias plataformas (iOS, Android, Web).

Desenvolver apenas para navegadores de internet.

Criar aplicativos que rodam apenas em servidores. *Explicação: O objetivo principal é a reutilização de código entre diferentes sistemas.*

2. Qual a principal vantagem do Flutter em relação ao desenvolvimento nativo?

Acesso mais lento ao hardware.

Necessidade de aprender Objective-C.

Maior produtividade com uma única base de código.

Interfaces que parecem sites (WebView). *Explicação: Com Flutter, você desenvolve uma vez e publica em vários lugares, economizando tempo e recursos.*

3. Como o Flutter desenha sua interface?

Usa componentes nativos do Android (OEM Widgets).

Converte código Dart em HTML e CSS apenas.

Desenha cada pixel na tela usando seu próprio motor gráfico (Skia/Impeller).

Roda dentro de um navegador invisível. *Explicação: O Flutter não usa widgets nativos; ele renderiza sua própria UI de forma independente.*

4. O que é o "Hot Reload"?

Um comando para deletar o projeto.

Um recurso que aplica mudanças no código instantaneamente sem perder o estado.

O processo de carregar o celular enquanto programa.

Uma forma de baixar dependências mais rápido. *Explicação: O Hot Reload permite ver mudanças em milissegundos, acelerando drasticamente o desenvolvimento.*

5. Qual empresa criou o framework Flutter?

Apple

Microsoft

Google

Facebook *Explicação: O Flutter foi lançado e é mantido pelo Google.*

6. Qual linguagem de programação é utilizada pelo Flutter?

Java

Kotlin

Dart

Swift *Explicação: O Dart é a linguagem exclusiva para desenvolvimento com o framework Flutter.*

7. O que o comando `flutter doctor` faz?

Corrige bugs no seu código automaticamente.

Verifica a instalação e as dependências do ambiente de desenvolvimento.

Gera um novo projeto Flutter.

Envia seu app para a loja. *Explicação: Ele é a ferramenta de diagnóstico para garantir que tudo está configurado corretamente.*

8. Qual a diferença entre apps Híbridos (WebView) e Flutter?

Híbridos são mais rápidos que Flutter.

Flutter tem performance superior pois não roda dentro de um navegador.

Não há diferença técnica.

Híbridos usam Dart, Flutter usa JavaScript. *Explicação: Apps baseados em WebView sofrem com latência do navegador, enquanto Flutter é compilado de forma mais próxima ao nativo.*

9. O Flutter pode ser usado para quais plataformas além de Mobile?

Apenas Web.

Apenas Windows.

Web, Windows, macOS e Linux.

Apenas Android e iOS. *Explicação: O Flutter é verdadeiramente multiplataforma, abrangendo mobile, web e desktop.*

10. O que significa o termo "Single Codebase"?

Que o código só pode ter um arquivo.

Que o mesmo código-fonte serve para múltiplas plataformas.

Que apenas uma pessoa pode programar no projeto.

Que o app só roda em uma versão do Android. *Explicação: É a capacidade de manter um único projeto para entregar o app em diversos sistemas.*

Quiz 02

1. O que é o Dart?

Um framework para CSS.

Uma linguagem de programação de tipagem forte criada pelo Google.

O nome do motor gráfico do Flutter.

Uma ferramenta de design para prototipagem. *Explicação: Dart é a linguagem base do Flutter, focada em performance e UI.*

2. Como declaramos uma variável com inferência de tipo no Dart?

int x = 10;

string nome = "Oi";

var valor = 50;

dynamic x = 10; *Explicação: O `var` permite que o Dart descubra o tipo da variável automaticamente pelo valor atribuído.*

3. O que é o "Null Safety" no Dart?

Uma forma de apagar todas as variáveis nulas.

Um recurso que evita erros de acesso a referências nulas em tempo de compilação.

Um sistema de segurança contra vírus.

Um modo de converter nulos em zeros. *Explicação: O Null Safety obriga o programador a tratar valores nulos explicitamente, evitando o famoso "null pointer exception".*

4. Qual operador usamos para permitir que uma variável aceite valores nulos?

!

?

??

. *Explicação: O `?` após o tipo (ex: `String?`) indica que aquela variável pode receber `null`.*

5. Como se define uma função que não retorna nenhum valor?

def

function

empty

void *Explicação: `void` é a palavra-chave para funções que executam uma tarefa sem devolver um resultado.*

6. Qual a saída do código: `var x = "10"; print(x.runtimeType);`?

int

String

dynamic

double *Explicação: Como o valor está entre aspas, o Dart infere que o tipo é String.*

7. Para que serve o operador `??` no Dart?

Comparar se dois valores são nulos.

Fornecer um valor padrão caso o operando da esquerda seja nulo.

Forçar uma variável a ser nula.

Multiplicar dois valores. *Explicação: Ex: `nome ?? "Anônimo"` retorna "Anônimo" se `nome` for nulo.*

8. Qual o tipo de dado correto para números decimais (ex: 3.14)?

int

float

double

decimal *Explicação: No Dart, números de ponto flutuante são do tipo `double`.*

9. O que faz o comando `final` antes de uma variável?

Torna a variável global.

Impede que o valor da variável seja alterado após a primeira atribuição.

Deleta a variável após o uso.

Faz a variável ser nula. *Explicação: `final` define uma constante que só pode ser definida uma única vez.*

10. Como realizamos a interpolação de strings no Dart?

"Olá " + nome

"Olá $nome"

"Olá {nome}"

"Olá #nome" *Explicação: O símbolo `$` permite inserir o valor de uma variável diretamente dentro de uma String.*

Quiz 03

1. Qual a pasta onde a maior parte do código fonte (.dart) deve ficar?

assets/

android/

lib/

test/ *Explicação: A pasta `lib` é o diretório principal para o desenvolvimento do código da aplicação.*

2. Para que serve o arquivo `pubspec.yaml`?

Gerenciar as imagens do Android.

Configurar metadados, versões e dependências do projeto.

Guardar as senhas do banco de dados.

Definir o design das telas. *Explicação: Ele é o manifesto do projeto, onde listamos pacotes externos e configurações globais.*

3. Qual comando baixamos as dependências listadas no `pubspec.yaml`?

flutter install

flutter pub get

flutter update

pub download *Explicação: O `pub get` sincroniza as dependências declaradas com o seu ambiente local.*

4. Onde configuramos as imagens (assets) do nosso aplicativo?

No arquivo main.dart.

Na pasta android/app/src.

Na seção `flutter: assets:` do pubspec.yaml.

Não é necessário configurar. *Explicação: Todos os recursos externos como imagens e fontes precisam ser registrados no `pubspec.yaml`.*

5. Qual a função da pasta `test/`?

Guardar códigos que não funcionam.

Armazenar testes automatizados de unidade, widget e integração.

Reservada para o Google.

Guardar versões antigas do app. *Explicação: É a pasta dedicada à garantia de qualidade através de testes automáticos.*

6. Qual o ponto de entrada (entry point) de um aplicativo Flutter?

A class MyApp.

A função main().

O arquivo pubspec.

O Gradle. *Explicação: Todo programa Dart começa sua execução pela função global `main()`.*

7. O que contém as pastas `android/`, `ios/` e `web/`?

Backups do código Dart.

Código nativo necessário para hospedar e rodar o app em cada plataforma.

Tutoriais de cada sistema.

Fotos do projeto. *Explicação: Elas contêm os "wrappers" nativos que permitem ao Flutter interagir com o sistema operacional.*

8. No `pubspec.yaml`, o que indica o `^` antes da versão de um pacote?

Que a versão é opcional.

Que o Flutter pode baixar versões compatíveis mais recentes (patches/minors).

Que a versão deve ser exatamente aquela.

Que o pacote é do Google. *Explicação: O circunflexo indica compatibilidade semântica para atualizações seguras.*

9. Qual widget é quase sempre o primeiro a ser chamado dentro do `runApp()`?

Scaffold

MaterialApp

Center

Text *Explicação: O `MaterialApp` configura o sistema de design, navegação e temas para todo o app.*

10. O que é o `.metadata` em um projeto Flutter?

Suas fotos pessoais.

Um arquivo gerado automaticamente para rastrear propriedades do projeto.

Onde se escreve o código do app.

Um vírus. *Explicação: É um arquivo de controle interno do Flutter SDK que não deve ser editado manualmente.*

Quiz 04

1. O que é um Widget no Flutter?

Uma linha de código JavaScript.

A unidade básica de construção da interface do usuário.

Um tipo de banco de dados.

O ícone do aplicativo. *Explicação: No Flutter, absolutamente tudo (botões, textos, alinhamentos) é um Widget.*

2. Qual a principal diferença entre StatelessWidget e StatefulWidget?

StatelessWidget é mais rápido.

StatefulWidget não pode ter filhos.

StatelessWidget é imutável, enquanto StatefulWidget pode mudar de estado durante a execução.

StatelessWidget só funciona no Android. *Explicação: O `StatefulWidget` possui um objeto de estado que permite que a UI seja atualizada dinamicamente.*

3. Qual método é obrigatório em todo StatelessWidget?

create()

initState()

build()

run() *Explicação: O método `build` é onde definimos como o widget deve ser desenhado na tela.*

4. Como o Flutter organiza os widgets na tela?

Em uma lista linear.

Em uma tabela de pixels.

Em uma estrutura de árvore (Widget Tree).

De forma aleatória. *Explicação: A hierarquia de widgets (pai e filho) forma a Árvore de Widgets.*

5. Para que serve o widget `Scaffold`?

Para criar animações complexas.

Para fornecer uma estrutura visual básica (AppBar, Body, FloatingActionButton).

Para conectar ao banco de dados.

Para mudar a cor do texto. *Explicação: O `Scaffold` é o "esqueleto" que implementa o layout visual básico do Material Design.*

6. Qual widget usamos para centralizar um filho na tela?

Middle

Center

AlignMiddle

Column *Explicação: O widget `Center` alinha seu filho exatamente no meio do espaço disponível.*

7. O que acontece quando chamamos `setState()`?

O app fecha.

O banco de dados é limpo.

O Flutter marca o widget para ser reconstruído com os novos dados.

O código Dart é deletado. *Explicação: O `setState` notifica o framework de que o estado interno mudou, disparando o método `build` novamente.*

8. Qual o papel do `MaterialApp`?

Definir o nome do desenvolvedor.

Configurar o tema global, rotas e idioma do aplicativo.

Criar um banco de dados SQL.

Aumentar a velocidade da internet. *Explicação: Ele é o widget raiz que envolve todo o sistema de design Material do app.*

9. Widgets no Flutter são inspirados em qual outro framework famoso?

Angular

React (pela abordagem declarativa)

Vue

Django *Explicação: O Flutter utiliza uma abordagem declarativa de UI, similar ao React.*

10. Como adicionamos um comentário em uma única linha no código Dart de um Widget?

# comentário

// comentário

/* comentário */ *Explicação: Assim como em Java/C/JS, o Dart usa `//` para comentários de linha.*

Quiz 05

1. Qual widget usamos para empilhar outros widgets verticalmente?

Row

Column

Stack

ListView *Explicação: A `Column` organiza seus filhos de cima para baixo em uma linha vertical.*

2. E para alinhar elementos horizontalmente (lado a lado)?

Column

Center

Row

Padding *Explicação: A `Row` distribui seus filhos da esquerda para a direita.*

3. Qual propriedade da `Column` alinha os itens no eixo vertical (eixo principal)?

crossAxisAlignment

mainAxisAlignment

alignVertical

spacing *Explicação: No `Column`, o eixo principal (`main`) é o vertical.*

4. Para que serve o widget `Container`?

Apenas para guardar texto.

Para combinar pintura, posicionamento e dimensionamento de widgets.

Para criar listas infinitas.

Para tocar músicas. *Explicação: O `Container` é um canivete suíço para estilização (bordas, cores, tamanhos).*

5. Qual a diferença entre Padding e Margin?

Não há diferença.

Padding é espaço interno; Margin é espaço externo ao widget.

Margin é apenas para cores.

Padding só funciona em botões. *Explicação: O padding afasta o conteúdo das bordas internas da caixa, enquanto a margem afasta a caixa de outros widgets externos.*

6. Como fazemos para um widget ocupar todo o espaço restante em uma `Row` ou `Column`?

Colocando width: double.infinity.

Envolvendo-o no widget `Expanded`.

Usando um `Container` vazio.

Aumentando o tamanho da fonte. *Explicação: O `Expanded` força o widget a se expandir para preencher o espaço disponível no eixo principal.*

7. Qual widget permite colocar elementos uns sobre os outros (em camadas)?

Column

Row

Stack

Layer *Explicação: O widget `Stack` (Pilha) sobrepõe widgets na ordem em que são declarados.*

8. O que o `MainAxisAlignment.spaceBetween` faz?

Coloca todos os itens no centro.

Coloca o primeiro item no início, o último no fim e distribui o espaço entre os demais.

Deleta o espaço entre os itens.

Cria uma borda preta. *Explicação: Ele maximiza o espaço entre os elementos dentro do eixo principal.*

9. Qual widget fornece rolagem automática quando o conteúdo ultrapassa o tamanho da tela?

Scaffold

Column

SingleChildScrollView

OverflowBox *Explicação: Sem um widget de scroll, o Flutter mostra um erro de "Overflow" (faixas amarelas e pretas) se o conteúdo for maior que a tela.*

10. No widget `Container`, como definimos uma borda arredondada?

Usando o comando `borderRadius` direto no Container.

Através da propriedade `decoration: BoxDecoration(...)`.

Usando o widget `CircleAvatar`.

Não é possível arredondar bordas. *Explicação: Estilização avançada do Container é feita via `BoxDecoration`.*

Quiz 06

1. Qual propriedade do widget `Text` usamos para mudar a cor e o tamanho da fonte?

font:

theme:

style: TextStyle(...)

colorSettings: *Explicação: Toda a estilização de texto é concentrada na classe `TextStyle`.*

2. Como exibimos uma imagem vinda de uma URL da internet?

Image.asset(...)

Image.network(...)

Image.file(...)

Image.url(...) *Explicação: `Image.network` é o construtor específico para carregar imagens via protocolo HTTP.*

3. Qual o widget de botão padrão que possui cor de fundo e sombra no Material 3?

TextButton

OutlinedButton

ElevatedButton

FlatButton *Explicação: O `ElevatedButton` é o botão de destaque principal na hierarquia visual.*

4. Para que serve o widget `AppBar`?

Para mostrar propagandas.

Para exibir o título da página e ações no topo da tela.

Para salvar dados no celular.

Para mudar o ícone do app. *Explicação: A `AppBar` é a barra superior de navegação e título.*

5. Qual widget usamos para exibir ícones prontos do sistema?

Img()

SVG()

Icon(Icons.nome_do_icone)

MaterialDesign() *Explicação: O Flutter já vem com a biblioteca `Material Icons` integrada.*

6. Qual parâmetro de um botão define o que acontece quando ele é clicado?

onClick:

onPressed:

tap:

execute: *Explicação: No Flutter, a função de callback de clique é quase sempre chamada de `onPressed`.*

7. Como transformamos qualquer widget em um botão clicável?

Envolvendo-o em um `Scaffold`.

Envolvendo-o em um `GestureDetector` ou `InkWell`.

Usando o comando `makeClickable: true`.

Mudando a cor para azul. *Explicação: `InkWell` adiciona o efeito visual de "toque" (ripple), enquanto `GestureDetector` captura apenas o gesto.*

8. Qual o papel do widget `CircleAvatar`?

Criar um botão redondo.

Exibir uma imagem ou texto em formato circular, comum para fotos de perfil.

Desenhar círculos matemáticos na tela.

Criar um relógio. *Explicação: Ele é o widget padrão para representar avatares de usuários.*

9. O que o widget `Divider` faz?

Divide o valor de dois números.

Desenha uma linha horizontal fina para separar conteúdos.

Quebra a interface em duas.

Fecha o aplicativo. *Explicação: É um componente visual de separação.*

10. Como definimos um ícone que fica no final da `AppBar`?

Usando o parâmetro `leading`.

Usando o parâmetro `title`.

Usando a lista `actions: []`.

Usando `trailing`. *Explicação: `leading` fica no início (esquerda), `title` no meio e `actions` no final (direita).*

Quiz 07

1. Qual classe é responsável por gerenciar a pilha de telas no Flutter?

ScreenManager

Navigator

Router

StackController *Explicação: O `Navigator` controla a transição e a memória das telas visitadas.*

2. O que o comando `Navigator.push()` faz?

Deleta a tela atual.

Adiciona uma nova tela ao topo da pilha de navegação.

Reinicia o aplicativo.

Fecha o aplicativo. *Explicação: Puxar (push) uma tela significa colocá-la na frente do usuário.*

3. Como voltamos para a tela anterior programaticamente?

Navigator.back(context)

Navigator.pop(context)

Navigator.remove(context)

context.goBack() *Explicação: O comando `pop` retira o prato (tela) do topo da pilha, revelando o que estava embaixo.*

4. O que é uma "Rota Nomeada"?

Uma foto da tela.

Uma String que identifica uma tela de forma única (ex: '/login').

O nome do autor do código.

Um tipo de botão. *Explicação: Rotas nomeadas facilitam a organização em aplicativos que possuem muitas telas.*

5. Onde definimos o mapa de rotas nomeadas de um aplicativo?

No Scaffold.

No MaterialApp (parâmetro routes).

No arquivo pubspec.yaml.

Dentro do método build de cada tela. *Explicação: O `MaterialApp` centraliza a configuração de navegação do projeto.*

6. Qual widget é usado para criar a transição visual padrão entre telas no Android e iOS?

BoxRoute

CustomRoute

MaterialPageRoute

AppRoute *Explicação: O `MaterialPageRoute` adapta a animação de entrada conforme o sistema operacional (subida no iOS, fade no Android).*

7. Como passamos dados de uma tela para outra de forma simples?

Salvando em um arquivo de texto.

Através do construtor da classe da nova tela.

Usando o comando `sendData()`.

Não é possível passar dados. *Explicação: Passar argumentos via construtor é a forma mais direta e segura de transferir informações.*

8. O que acontece se chamarmos `Navigator.pop()` na única tela do app?

O app mostra um erro fatal.

Nada acontece.

O aplicativo geralmente é encerrado (fechado).

O app volta para a tela de boot. *Explicação: Sem nada abaixo na pilha, o pop retira a última instância e encerra o processo visual.*

9. Qual a diferença entre `push` e `pushReplacement`?

Nenhuma, são sinônimos.

`pushReplacement` é mais lento.

`pushReplacement` substitui a tela atual na pilha em vez de apenas empilhar por cima.

`pushReplacement` apaga o banco de dados. *Explicação: Útil para telas de Login ou Splash Screens onde você não quer que o usuário volte ao clicar em "Voltar".*

10. Como definimos qual tela será a primeira a abrir no app usando rotas?

Parâmetro `start:`.

Parâmetro `home:`.

Parâmetro `initialRoute:`.

Parâmetro `first:`. *Explicação: `initialRoute` define o ponto de partida do fluxo de navegação.*

Quiz 08

1. Qual widget é a entrada de texto mais básica do Flutter?

TextArea

InputBox

TextField

TextForm *Explicação: O `TextField` é o componente padrão para capturar inputs do teclado.*

2. Para que serve o `TextEditingController`?

Para mudar a cor do teclado.

Para controlar e capturar o texto digitado pelo usuário.

Para apagar o histórico do navegador.

Para formatar números. *Explicação: O controlador permite ler o valor do campo e também preenchê-lo programaticamente.*

3. Qual a principal vantagem do `TextFormField` sobre o `TextField`?

É mais bonito.

Possui integração nativa com o widget `Form` para validação.

Aceita apenas números.

Não precisa de controlador. *Explicação: O `TextFormField` simplifica o processo de validar regras (como "campo obrigatório").*

4. Como acionamos a validação de todos os campos de um formulário?

Clicando em qualquer lugar da tela.

Chamando o método `validateAll()`.

Usando uma chave global (`GlobalKey`) e chamando `_formKey.currentState!.validate()`.

O Flutter valida automaticamente em tempo real. *Explicação: A `GlobalKey` permite acessar o estado interno do formulário de qualquer lugar.*

5. O que a função `validator` deve retornar se a entrada do usuário for válida?

"Ok"

true

null

uma String vazia "" *Explicação: No Flutter, retornar `null` indica que não há erro; qualquer String retornada é exibida como mensagem de erro.*

6. Qual propriedade do `TextField` usamos para ocultar a senha (exibir asteriscos)?

passwordMode: true

hideText: true

obscureText: true

secret: true *Explicação: `obscureText` é o padrão para campos de senha.*

7. Como mudamos o tipo de teclado (ex: teclado numérico ou de e-mail)?

Através da propriedade `keyboardType: TextInputType.number`.

O Flutter detecta automaticamente.

Não é possível mudar o teclado.

Mudando a fonte do texto. *Explicação: `TextInputType` permite otimizar a experiência do usuário dependendo do dado esperado.*

8. Para que serve a propriedade `decoration` no TextField?

Para adicionar bordas, ícones, labels e dicas (placeholders).

Para mudar a linguagem do teclado.

Para rodar o app mais rápido.

Para deletar o texto. *Explicação: O `InputDecoration` cuida de toda a perfumaria e rótulos do campo.*

9. Onde devemos instanciar o `TextEditingController` em um StatefulWidget?

Dentro do método build.

No `initState` ou diretamente na classe (fora do build).

No `pubspec.yaml`.

No `main.dart`. *Explicação: Instanciar dentro do `build` faria o controlador ser reiniciado a cada redesenho da tela, perdendo o dado.*

10. Qual widget usamos para mostrar uma mensagem rápida na parte inferior da tela após submeter um formulário?

AlertBox

SnackBar

Toast

BottomSheet *Explicação: A `SnackBar` é o padrão do Material Design para feedbacks rápidos e temporários.*

Quiz 09

1. O que é "Estado" no Flutter?

O país onde o desenvolvedor mora.

Dados que podem mudar e que afetam o que é exibido na tela.

O tamanho do arquivo do aplicativo.

O ícone da bateria do celular. *Explicação: Estado é a "memória" do app: um contador, se um botão está ativo, ou dados de um usuário logado.*

2. Qual o comando básico para atualizar a tela em um StatefulWidget?

refresh()

updateUI()

setState()

reload() *Explicação: O `setState` avisa ao Flutter que os dados mudaram e que o método `build` precisa rodar de novo.*

3. Por que o `setState()` não é recomendado para aplicativos grandes e complexos?

Porque ele apaga o banco de dados.

Porque ele só funciona no Windows.

Porque torna difícil compartilhar dados entre telas diferentes e pode causar problemas de performance.

Porque as cores ficam feias. *Explicação: Gerenciadores de estado globais (como Provider) são necessários para manter o código organizado quando o app cresce.*

4. Qual o papel do pacote `Provider`?

Aumentar a bateria do celular.

Facilitar o compartilhamento de dados e o gerenciamento de estado de forma reativa.

Criar ícones personalizados.

Traduzir o app. *Explicação: O Provider é um "provedor" de dados que avisa aos widgets quando eles devem se atualizar.*

5. O que faz o método `notifyListeners()`?

Toca um som de notificação.

Avisa a todos os widgets que estão escutando o Provider que os dados mudaram.

Fecha o aplicativo.

Envia um e-mail. *Explicação: Sem o `notifyListeners`, os dados mudam no código, mas a tela continua igual.*

6. Onde devemos colocar o `ChangeNotifierProvider` para que o app inteiro tenha acesso aos dados?

No final do arquivo main.dart.

Envolvendo o widget `MaterialApp` (raiz do projeto).

Dentro de cada página.

No `pubspec.yaml`. *Explicação: Colocando no topo da árvore de widgets, todos os ramos abaixo podem "beber" dessa fonte de dados.*

7. Qual a diferença entre `watch` e `read` no contexto do Provider?

`read` é mais rápido que `watch`.

`watch` reconstrói o widget quando o dado muda; `read` apenas acessa o dado uma vez (ex: em cliques de botão).

`watch` serve para ver vídeos, `read` para textos.

Não há diferença. *Explicação: Use `watch` para exibir valores na tela e `read` para disparar ações (funções).*

8. O que é um `Consumer` no pacote Provider?

O usuário final do aplicativo.

Um widget que reconstrói apenas uma parte específica da interface quando o estado muda.

Uma ferramenta para comprar moedas no app.

O nome do banco de dados. *Explicação: O `Consumer` ajuda a otimizar a performance, reconstruindo apenas o pedaço de código que realmente precisa.*

9. Qual o comportamento de um `StatelessWidget` em relação ao estado?

Ele muda de cor sozinho.

Ele é estático e não possui um mecanismo interno para atualizar sua própria UI.

Ele salva dados no banco.

Ele é um widget nulo. *Explicação: `Stateless` (Sem Estado) serve para interfaces que não variam após serem criadas.*

10. Além do Provider, quais são outras formas comuns de gerenciar estado?

Excel e Word.

BLoC, Riverpod e GetX.

HTML e CSS.

Photoshop e Figma. *Explicação: BLoC e Riverpod são alternativas poderosas ao Provider para diferentes fluxos de trabalho.*

Quiz 10

1. O que significa a sigla REST?

Real-time Engine Storage Technology.

Representational State Transfer.

Remote Essential System Task.

Routing Easy Standard Templates. *Explicação: REST é um estilo de arquitetura para sistemas distribuídos, como a web.*

2. Qual protocolo é a base para a comunicação com APIs REST?

FTP

SSH

HTTP

SMTP *Explicação: Quase todos os serviços web utilizam o protocolo HTTP para troca de dados.*

3. Qual o formato de dados mais utilizado para troca de informações entre o Flutter e um servidor?

XML

CSV

JSON

TXT *Explicação: O JSON (JavaScript Object Notation) é leve, fácil de ler por humanos e nativamente suportado pelo Dart.*

4. Qual método HTTP usamos para buscar dados de um servidor (ex: lista de produtos)?

POST

GET

DELETE

UPDATE *Explicação: O `GET` (Obter) é o método padrão para leitura de informações.*

5. Para que serve a palavra-chave `async` em uma função?

Para indicar que a função é secreta.

Para indicar que a função realiza operações que levam tempo e retornam um `Future`.

Para deletar a função da memória.

Para acelerar o processador. *Explicação: Funções assíncronas permitem que o app continue funcionando enquanto espera por uma resposta da rede.*

6. O que o comando `await` faz dentro de uma função assíncrona?

Encerra a função imediatamente.

Pausa a execução da função até que o `Future` seja concluído e devolva o resultado.

Abre um cronômetro na tela.

Reinicia o aplicativo. *Explicação: O `await` (aguardar) evita que o código tente usar um dado que ainda não chegou.*

7. Qual classe do Dart representa um valor que estará disponível "no futuro"?

Maybe

Later

Future

Pending *Explicação: Um `Future` é uma promessa de que você terá uma String daqui a pouco.*

8. Qual a função do método `jsonDecode()`?

Enviar um e-mail.

Converter uma String formatada em JSON para um Objeto Dart (como um Map ou List).

Apagar o código JSON.

Traduzir para o português. *Explicação: Para acessar os dados (`dados['nome']`), precisamos "decodificar" o texto bruto vindo da API.*

9. O que é um "Status Code 200" em uma resposta HTTP?

Erro interno do servidor.

Página não encontrada.

Sucesso (OK).

Acesso negado. *Explicação: O código 200 indica que a requisição foi processada com sucesso.*

10. E o famoso "Erro 404"?

Sucesso total.

Problema no banco de dados.

Recurso não encontrado (Not Found).

Sem conexão com a internet. *Explicação: Significa que a URL digitada não existe no servidor.*

Quiz 11

1. Qual pacote é o mais indicado para salvar pequenas preferências (ex: tema, login persistente)?

sqflite

shared_preferences

file_picker

path_provider *Explicação: `SharedPreferences` é ideal para dados simples do tipo "chave-valor".*

2. A persistência com `SharedPreferences` é síncrona ou assíncrona?

Síncrona.

Assíncrona (usa `Future`).

Depende do sistema operacional.

Não existe no Flutter. *Explicação: Como envolve escrita em disco, as operações são assíncronas para não travar a UI.*

3. Qual o banco de dados SQL oficial para uso local no Flutter?

MySQL

PostgreSQL

SQLite (via pacote sqflite)

MongoDB *Explicação: O SQLite é um banco de dados relacional leve que mora dentro do arquivo do aplicativo.*

4. O que significa a sigla CRUD?

Create, Run, Update, Debug.

Create, Read, Update, Delete.

Code, Read, Undo, Done.

Clear, Reset, Upload, Destroy. *Explicação: São as quatro operações básicas de qualquer banco de dados.*

5. Para que serve o comando `CREATE TABLE` no SQLite?

Para deletar tudo.

Para definir a estrutura (colunas e tipos) de uma nova tabela.

Para inserir um novo usuário.

Para mudar a cor do app. *Explicação: Antes de salvar dados, precisamos definir como a "gaveta" (tabela) deve ser.*

6. Qual o papel da Primary Key (Chave Primária) em um banco de dados?

Abrir o aplicativo.

Identificar de forma única e exclusiva cada registro na tabela (ex: um ID).

Ser a senha do banco.

Guardar fotos. *Explicação: A chave primária garante que nunca existam dois registros idênticos.*

7. Como inserimos um novo dado no SQLite?

db.add(...)

db.insert('nome_tabela', dados_map)

db.save(...)

db.new(...) *Explicação: O método `insert` recebe o nome da tabela e um `Map` com os valores.*

8. O que acontece com os dados salvos em SQLite quando o aplicativo é fechado?

Eles são apagados.

Eles são enviados para o Google.

Eles permanecem guardados permanentemente no disco do celular.

O celular explode. *Explicação: Persistência significa que os dados sobrevivem ao fechamento ou reinicialização do app.*

9. Qual pacote usamos para encontrar o caminho correto das pastas do sistema (como /Documents)?

url_launcher

google_fonts

path_provider

flutter_svg *Explicação: O `path_provider` garante que o app encontre o local seguro para salvar arquivos em cada SO.*

10. Quando devemos preferir um Banco de Dados a um arquivo SharedPreferences?

Quando quisermos mudar a cor do botão.

Quando tivermos grandes volumes de dados relacionados (como uma lista de centenas de produtos).

Nunca, SharedPreferences é sempre melhor.

Quando o app for apenas para Web. *Explicação: Bancos de dados relacionais permitem buscas complexas e filtros em grandes massas de dados.*

Quiz 12

1. Por que a organização de pastas é importante em um projeto profissional?

Para o computador não travar.

Para o aplicativo ser mais caro.

Para facilitar a manutenção, escalabilidade e o trabalho em equipe.

Não é importante, basta tudo estar na pasta 'lib/'. *Explicação: Um projeto bagunçado se torna impossível de atualizar rapidamente sem criar novos bugs.*

2. No padrão de camadas, o que a camada "Model" representa?

Os desenhos da interface.

As classes que definem a estrutura dos dados do sistema.

As chamadas de internet.

O código do banco de dados. *Explicação: O Model é o "molde" dos seus objetos (ex: uma classe `Usuario`).*

3. Qual a função da camada "Service"?

Desenhar botões.

Lidar com lógica Pure-Data e comunicação externa (API/Banco).

Definir o tema do app.

Guardar as senhas do usuário. *Explicação: Services isolam a complexidade de rede da interface do usuário.*

4. O que significa o princípio DRY (Don't Repeat Yourself)?

Não beba água enquanto programa.

Escreva o código o mais rápido possível.

Evite a duplicação de lógica criando código reutilizável.

Comente todas as linhas de código. *Explicação: Código repetido significa que se você achar um erro, terá que corrigir em vários lugares.*

5. O que é um "Widget Customizado"?

Um widget que você comprou na internet.

Um novo widget criado por você ao extrair partes repetidas da interface.

Um widget que só roda no iPhone.

O widget Scaffold. *Explicação: Criar seus próprios widgets (como um `MeuBotaoPadrao`) mantém a UI limpa e consistente.*

6. Qual a vantagem da "Separação de Preocupações" (Separation of Concerns)?

O app fica com menos pastas.

Cada parte do código faz apenas o que é sua responsabilidade, facilitando testes e correções.

As fotos ficam em alta definição.

Não precisa usar Git. *Explicação: Se o erro for na tela, você sabe que o problema está na View, não no Service.*

7. Na Clean Architecture, quem deve conhecer quem?

O Banco de Dados deve conhecer a Tela.

A Camada Externa (UI) depende das camadas internas (Lógica), nunca o contrário.

Ninguém conhece ninguém.

Depende do humor do desenvolvedor. *Explicação: A lógica de negócio deve ser independente da interface para que você possa trocar a UI sem quebrar o sistema.*

8. O que é um "Singleton"?

Um programador que trabalha sozinho.

Um padrão de projeto que garante que uma classe tenha apenas uma única instância em todo o app.

Uma variável que só aceita números 1.

O nome do banco de dados. *Explicação: Útil para classes de Configuração ou instâncias de Banco de Dados.*

9. Para que serve o arquivo `.gitignore`?

Para esconder seu código do Google.

Para evitar que arquivos desnecessários ou sensíveis (como chaves de acesso) sejam enviados ao servidor de controle de versão.

Para deletar o projeto.

Para mudar a cor das pastas. *Explicação: Ele mantém o repositório limpo salvando apenas o código fonte real.*

10. Como se chama a prática de melhorar o código sem mudar seu comportamento externo?

Coding.

Debugging.

Refatoração.

Compilação. *Explicação: Refatorar é "limpar a casa", tornando o código mais legível e eficiente.*

Quiz 13

1. Qual arquivo contém as configurações de versão (versionCode e versionName) do app Android?

main.dart

pubspec.yaml

android/app/build.gradle

AndroidManifest.xml *Explicação: O script de build do Gradle (`build.gradle`) é onde definimos os metadados de versão para a Play Store.*

2. Para que serve o `minSdkVersion`?

Define o tamanho máximo do app.

Define a versão mínima do Android necessária para rodar o aplicativo.

Define a cor do ícone.

Define a velocidade do processador. *Explicação: Se você colocar `minSdkVersion 21`, o app não rodará em versões como Android 4.4.*

3. Qual o formato de arquivo recomendado para subir apps na Google Play Store hoje?

APK

AAB (Android App Bundle)

EXE

ZIP *Explicação: O App Bundle permite que o Google gere APKs otimizados para cada tipo de celular, reduzindo o tamanho do download.*

4. Qual comando usamos no terminal para gerar a versão de "venda" (assinada) do app?

flutter run

flutter create

flutter build appbundle (ou apk)

flutter deploy *Explicação: O comando `build` compila o app em modo `release`, otimizando o código e removendo debuggers.*

5. O que é uma "Keystore" no contexto Android?

Uma loja de aplicativos.

Um arquivo de chave digital usado para assinar e garantir a autenticidade do seu app.

Um teclado virtual.

Um comando do Flutter. *Explicação: Sem a chave de assinatura, o Google Play não aceita o seu aplicativo.*

6. Onde configuramos o nome exibido do app e as permissões (como acesso à internet)?

README.md

AndroidManifest.xml

build.gradle

main.dart *Explicação: O Manifesto é o arquivo de "declaração de intenções" do app para o sistema Android.*

7. Como o Flutter compila o código Dart para rodar no Android em modo release?

Converte para JavaScript.

Roda em um interpretador lento.

Compilação AOT (Ahead-of-Time) para código de máquina nativo (ARM/x86).

Não compila, apenas copia os arquivos. *Explicação: A compilação AOT garante a performance fluida (60fps ou mais) do Flutter.*

8. Qual o comando para listar os dispositivos (emuladores ou físicos) conectados?

flutter list

flutter devices

flutter show

adb help *Explicação: `flutter devices` ajuda a identificar para qual aparelho o código será enviado ao rodar.*

9. Por que é importante testar o app em um dispositivo físico real?

Porque é mais bonito.

Emuladores não refletem perfeitamente o consumo de bateria, limitações de hardware e gestos reais do usuário.

O emulador paga mensalidade.

O emulador não acessa a internet. *Explicação: O comportamento térmico e de memória de um celular real pode ser muito diferente de um PC potente rodando um emulador.*

10. O que o modo `--split-per-abi` faz ao criar um APK?

Divide o código ao meio.

Gera APKs separados para diferentes arquiteturas de processador, reduzindo o tamanho final de cada arquivo.

Apaga o projeto original.

Muda o idioma para inglês. *Explicação: Útil para distribuir versões leves fora da Play Store.*

Quiz 14

1. O Flutter Web utiliza qual linguagem como resultado final do build?

C++

Java

JavaScript (além de HTML/CSS)

Python *Explicação: Para rodar no navegador, o código Dart é transpilado para JavaScript.*

2. Qual widget é fundamental para criar layouts que se adaptam a diferentes tamanhos de janela de navegador?

Flexible

LayoutBuilder

PageView

Scaffold *Explicação: O `LayoutBuilder` permite que você tome decisões baseadas na largura e altura da "janela" atual.*

3. Qual a principal diferença entre os renderizadores HTML e CanvasKit?

HTML é mais pesado.

CanvasKit oferece maior fidelidade visual e performance, mas gera um download inicial maior (WebAssembly).

HTML não suporta botões.

CanvasKit só funciona no Firefox. *Explicação: CanvasKit usa WebAssembly para desenhar a interface exatamente como no mobile.*

4. Qual pasta é gerada após o comando `flutter build web`?

bin/web

dist/

build/web/

out/web *Explicação: Esta pasta contém o `index.html` e todos os recursos prontos para serem hospedados em um servidor.*

5. O que significa "Hospedagem Estática" (Static Hosting)?

Um servidor que não se move.

Servidores que entregam arquivos HTML/JS/CSS puros sem processamento no lado do servidor (ex: GitHub Pages).

Um banco de dados SQL online.

Onde se guardam cabos de rede. *Explicação: Como o Flutter Web é apenas um conjunto de arquivos, ele pode ser hospedado de forma barata ou gratuita.*

6. Como configuramos a URL base do app web (importante para o carregamento de imagens)?

No main.dart.

No parâmetro `--base-href` do comando de build ou via tag `` no index.html.

No WhatsApp do Google.

Não é necessário configurar. *Explicação: Sem a base-href correta, o navegador pode se perder ao tentar achar os scripts do app.*

7. É possível transformar um app Flutter Web em um PWA (Progressive Web App)?

Não, Flutter não suporta PWAs.

Sim, o Flutter gera automaticamente o `manifest.json` e o `service worker` para isso.

Apenas se usar JavaScript puro.

Sim, mas só no Android. *Explicação: PWAs permitem que o app web seja instalado no celular e funcione parcialmente offline.*

8. Qual o comando para rodar o app no navegador Chrome durante o desenvolvimento?

flutter start

flutter run -d chrome

dart web

open index.html *Explicação: O Flutter SDK se conecta ao Chrome para permitir o debug e o hot reload na web.*

9. Por que o SEO é um desafio no Flutter Web?

O Google não gosta de Flutter.

Pois o conteúdo é desenhado dinamicamente via JS/Canvas, dificultando a leitura simples pelos robôs de busca.

Porque os códigos são criptografados.

Porque não usa imagens. *Explicação: Embora esteja melhorando, o Flutter Web ainda é mais focado em web apps do que em sites de conteúdo.*

10. O suporte para Web no Flutter é habilitado por padrão em novas instalações?

Não, precisa de um plugin pago.

Sim, em versões estáveis recentes do Flutter (Canal Stable).

Apenas no Linux.

Só se você tiver o Chrome instalado. *Explicação: Atualmente o suporte web é estável e vem ativado de fábrica.*

Quiz 15

1. Quais sistemas operacionais de desktop o Flutter suporta?

Apenas Windows.

Windows, macOS e Linux.

Apenas macOS.

Windows e Web. *Explicação: O Flutter expandiu para os três principais sistemas operacionais de desktop.*

2. Qual ferramenta extra é necessária para compilar apps Flutter para Windows?

JDK (Java)

Python

Visual Studio (com C++ desktop development)

Xcode *Explicação: O Windows exige o compilador C++ da Microsoft para gerar o executável nativo.*

3. Como habilitamos o suporte para Windows se ele estiver desativado?

flutter windows on

flutter config --enable-windows-desktop

flutter build windows

Instalar o Windows de novo. *Explicação: Através do comando `config` habilitamos as plataformas desejadas no SDK.*

4. No desktop, qual o comportamento esperado de um app quando a janela é redimensionada?

Ele deve fechar.

Ele deve ser responsivo e adaptar seu layout ao novo tamanho da janela.

Ele deve ficar esticado.

Nada acontece. *Explicação: Janelas de computador são muito mais dinâmicas que telas de celular.*

5. Qual a diferença de navegação principal entre mobile e desktop?

Desktop não tem botões.

Desktop frequentemente usa menus laterais (Sidebar) fixos, enquanto mobile usa menus inferiores ou gavetas (Drawer).

Mobile é mais rápido.

Não há diferença. *Explicação: O espaço extra no desktop permite layouts de navegação persistentes.*

6. Qual objeto usamos no Flutter para detectar quando o mouse passa por cima de um widget?

ClickDetector

TapRegion

MouseRegion (onHover/onEnter/onExit)

EyeTracker *Explicação: `MouseRegion` é o widget específico para capturar eventos exclusivos do mouse.*

7. Para que servem os atalhos de teclado (Keyboard Shortcuts) no desktop?

Para economizar bateria.

Para aumentar a produtividade do usuário (ex: Ctrl+C, Ctrl+V, Esc).

Para jogar videogame.

Não existem no Flutter. *Explicação: Aplicativos desktop profissionais sempre oferecem atalhos para funções comuns.*

8. O que o Flutter gera ao final de um build para Windows?

Um arquivo .apk.

Uma pasta contendo um arquivo `.exe` e todas as bibliotecas `.dll` necessárias.

Um site.

Um vídeo do app. *Explicação: É gerado um executável nativo de 64 bits.*

9. O Flutter tem acesso ao sistema de arquivos (Pastas, Arquivos) no desktop?

Não, por segurança.

Sim, através de pacotes como `path_provider` e pacotes nativos de seleção de arquivos.

Apenas se o usuário for administrador.

Apenas no Linux. *Explicação: Diferente dos navegadores, apps desktop podem ler e escrever livremente no disco (com permissão).*

10. Como testamos o app rodando como uma aplicação Windows?

flutter run -d chrome

flutter run -d windows

dart bin/main.dart

Carregando no pendrive. *Explicação: O comando `run` com o target `windows` inicia o processo nativo de depuração.*

Quiz 16

1. Qual a linguagem de programação base do Flutter?

Kotlin

Swift

Dart

Rust *Explicação: Dart é o motor lógico e de interface de todo projeto Flutter.*

2. O que é um "Widget" para o Flutter?

Uma função matemática.

Quase tudo o que compõe a interface e o comportamento do app.

O nome do motor gráfico.

Uma animação 3D. *Explicação: A filosofia do Flutter é fundamentada na composição de widgets.*

3. Qual a principal vantagem do "Hot Reload"?

Economiza internet.

Ciclo de desenvolvimento ultra-rápido, vendo mudanças no código quase em tempo real.

Deixa o app mais leve.

Corrige erros gramaticais. *Explicação: É o que torna o desenvolvimento em Flutter um dos mais produtivos do mercado.*

4. Como lidamos com dados que precisam ser compartilhados entre muitas telas (Estado Global)?

Copiando e colando variáveis.

Usando gerenciadores de estado como Provider, BLoC ou Riverpod.

Guardando tudo no `main.dart`.

Não é possível compartilhar dados. *Explicação: Gerenciamento de estado global evita a "bagunça" de passar dados manualmente por dezenas de construtores.*

5. Para que serve o `Scaffold`?

Para rodar o app no iOS.

Para fornecer o layout visual básico do Material Design (App Bar, Body, FAB).

Para mudar a versão do Dart.

Para apagar o projeto. *Explicação: Ele é o ponto de partida para a maioria das páginas de um app.*

6. Qual o papel do arquivo `pubspec.yaml`?

Guardar o código das telas.

Centralizar configurações do projeto, assets e dependências de pacotes.

Definir as cores do app.

Traduzir o app. *Explicação: Sem ele, o Flutter não sabe quais bibliotecas ou imagens seu projeto usa.*

7. Diferença fundamental entre Stateless e Stateful?

Stateless é para web, Stateful para mobile.

Stateless não muda após criado; Stateful pode redesenhar sua UI conforme os dados mudam.

Stateful é proibido no Android.

Stateless carrega mais rápido. *Explicação: Use Stateless para componentes fixos e Stateful para interativos.*

8. O que faz a compilação AOT (Ahead-of-Time)?

Traduz o código para inglês.

Transforma o código Dart em código de máquina nativo de alta performance para a publicação.

Retarda a execução do app.

Envia o código para o servidor. *Explicação: A compilação antecipada é o segredo para a fluidez das animações no Flutter.*

9. Qual o comando para instalar as dependências de um projeto existente?

flutter install

flutter pub get

pub sync

flutter download *Explicação: Sempre execute este comando ao baixar um projeto do GitHub ou adicionar um novo pacote.*

10. O Flutter permite rodar o MESMO código em quais plataformas?

Apenas Android e Web.

Apenas Windows e macOS.

Android, iOS, Web, Windows, macOS e Linux.

Apenas no Chrome. *Explicação: O Flutter é o framework multiplataforma mais abrangente da atualidade.*

Slides

Slides 📺

Material visual para acompanhamento das vídeo-aulas.

Módulo 1 ---
Módulo 2 ---
Módulo 3 ---
Módulo 4 ---

Configuração

Ambientes de Desenvolvimento 🛠️

Guias para configurar seu computador para o desenvolvimento mobile.

Android --- Instalação do Android Studio, SDK e emuladores.
- Setup 01 - Android Studio
iOS (Opcional/Referência) --- Configuração básica de Xcode e ferramentas Mac.
- Setup 02 - Xcode Foundation
Ferramentas de Apoio --- Git, Terminais e Postman/Insomnia para testes de API.
- Setup 03 - Tools

Setup 01: Android Studio 🤖

O Android Studio é a IDE oficial para o desenvolvimento Android.

1. Requisitos de Sistema

RAM: Mínimo 8GB (Sugerido 16GB+).
Espaço: Mínimo 10GB para IDE + SDKs.
Processador: Intel Core i5 ou equivalente.

2. Instalação

Acesse o site oficial: developer.android.com/studio.
Baixe a versão mais recente para o seu Sistema Operacional.
Execute o instalador e escolha a opção "Standard" na configuração inicial.

3. Configurando o SDK

Após a instalação, vá em Settings > Languages & Frameworks > Android SDK.
Certifique-se de que a versão mais recente do Android (estável) esteja instalada.
Na aba SDK Tools, instale o "Android Emulator" e o "Intel x86 Emulator Accelerator (HAXM)" se estiver no Windows com Intel.

4. Criando um Emulador (AVD)

Abra o Device Manager.
Clique em Create Device.
Escolha um dispositivo (ex: Pixel 7).
Selecione uma imagem de sistema (ex: Level 34 - Android 14).
Finalize e clique no "Play" para iniciar o celular virtual.

5. Solução de Problemas ⚠️

VT-x is disabled: Você precisa habilitar a virtualização na BIOS do seu computador.
Studio muito lento: Adicione a pasta do projeto e as pastas do Android SDK nas exclusões do seu Antivírus.

Setup 02: Xcode (iOS Foundation) 🍎

O Xcode é a ferramenta necessária para compilar e testar apps iOS.

[!IMPORTANT] O Xcode requer um computador Mac (macOS).

1. Instalação

Abra a App Store no seu Mac.
Pesquise por Xcode.
Clique em Obter/Instalar.
Após o download, abra o Xcode para carregar os componentes adicionais do macOS.

2. Configurando Simuladores

Vá em Settings > Platforms.
Verifique se o componente "iOS" está baixado.
Se não estiver, clique em "GET" para baixar a versão mais estável.

3. Comandos de Linha (CLI)

Para que ferramentas de automação funcionem, você precisa instalar os Command Line Tools:

xcode-select --install

4. Opcional: CocoaPods

Muitos projetos iOS antigos ainda usam CocoaPods para dependências:

sudo gem install cocoapods

5. Solução de Problemas ⚠️

Espaço em Disco: O Xcode é muito grande. Garanta pelo menos 40GB de espaço livre para ele e os simuladores.
Build Lento: Use simuladores de modelos mais simples (ex: iPhone SE) para poupar memória RAM se necessário.

Sobre

Sobre o Curso

🎓 Desenvolvimento Multiplataforma Profissional

Este curso foi projetado para capacitar desenvolvedores na criação de aplicações modernas utilizando o Flutter, focando na produtividade de manter uma única base de código para Mobile, Web e Desktop.

🎯 Objetivos do Curso

:material-language-dart: Domínio do Dart --- Compreender a sintaxe moderna, null safety e programação assíncrona necessária para o Flutter.
Padrões de Widgets --- Dominar a composição de interfaces reativas utilizando Widgets Stateless e Stateful.
Gestão de Estado & Dados --- Implementar fluxos de dados eficientes com Provider e integração com bases de dados locais e remotas.
Entrega Multiplataforma --- Aprender as nuances de build e publicação para Android, Web, Windows e Linux.

📚 O Que Você Vai Aprender

🟢 Módulo 1 – Fundamentos (Base Técnica)

Ecossistema Flutter e Instalação
Linguagem Dart para Iniciantes
Estrutura de Projetos e Pubspec
Widgets: A Base de Tudo

🟡 Módulo 2 – Construção de Interfaces (UI/UX)

Layouts (Column, Row, Container)
Componentes Visuais do Material Design
Navegação entre Telas e Parâmetros
Formulários, Validação e Controllers

🔵 Módulo 3 – Lógica e Dados

Gerenciamento de Estado com Provider
Consumo de APIs REST (HTTP & JSON)
Persistência com SQLite e SharedPrefs
Organização Profissional (Layers)

🟣 Módulo 4 – Multiplataforma na Prática

Publicando para Android (Build APK)
Flutter Web e Responsividade
Aplicações Desktop e Empacotamento
Projeto Final Integrador

🛠️ Metodologia

Foco 100% prático e orientado a projetos. Cada aula apresenta um desafio real que culmina em mini-projetos funcionais, preparando o aluno para o mercado de trabalho multiplataforma.

Pronto para dominar o Flutter? Começar Agora

Roadmap do Projeto: Flutter Multiplataforma 🚀

Este documento rastreia a evolução e manutenção do curso.

✅ Fase 1: Planejamento (Concluído)

[x] Definição Syllabus (16 Aulas)
[x] Estrutura Multiplataforma (Mobile, Web, Desktop)
[x] Configuração MkDocs Material com RevealJS

[/] Fase 2: Conteúdo Base (Em Progresso)

[x] Estruturação das 16 Aulas (Markdown)
[ ] Refatoração Visual (Mermaid, Termynal, Admonitions)
[ ] Tradução e Revisão 100% PT-BR
[ ] Validação de Quizzes e Exercícios

🚀 Fase 3: Validação e Lançamento

[ ] Build Strict sem erros
[ ] Teste de links e renderização MathJax
[ ] Deploy GitHub Pages (Branch gh-pages)

Status Atual: Migração de Conteúdo / Refatoração Última Atualização: 21/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de Desenvolvimento Multiplataforma com Flutter. Aqui você encontra recursos adicionais para apoiar seus estudos.

Slides
- Acompanhe o conteúdo teórico com slides dinâmicos em RevealJS.
Exercícios
- Pratique Dart e Flutter com desafios progressivos.
Quizzes
- Valide seu aprendizado com testes rápidos interativos.
Projetos
- Construa aplicativos reais para seu portfólio.
Ambiente
- Guias de instalação (Flutter SDK, VS Code, Emuladores).

Versão para Impressão

Esta página foi gerada automaticamente para impressão.

Desenvolvimento Multiplataforma com Flutter 📱💻

🎯 O Que Você Vai Aprender

📚 Jornada de Aprendizado (16 Aulas)

🟢 Módulo 1: Fundamentos (Aulas 01-04)

🟡 Módulo 2: Construção de Interfaces (Aulas 05-08)

🔵 Módulo 3: Lógica e Dados (Aulas 09-12)

🟣 Módulo 4: Multiplataforma na Prática (Aulas 13-16)

Plano de Ensino 📅

Ementa

Cronograma (16 Aulas)

🟢 Módulo 1: Fundamentos

🟡 Módulo 2: Construção de Interfaces UI/UX

🔵 Módulo 3: Lógica e Dados

🟣 Módulo 4: Multiplataforma na Prática

Avaliação

Aulas

Aula 01 - Introdução ao Desenvolvimento Multiplataforma 🌍

1. O que é desenvolvimento multiplataforma? 🤔

📱 Diferença entre Nativo e Híbrido

2. Ecossistema Flutter 🎨

📊 Estrutura de Renderização

3. Instalação e Ambiente 🛠️

4. Mini-Projeto: Olá Flutter! 🚀

5. Exercício de Fixação 🧠

Aula 02 - Linguagem Dart para Iniciantes 🎯

1. Variáveis e Tipos de Dados 📦

2. Estruturas de Controle 🚦

Condicionais (if/else)

Repetição (for)

3. Funções e Null Safety 🧠

4. Diagrama de Fluxo (Mermaid) 📊

5. Mini-Projeto: Calculadora de IMC Simples 🚀

6. Exercício de Fixação 🧠

Aula 03 - Estrutura de um Projeto Flutter 🏗️

1. Arquivos e Pastas Principais 📂

2. O arquivo pubspec.yaml 📝

3. O arquivo main.dart 🚀

Árvore de Widgets (Mermaid) 📊

4. Mini-Projeto: Adicionando Dependências 🚀

5. Exercício de Fixação 🧠

Aula 04 - Widgets: A Base de Tudo 🧱

1. O que são Widgets? 🤔

⚪ StatelessWidget (Estático)

🔴 StatefulWidget (Dinâmico)

2. Árvore de Widgets 🌳

3. Hot Reload: O Super Poder do Flutter ⚡

4. Estrutura Material Design 🎨

5. Mini-Projeto: Contador Colorido 🚀

6. Exercício de Fixação 🧠

Aula 05 - Layouts e Organização Visual 🎨

1. Column e Row: A Base de Tudo 🏗️

Propriedades de Alinhamento

2. Container, Padding e Margin 📦

3. Expanded e Flexible ↔️

4. Praticando Layouts (Termynal) 💻

5. Mini-Projeto: Perfil de Usuário Simples 🚀

6. Exercício de Fixação 🧠

Aula 06 - Componentes Visuais 🖼️

1. Text, Icon e Image 📸

2. Buttons: Interação com o Usuário 🖱️

3. AppBar e Scaffold 🏗️

4. Testando Componentes (Termynal) 💻

5. Mini-Projeto: Tela de Boas-Vindas 🚀

6. Exercício de Fixação 🧠

Aula 07 - Navegação entre Telas 🛣️

1. Navigator e Pilha de Telas 📚

2. Rotas Nomeadas 🏷️

3. Passagem de Parâmetros 📦

Flow de Navegação (Mermaid) 📊

4. Testando Rotas (Termynal) 💻

5. Mini-Projeto: App de Receitas 🚀

6. Exercício de Fixação 🧠

Aula 08 - Formulários e Validação 📝

1. TextField e Controllers ⌨️

2. Form e TextFormField 🧱

3. Validação de Dados ✅

Fluxo de Validação (Mermaid) 📊

4. Máscaras Básicas 🎭

5. Mini-Projeto: Tela de Cadastro 🚀

6. Exercício de Fixação 🧠