Mejora tu Aplicación con Filas y Columnas en Flet

Introducción

En este nuevo video de los tutoriales de Flet, te voy a enseñar cómo estructurar mejor tu aplicación para que trabajes con filas y columnas y puedas ordenar mucho mejor los elementos en la interfaz de tu aplicación. Recordemos que en el capítulo anterior habíamos hecho algo simple, que era apretar un botón y cambiar el texto de la aplicación. Ahora vamos a profundizar un poco más.

Configuración Inicial

Lo primero que vamos a hacer es crear un nuevo archivo llamado clase_dos.py y vamos a empezar a trabajar con filas y columnas. Importamos la librería 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 primera app mejorada con filas y columnas"
    
    texto1 = ft.Text("Texto uno", size=24, color=ft.colors.WHITE)
    page.add(texto1)

ft.app(target=Main)

En este código, hemos importado Flet, creado la función Main y configurado el fondo de la aplicación a color gris azulado. También hemos añadido un texto a la página.

Creación de Filas

Para organizar los elementos en filas, utilizamos ft.Row y añadimos los textos dentro de esta fila:

def Main(page: ft.Page):
    page.bgcolor = ft.colors.BLUE_GREY_900
    page.title = "Mi primera app mejorada con filas y columnas"
    
    texto1 = ft.Text("Texto uno", size=24, color=ft.colors.WHITE)
    texto2 = ft.Text("Texto dos", size=24, color=ft.colors.WHITE)
    texto3 = ft.Text("Texto tres", size=24, color=ft.colors.WHITE)
    
    fila_textos = ft.Row(controls=[texto1, texto2, texto3])
    page.add(fila_textos)

ft.app(target=Main)

Con esto, los textos se mostrarán en una fila, uno al lado del otro. Podemos alinear los elementos en la fila y agregar espaciado:

fila_textos = ft.Row(
    controls=[texto1, texto2, texto3],
    alignment=ft.MainAxisAlignment.CENTER,
    spacing=50
)
page.add(fila_textos)

Esto centrará los elementos en la fila y añadirá un espaciado de 50 píxeles entre ellos.

Creación de Columnas

De manera similar, podemos crear columnas utilizando ft.Column:

def Main(page: ft.Page):
    page.bgcolor = ft.colors.BLUE_GREY_900
    page.title = "Mi primera app mejorada con filas y columnas"
    
    texto_columna1_fila1 = ft.Text("Columna uno, fila uno", size=24, color=ft.colors.WHITE)
    texto_columna1_fila2 = ft.Text("Columna uno, fila dos", size=24, color=ft.colors.WHITE)
    texto_columna1_fila3 = ft.Text("Columna uno, fila tres", size=24, color=ft.colors.WHITE)
    
    columna_textos1 = ft.Column(controls=[texto_columna1_fila1, texto_columna1_fila2, texto_columna1_fila3])
    
    texto_columna2_fila1 = ft.Text("Columna dos, fila uno", size=24, color=ft.colors.WHITE)
    texto_columna2_fila2 = ft.Text("Columna dos, fila dos", size=24, color=ft.colors.WHITE)
    texto_columna2_fila3 = ft.Text("Columna dos, fila tres", size=24, color=ft.colors.WHITE)
    
    columna_textos2 = ft.Column(controls=[texto_columna2_fila1, texto_columna2_fila2, texto_columna2_fila3])
    
    fila_columnas = ft.Row(controls=[columna_textos1, columna_textos2], alignment=ft.MainAxisAlignment.CENTER, spacing=50)
    page.add(fila_columnas)

ft.app(target=Main)

Esto crea dos columnas y las coloca en una fila, alineadas al centro y con espaciado entre ellas.

Conclusión

En este tutorial, hemos aprendido cómo utilizar filas y columnas en Flet para estructurar mejor nuestra aplicación. 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!