Código Espinoza Logo

Crear Aplicaciones Multiplataforma con Flet y Python

Introducción

¿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!

Creación del Proyecto

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.

Importación y Configuración Inicial

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.

Agregar Elementos a la Página

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.

Personalizar 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)

Interactividad con Botones

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!".

Conclusión

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!