En este tutorial vamos a aprender a crear una lista de tareas interactiva con Flet. Vamos a crear una aplicación donde podrás agregar tareas, seleccionarlas y gestionarlas de manera eficiente. Comencemos.
Lo primero que vamos a hacer es crear un nuevo archivo llamado clase_3.py. Recuerda tener instalado Flet ejecutando pip install flet en la terminal. Importamos Flet y creamos nuestra función principal:
import flet as ft
def Main(page: ft.Page):
page.bgcolor = ft.colors.BLUE_GREY_900
page.title = "Mi lista de tareas con Flet"
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
titulo = ft.Text("Mi lista de tareas con Flet", size=30, weight=ft.TextWeight.BOLD)
page.add(titulo)
ft.app(target=Main)
En este código, hemos configurado el fondo de la aplicación a color gris azulado y añadido un título centrado en la página.
A continuación, creamos un campo de entrada para las nuevas tareas y un botón para agregar tareas:
def Main(page: ft.Page):
page.bgcolor = ft.colors.BLUE_GREY_900
page.title = "Mi lista de tareas con Flet"
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
titulo = ft.Text("Mi lista de tareas con Flet", size=30, weight=ft.TextWeight.BOLD)
page.add(titulo)
campo_tarea = ft.TextField(hint_text="Escribe una nueva tarea")
page.add(campo_tarea)
boton_agregar = ft.FilledButton(text="Agregar tarea", on_click=lambda e: agregar_tarea(e, campo_tarea, lista_tareas))
page.add(boton_agregar)
lista_tareas = ft.ListView(expand=1, spacing=10)
page.add(lista_tareas)
ft.app(target=Main)
def agregar_tarea(evento, campo_tarea, lista_tareas):
if campo_tarea.value:
tarea = ft.ListTile(title=campo_tarea.value, leading=ft.Checkbox(on_change=seleccionar_tarea))
lista_tareas.controls.append(tarea)
lista_tareas.update()
campo_tarea.value = ""
campo_tarea.update()
En este código, hemos creado el campo de entrada campo_tarea y el botón boton_agregar. La función agregar_tarea se encarga de añadir una nueva tarea a la lista cuando se presiona el botón.
Para mostrar las tareas en una lista, utilizamos ft.ListView y añadimos las tareas mediante ft.ListTile. Cada tarea tiene un checkbox para seleccionar o deseleccionar la tarea:
def seleccionar_tarea(evento):
tareas_seleccionadas = [tarea.title for tarea in lista_tareas.controls if tarea.leading.value]
tareas_seleccionadas_texto.value = "Tareas seleccionadas: " + ", ".join(tareas_seleccionadas)
tareas_seleccionadas_texto.update()
tareas_seleccionadas_texto = ft.Text("")
page.add(tareas_seleccionadas_texto)
En este código, la función seleccionar_tarea actualiza el texto tareas_seleccionadas_texto para mostrar las tareas seleccionadas.
En este tutorial, hemos aprendido cómo crear una lista de tareas interactiva con Flet. Agradezco a los miembros de Patreon y YouTube que con su apoyo hacen posible seguir trayendo contenido al canal. Si te gustó el video, no olvides suscribirte y darle like. ¡Nos vemos en el próximo tutorial!