Crear una Galería de Productos Responsiva con Flet y Python

Introducción

En este tutorial vamos a aprender a crear una galería de productos responsiva utilizando Flet. Nuestra galería se adaptará al tamaño de la pantalla, mostrando diferentes cantidades de productos por fila dependiendo del ancho de la ventana. Comencemos.

Configuración Inicial

Lo primero que vamos a hacer es crear un nuevo archivo llamado app.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 = "Galería de Productos Responsiva"
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = ft.colors.BLUE_GREY_900
    
    titulo = ft.Text("Galería de Productos", size=32, weight=ft.TextWeight.BOLD)
    page.add(titulo)

ft.app(target=Main)

En este código, hemos configurado el fondo de la aplicación y añadido un título.

Creación de Productos

Vamos a crear una función para generar productos con nombre, precio, color y imagen:

import os
import base64
import flet as ft

def crear_producto(nombre, precio, color, imagen_nombre):
    image_path = os.path.join("assets", imagen_nombre)
    
    try:
        with open(image_path, "rb") as image_file:
            image_bytes = base64.b64encode(image_file.read()).decode("utf-8")
    except FileNotFoundError:
        image_bytes = None
    
    return ft.Container(
        content=ft.Column([
            ft.Image(src=f"data:image/png;base64,{image_bytes}" if image_bytes else None, width=150, height=150, fit=ft.ImageFit.CONTAIN),
            ft.Text(nombre, size=16, weight=ft.TextWeight.BOLD),
            ft.Text(f"${precio}", size=14),
            ft.ElevatedButton(text="Agregar al carrito", color=ft.colors.WHITE)
        ]),
        width=200,
        height=300,
        bgcolor=color,
        border_radius=10,
        padding=10,
        alignment=ft.MainAxisAlignment.CENTER
    )

def Main(page: ft.Page):
    page.title = "Galería de Productos Responsiva"
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = ft.colors.BLUE_GREY_900
    page.scroll = ft.ScrollMode.AUTO
    
    titulo = ft.Text("Galería de Productos", size=32, weight=ft.TextWeight.BOLD)
    page.add(titulo)
    
    productos = [
        crear_producto("Producto 1", 19.99, ft.colors.BLUE_500, "producto1.png"),
        crear_producto("Producto 2", 29.99, ft.colors.GREEN_500, "producto2.png"),
        crear_producto("Producto 3", 39.99, ft.colors.ORANGE_500, "producto3.png"),
        crear_producto("Producto 4", 49.99, ft.colors.PURPLE_500, "producto4.png"),
        crear_producto("Producto 5", 59.99, ft.colors.RED_500, "producto5.png"),
        crear_producto("Producto 6", 69.99, ft.colors.YELLOW_500, "producto6.png"),
        crear_producto("Producto 7", 79.99, ft.colors.PINK_500, "producto7.png"),
        crear_producto("Producto 8", 89.99, ft.colors.BROWN_500, "producto8.png")
    ]
    
    galeria = ft.ResponsiveRow(
        [
            ft.Container(
                content=producto,
                col={"sm": 12, "md": 6, "lg": 4, "xl": 3}
            ) for producto in productos
        ],
        spacing=20
    )
    
    contenido = ft.Column([
        titulo,
        ft.Divider(height=20, color=ft.colors.WHITE),
        galeria
    ])
    
    page.add(contenido)

ft.app(target=Main)

En este código, hemos creado una función para generar productos y una ResponsiveRow para organizar los productos en una galería que se adapta al tamaño de la pantalla.

Conclusión

En este tutorial, hemos aprendido cómo crear una galería de productos responsiva 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!