¿Alguna vez has querido crear aplicaciones web, de escritorio y móviles pero te ha intimidado el desarrollo Front-end? Hoy te presento Flet, el framework que te permite construir aplicaciones multiplataforma sin necesidad de ser un experto en Front-end. Flet está basado en Flutter, un popular toolkit de interfaz gráfica de Google, por lo que podrás crear aplicaciones increíbles directamente desde Python. ¡Vamos al código!
Lo primero que vamos a hacer es crear un nuevo proyecto de Python. Yo lo voy a crear en la carpeta C2 Proyectos y le voy a poner "tutorial_flet". Ustedes pueden ponerle el nombre que prefieran. La idea es ir trayendo videos cada vez más avanzados, incorporando nuevas funcionalidades en cada uno.
Una vez creado el proyecto, les aparecerá una carpeta con el entorno virtual. Vamos a crear un nuevo archivo de Python llamado main.py
. Abrimos la consola y ejecutamos pip install flet
para instalar la librería.
Importamos la librería Flet con import flet as ft
. A continuación, creamos una función Main
que será la función principal. Esta función recibirá como parámetro una página de Flet, del tipo ft.Page
.
import flet as ft
def Main(page: ft.Page):
pass
ft.app(target=Main)
Inicializamos la aplicación con ft.app
y le asignamos nuestra función Main
como objetivo. Al ejecutar la aplicación, se abrirá una ventana de Flet.
Vamos a agregar un texto a nuestra aplicación. Usamos page.add
para añadir el texto a la página:
def Main(page: ft.Page):
page.add(ft.Text("Mi primera app con Flet"))
ft.app(target=Main)
Al ejecutar el código, veremos el texto "Mi primera app con Flet" en la ventana de la aplicación.
Podemos añadir un título y cambiar el color de fondo de la aplicación:
def Main(page: ft.Page):
page.title = "Mi App"
page.bgcolor = ft.colors.BLUE_GREY_900
page.add(ft.Text("Mi primera app con Flet"))
ft.app(target=Main)
También podemos alinear los elementos horizontalmente:
def Main(page: ft.Page):
page.title = "Mi App"
page.bgcolor = ft.colors.BLUE_GREY_900
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
page.add(ft.Text("Mi primera app con Flet"))
ft.app(target=Main)
Vamos a añadir un botón que cambie el texto al ser presionado. Creamos una función para manejar el evento del botón y actualizamos el texto:
def Main(page: ft.Page):
page.title = "Mi App"
page.bgcolor = ft.colors.BLUE_GREY_900
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
text = ft.Text("Mi primera app con Flet")
page.add(text)
def cambiar_texto(e):
text.value = "¡Suscríbete para más tutoriales!"
page.update()
boton = ft.FilledButton(text="Cambiar Texto", on_click=cambiar_texto)
page.add(boton)
ft.app(target=Main)
Al ejecutar la aplicación, veremos un botón que al ser presionado cambia el texto a "¡Suscríbete para más tutoriales!".
En este tutorial, aprendimos a crear una aplicación multiplataforma básica usando 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!