En este tutorial de Flet, vamos a aprender a crear una aplicación de notas adhesivas. Podrás agregar, editar y eliminar notas fácilmente. Utilizaremos el GridView para organizar nuestras notas de manera eficiente. ¡Comencemos!
Lo primero que vamos a hacer es crear un nuevo archivo llamado clase_4.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.title = "Tablero de Notas Adhesivas"
page.bgcolor = ft.colors.BLUE_GREY_800
page.padding = 20
nota = ft.TextField(value="Mi primera nota", multiline=True)
page.add(nota)
ft.app(target=Main)
En este código, hemos configurado el fondo de la aplicación y añadido un campo de texto para la primera nota.
Vamos a mejorar la apariencia de las notas y añadir funcionalidad para crear nuevas notas:
def crear_nota(texto):
return ft.Container(
content=ft.TextField(value=texto, multiline=True),
width=200,
height=200,
bgcolor=ft.colors.LIGHT_BLUE_100,
border_radius=10,
padding=10
)
def Main(page: ft.Page):
page.title = "Tablero de Notas Adhesivas"
page.bgcolor = ft.colors.BLUE_GREY_800
page.padding = 20
nota = crear_nota("Mi primera nota mejorada")
page.add(nota)
ft.app(target=Main)
Con esta función crear_nota, hemos mejorado la apariencia de la nota y añadido parámetros como el color de fondo, el tamaño y los bordes redondeados.
Para organizar las notas en una cuadrícula, utilizamos GridView:
def Main(page: ft.Page):
page.title = "Tablero de Notas Adhesivas"
page.bgcolor = ft.colors.BLUE_GREY_800
page.padding = 20
notas_iniciales = [
"Comprar leche",
"Llamar al médico",
"Reunión a las 3 PM"
]
grilla = ft.GridView(expand=True, max_extent=220, spacing=10, run_spacing=10, aspect_ratio=1)
for texto in notas_iniciales:
grilla.controls.append(crear_nota(texto))
page.add(grilla)
ft.app(target=Main)
En este código, hemos creado una lista de notas iniciales y las hemos añadido a una GridView. Las notas se organizan automáticamente en la cuadrícula.
A continuación, vamos a añadir funcionalidad para agregar y eliminar notas:
def crear_nota(texto):
nota = ft.TextField(value=texto, multiline=True)
contenedor = ft.Container(
content=ft.Column([
nota,
ft.IconButton(
icon=ft.icons.DELETE,
on_click=lambda e: eliminar_nota(e, contenedor)
)
]),
width=200,
height=200,
bgcolor=ft.colors.LIGHT_BLUE_100,
border_radius=10,
padding=10
)
return contenedor
def eliminar_nota(evento, contenedor):
grilla.controls.remove(contenedor)
page.update()
def agregar_nota(evento):
nueva_nota = crear_nota("Nueva nota")
grilla.controls.append(nueva_nota)
page.update()
def Main(page: ft.Page):
page.title = "Tablero de Notas Adhesivas"
page.bgcolor = ft.colors.BLUE_GREY_800
page.padding = 20
notas_iniciales = [
"Comprar leche",
"Llamar al médico",
"Reunión a las 3 PM"
]
global grilla
grilla = ft.GridView(expand=True, max_extent=220, spacing=10, run_spacing=10, aspect_ratio=1)
for texto in notas_iniciales:
grilla.controls.append(crear_nota(texto))
boton_agregar = ft.IconButton(icon=ft.icons.ADD, on_click=agregar_nota)
page.add(ft.Row([ft.Text("Mis Notas Adhesivas", size=24, weight=ft.TextWeight.BOLD, color=ft.colors.WHITE), boton_agregar], alignment=ft.MainAxisAlignment.SPACE_BETWEEN))
page.add(grilla)
ft.app(target=Main)
En este código, hemos añadido un botón para agregar nuevas notas y la funcionalidad para eliminar notas. Cada nota tiene un botón de eliminar que borra la nota correspondiente de la cuadrícula.
En este tutorial, hemos aprendido cómo crear una aplicación de notas adhesivas utilizando Flet y Python. 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!