Semana 4 - Widgets Básicos no Flet

📑 Sumário da Aula

📌 Introdução
📁 Etapa 1 – Estrutura do Projeto
🔤 Etapa 2 – Criando Campo de Texto
📝 Etapa 3 – Exibindo Texto
🖱️ Etapa 4 – Botão com Ação
📐 Etapa 5 – Organização com Row e Column
🧪 Etapa 6 – Projeto Completo com Interação
🚧 Problemas Comuns
✅ Atividade da Semana

📌 Introdução

Nesta aula, você irá montar uma interface interativa no Flet com os principais widgets da interface:

TextField: entrada de dados
Text: exibição de informações
Button: interação
Row e Column: organização dos elementos

Vamos fazer um app que pede o nome e mostra uma mensagem personalizada ao clicar no botão.

📁 Etapa 1 – Estrutura do Projeto

Vamos começar criando a estrutura do nosso projeto em Flet. Recomendamos sempre utilizar um ambiente virtual (venv) para isolar as bibliotecas do seu projeto e evitar conflitos com outros projetos Python no mesmo computador.

1️⃣ Criar uma pasta para o projeto

mkdir app_widgets
    cd app_widgets

Esses comandos criam e acessam a pasta onde ficará todo o código do app.

2️⃣ Criar o ambiente virtual (venv)

python -m venv venv

Esse comando cria uma pasta chamada venv que vai conter os arquivos do ambiente virtual.

3️⃣ Ativar o ambiente virtual

Esse passo é necessário antes de instalar qualquer biblioteca. Use o comando adequado para seu sistema:

🪟 Windows:
venv\Scripts\activate

🐧 Linux/macOS:
source venv/bin/activate

4️⃣ Instalar o Flet

pip install flet

Esse comando instala o framework Flet dentro do ambiente virtual.

5️⃣ Criar o arquivo principal do app

touch main.py

Se estiver no Windows e o comando acima não funcionar, crie manualmente o arquivo main.py dentro da pasta app_widgets. Esse será o ponto de entrada da sua aplicação.

✅ Resultado esperado:

Sua estrutura de arquivos deve estar assim:

app_widgets/
    ├── venv/
    ├── main.py

💡 Dica: Sempre ative o ambiente virtual antes de rodar seu app, especialmente se você reiniciou o computador ou fechou o terminal.

⌨️ Etapa 2 – Campo de Texto (TextField)

O TextField é um dos widgets mais importantes no Flet. Ele permite ao usuário digitar informações, como seu nome, e interagir com o app.

1️⃣ Código de exemplo com TextField

Abra o arquivo main.py e substitua pelo seguinte código:

import flet as ft

def main(page: ft.Page):
    page.title = "TextField no Flet"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    # Campo de texto
    nome_input = ft.TextField(label="Digite seu nome", width=300)

    # Texto de resposta
    resposta_texto = ft.Text()

    # Função do botão
    def botao_clicado(e):
        resposta_texto.value = f"Olá, {nome_input.value} 👋"
        page.update()

    # Botão
    botao = ft.ElevatedButton(text="Enviar", on_click=botao_clicado)

    # Adicionar elementos na página
    page.add(nome_input, botao, resposta_texto)

ft.app(target=main)

2️⃣ O que esse código faz?

📥 Cria um campo para o usuário digitar o nome (TextField).
🧠 Salva o valor digitado e exibe uma mensagem personalizada ao clicar no botão.
🔁 Atualiza a interface com page.update().

3️⃣ Executar o app

python main.py

O navegador abrirá e você verá um campo de texto com botão. Ao digitar seu nome e clicar, o app responderá com uma saudação.

💡 Dica: Você pode mudar o label ou o texto de resposta para criar interações personalizadas!

🔘 Etapa 3 – Botão (ElevatedButton)

O ElevatedButton é um botão básico, mas essencial, usado para executar ações ao ser clicado. No Flet, ele é altamente personalizável e fácil de usar.

1️⃣ Exemplo simples com ação

Vamos criar um botão que, ao ser clicado, exibe uma mensagem na tela:

import flet as ft

def main(page: ft.Page):
    page.title = "Botão com Flet"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    # Texto que será atualizado
    mensagem = ft.Text()

    # Função que será chamada ao clicar
    def mostrar_mensagem(e):
        mensagem.value = "Você clicou no botão! 👍"
        page.update()

    # Botão
    botao = ft.ElevatedButton(text="Clique aqui", on_click=mostrar_mensagem)

    # Adiciona os widgets à tela
    page.add(botao, mensagem)

ft.app(target=main)

2️⃣ Explicação do código

👆 O botão é criado com o texto "Clique aqui".
🔁 Quando clicado, ele chama a função mostrar_mensagem.
💬 A função altera o valor do texto e atualiza a interface com page.update().

3️⃣ Executar o app

python main.py

Você verá o botão centralizado. Ao clicar nele, a mensagem será exibida abaixo.

💡 Experimente: Mude o texto do botão, a mensagem ou adicione mais ações dentro da função!

📐 Etapa 4 – Organização com Row e Column

No Flet, usamos os widgets Row (linha) e Column (coluna) para organizar visualmente os elementos da interface.

1️⃣ Exemplo com Row (linha horizontal)

import flet as ft

def main(page: ft.Page):
    page.title = "Row no Flet"
    page.horizontal_alignment = ft.MainAxisAlignment.CENTER

    # Organiza os textos lado a lado
    linha = ft.Row(
        controls=[
            ft.Text("Texto A"),
            ft.Text("Texto B"),
            ft.Text("Texto C")
        ],
        spacing=20  # Espaçamento entre os itens
    )

    page.add(linha)

ft.app(target=main)

Resultado: os textos serão exibidos um ao lado do outro.

2️⃣ Exemplo com Column (coluna vertical)

import flet as ft

def main(page: ft.Page):
    page.title = "Column no Flet"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    # Organiza os textos em coluna
    coluna = ft.Column(
        controls=[
            ft.Text("Item 1"),
            ft.Text("Item 2"),
            ft.Text("Item 3")
        ],
        spacing=10
    )

    page.add(coluna)

ft.app(target=main)

Resultado: os textos serão exibidos um embaixo do outro.

3️⃣ Combinando Row e Column

Você pode criar interfaces mais complexas combinando os dois:

linha = ft.Row(
    controls=[
        ft.Text("Nome:"),
        ft.TextField(width=200)
    ]
)

coluna = ft.Column(
    controls=[
        linha,
        ft.ElevatedButton("Enviar")
    ]
)

page.add(coluna)

💡 Dica: Use spacing, alignment e expand=True para personalizar o layout conforme o tamanho da tela.

🧩 Etapa 5 – Interface Completa com TextField + Button + Layout

Nesta etapa, vamos criar um pequeno formulário onde o usuário digita seu nome, clica em um botão e recebe uma saudação. Isso demonstra o uso conjunto de vários widgets do Flet.

✅ Código completo:

import flet as ft

def main(page: ft.Page):
    page.title = "Formulário Interativo"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    # Campo de texto para o nome
    nome_input = ft.TextField(label="Digite seu nome", width=300)

    # Texto de resposta (inicia vazio)
    mensagem = ft.Text(value="", size=24)

    # Função que será chamada ao clicar no botão
    def enviar_click(e):
        nome = nome_input.value.strip()
        if nome:
            mensagem.value = f"Olá, {nome}! 👋"
        else:
            mensagem.value = "Digite um nome válido."
        page.update()

    # Botão de envio
    botao_enviar = ft.ElevatedButton(text="Enviar", on_click=enviar_click)

    # Layout organizado com Column
    page.add(
        ft.Column(
            controls=[
                nome_input,
                botao_enviar,
                mensagem
            ],
            spacing=20,
            alignment=ft.MainAxisAlignment.CENTER
        )
    )

ft.app(target=main)

🎯 Resultado:

Um app simples e funcional, onde o usuário interage com a interface e recebe feedback na tela.

💡 Dica: Você pode evoluir es se exemplo criando múltiplos campos e exibindo os dados em uma DataTable ou ListView.

🧪 Etapa 6 – Projeto Completo com Interação

import flet as ft

def main(page: ft.Page):
    page.title = "App Interativo"

    campo_nome = ft.TextField(label="Digite seu nome")
    mensagem = ft.Text()

    def mostrar_mensagem(e):
        mensagem.value = f"Olá, {campo_nome.value}! 😄"
        page.update()

    botao = ft.ElevatedButton(text="Enviar", on_click=mostrar_mensagem)

    page.add(
        ft.Column([
            campo_nome,
            botao,
            mensagem
        ],
        alignment=ft.MainAxisAlignment.CENTER,
        horizontal_alignment=ft.CrossAxisAlignment.CENTER)
    )

ft.app(target=main)

Execute com:

python main.py

🚧 Problemas Comuns

Flet não encontrado: Rode pip install flet
Ambiente não ativado: Veja se o terminal mostra (venv) no começo
Navegador não abre: Tente ft.app(target=main, view=ft.WEB_BROWSER)

✅ Atividade da Semana

📌 Crie um app com:
- Campo de entrada de nome
- Botão “Enviar”
- Mensagem personalizada com o nome
- Layout com Column centralizada
📸 Tire print do app funcionando e envie na plataforma