➕ Tópico 2 – Lista dinâmica: Adicionar itens

Vamos criar uma lista dinâmica onde o usuário digita um texto e adiciona um item ao ListView. Isso cobre as operações de Criação e Leitura do CRUD. Abaixo estão boas práticas de UX/estado para evitar problemas comuns.

✅ Boas práticas

• Trate o input: trim (remover espaços) e valide antes de adicionar.
• Habilite/Desabilite o botão conforme o campo esteja preenchido.
• Atalho de teclado: permitir “Enter” para adicionar (via on_submit).
• Rolagem da lista: defina auto_scroll=True se quiser “colar” no último item.
• Evite duplicados (opcional): mantenha um conjunto (set) com textos já usados.
• Performance: ao inserir muitos itens de uma vez, faça as alterações e chame page.update() apenas no final.

🧪 Exemplo A — Adicionar com botão + validação + auto-scroll

import flet as ft
    
    def main(page: ft.Page):
        page.title = "Semana 5 - Adicionar itens"
    
        # Campo de entrada e ListView (auto_scroll = True para colar no final)
        entrada = ft.TextField(
            label="Novo item",
            hint_text="Digite e clique em Adicionar",
            expand=True,
            prefix_icon=ft.icons.NOTE_ADD,
            autofocus=True
        )
        lista = ft.ListView(expand=True, spacing=8, padding=12, auto_scroll=True)
    
        # Botão começa desabilitado; será habilitado ao digitar algo
        btn_add = ft.FilledButton(text="Adicionar", disabled=True)
    
        # Conjunto opcional para não permitir textos repetidos (case-insensitive)
        vistos = set()
    
        def validar(e=None):
            texto = (entrada.value or "").strip()
            entrada.error_text = None
            btn_add.disabled = (texto == "")
            page.update()
    
        entrada.on_change = validar  # valida a cada digitação
    
        def adicionar(e):
            texto = (entrada.value or "").strip()
            if not texto:
                entrada.error_text = "Digite algo para adicionar à lista."
                page.update()
                return
    
            # Checagem opcional: duplicados
            chave = texto.lower()
            if chave in vistos:
                entrada.error_text = "Esse item já foi adicionado."
                page.update()
                return
    
            # Cria um "card" simples para o item
            item = ft.Container(
                content=ft.Row(
                    [ft.Icon(ft.icons.CIRCLE_OUTLINED, size=18), ft.Text(texto, expand=True)]
                ),
                padding=10, bgcolor="#FAFAFA",
                border=ft.border.all(1, "#E5E7EB"), border_radius=8
            )
    
            lista.controls.append(item)
            vistos.add(chave)
    
            # Limpa o input e volta a desabilitar o botão
            entrada.value = ""
            btn_add.disabled = True
            entrada.error_text = None
    
            # Uma única atualização ao final
            page.update()
    
        # Clique no botão adiciona
        btn_add.on_click = adicionar
    
        page.add(
            ft.Row([entrada, btn_add]),
            lista
        )
    
    ft.app(target=main)

🧪 Exemplo B — “Enter” para adicionar (on_submit)

import flet as ft
    
    def main(page: ft.Page):
        page.title = "Adicionar com Enter"
    
        lista = ft.ListView(expand=True, spacing=6, padding=12, auto_scroll=True)
        entrada = ft.TextField(
            label="Novo item",
            hint_text="Digite e pressione Enter",
            expand=True,
            prefix_icon=ft.icons.NOTE_ADD
        )
    
        def adicionar(e=None):
            texto = (entrada.value or "").strip()
            if not texto:
                entrada.error_text = "Campo vazio."
                page.update(); return
    
            lista.controls.append(
                ft.Container(
                    ft.Text(texto), padding=10, bgcolor="#FAFAFA",
                    border=ft.border.all(1, "#E5E7EB"), border_radius=8
                )
            )
            entrada.value, entrada.error_text = "", None
            page.update()
    
        entrada.on_submit = adicionar  # Enter aciona a mesma função
    
        page.add(lista, ft.Row([entrada, ft.FilledButton("Adicionar", on_click=adicionar)]))
    
    ft.app(target=main)

🧪 Exemplo C — Inserindo em lote (uma única atualização)

import flet as ft
    
    def main(page: ft.Page):
        page.title = "Inserção em lote"
        lista = ft.ListView(expand=True, spacing=6, padding=12)
    
        def adicionar_muitos(e):
            # adiciona 100 itens e atualiza somente no final
            base = len(lista.controls) + 1
            for i in range(base, base + 100):
                lista.controls.append(
                    ft.Container(ft.Text(f"Item {i}"), padding=10, bgcolor="#FAFAFA",
                                 border=ft.border.all(1, "#E5E7EB"), border_radius=8)
                )
            page.update()
    
        page.add(
            ft.Row([ft.FilledButton("Adicionar 100 itens", on_click=adicionar_muitos)]),
            lista
        )
    
    ft.app(target=main)

🔗 Documentação: TextField · ListView · Row · FilledButton · Icon · Container · SnackBar

🛠️ Prática Guiada

Vamos consolidar o conteúdo da semana com um exercício guiado. O objetivo é criar uma aplicação de lista de tarefas que permita:

• Adicionar uma nova tarefa
• Marcar uma tarefa como concluída
• Editar o texto de uma tarefa existente
• Remover uma tarefa

A aplicação será dividida em componentes reutilizáveis, com boa separação de responsabilidades, usando UserControl e funções organizadas em arquivos separados.

Recomendação de estrutura de pastas:

meu_app/
├── main.py
├── componentes/
│   ├── cabecalho.py       # Campo de entrada e botão de adicionar
│   └── tarefa.py          # Classe Tarefa (UserControl)
└── utilidades.py          # Validação e funções auxiliares

✅ Siga os tópicos anteriores e desenvolva sua aplicação por partes, testando cada funcionalidade antes de avançar.

Dica: Use variáveis de instância para manter o estado e atualize sempre com self.update() quando necessário.