Crear widgets en iOS te permite extender tu aplicación más allá de su pantalla principal y mostrar información relevante directamente en la home del usuario. Si desarrollas apps en Xcode con SwiftUI, este recurso te muestra cómo configurar una Widget Extension, diseñar su interfaz y agregarla a la pantalla de inicio paso a paso.
¿Qué es un widget en iOS y para qué sirve?
Un widget es una miniaplicación que vive en la pantalla de inicio del dispositivo y muestra información clave sin necesidad de abrir la app completa. Piensa en actualizaciones del clima, el estado de un pedido, un tracking o datos resumidos de tu aplicación [00:25].
La idea es que el usuario tenga a la vista lo más relevante: acciones frecuentes, datos en vivo o accesos directos. Y aquí viene lo interesante: un widget no se crea dentro del módulo principal de tu app, sino como una extensión separada.
¿Qué es una Widget Extension? Es un target adicional dentro de tu proyecto Xcode que contiene la estructura, diseño y lógica del widget. Vive fuera de la app principal porque iOS necesita ejecutarla en su propio contexto.
¿Cómo creo una Widget Extension en Xcode?
Para empezar, ve a File > New > Target, filtra por la palabra widget y selecciona Widget Extension [01:30]. Este paso es obligatorio porque sin la extensión no puedes registrar tu widget en el sistema.
Al crear el target, Xcode te pide configurar varios parámetros importantes:
- Nombre del widget, por ejemplo Widget App.
- Team e identificador, que se heredan de tu proyecto principal.
- Include Live Activity, una funcionalidad de las últimas versiones de iOS que permite actualizaciones en tiempo real [02:10].
- Include Control, para configuraciones de actualización.
- Include App Intents, que sirven como puentes para ejecutar acciones desde otras apps o desde Siri.
En este caso no activas ninguna de las tres opciones, pero más adelante Live Activity y App Intents serán claves para widgets dinámicos. Asegúrate de que el proyecto destino sea el correcto antes de finalizar.
¿Qué archivos genera la Widget Extension?
Después de finalizar, Xcode crea un nuevo directorio llamado Widget App con varios archivos:
- Una carpeta Assets propia, separada de la del proyecto principal.
- Un Info.plist con la configuración del widget.
- Un archivo Widget App donde defines la vista.
- Un archivo Widget App Bundle que registra el widget en el sistema.
Si hubieras activado Live Activity, verías archivos extra. Como son contextos diferentes, no puedes acceder directamente a los assets de la app principal: necesitas copiar las imágenes que vayas a usar dentro de los assets del widget [04:15].
¿Cómo diseño la interfaz de un widget con SwiftUI?
Al abrir el archivo del widget, Xcode te muestra una vista previa con la hora y un emoji por defecto. El diseño vive dentro del bloque WidgetConfiguration, que requiere mínimo iOS 17 [05:20].
Para este ejemplo se construye una tarjeta de película con imagen, título, valoración y descripción. El primer cambio es reemplazar el VStack por un HStack para apilar elementos de forma horizontal.
¿Cómo agrego una imagen sin que se deforme?
Después de copiar la imagen Deadpool a los assets del widget, puedes mostrarla con Image("Deadpool"). Para que se vea bien necesitas tres modificadores clave:
resizable() para permitir el redimensionamiento.scaledToFit() para que escale sin perder proporción.frame(width: 80) para fijar el ancho y dejar que el alto se ajuste solo.cornerRadius() para redondear las esquinas.
Con esto la imagen se ve nítida y proporcional dentro del widget [07:40].
¿Cómo agrupo título, estrellas y descripción?
Al lado de la imagen colocas un VStack con alineación al inicio (leading) y un spacing para separar los elementos. Dentro agregas:
- Un
Text("Deadpool & Wolverine") con font(.headline), bold() y lineLimit(1).
- Un
HStack con cinco Image(systemName: "star.fill"), en foregroundColor(.yellow) y tamaño .caption para la valoración.
- Un
Text con la descripción, font(.caption), foregroundColor(.gray) y lineLimit(3).
Si tuvieras los datos desde un servicio externo, podrías iterar las estrellas con un ForEach según la valoración real. Aquí se hace estático para enfocarse en el diseño [10:05].
¿Cómo agrego el widget a la pantalla de inicio?
Al ejecutar la app, iOS añade el widget automáticamente, pero también puedes hacerlo manual: mantén presionada la pantalla, entra en modo edición, toca Adicionar widget y busca por el nombre de la app, en este caso Native Components iOS [12:30].
Elige el tamaño disponible, arrástralo a la pantalla y listo. Si tuvieras varios diseños configurados según el tamaño, aparecerían como opciones distintas. Por ahora solo hay un diseño que se aplica a todos los tamaños.
¿Qué pasa cuando toco un widget? Por defecto abre la pantalla principal de la app. Puedes personalizar ese destino para llevar al usuario a una vista específica con datos concretos usando deep links o App Intents.
¿Por qué este widget es estático y cómo hacerlo dinámico?
El widget que acabas de construir no actualiza información en tiempo real: la imagen, el título y las estrellas siempre muestran lo mismo. Para datos en vivo necesitarías combinarlo con Live Activity, Timeline Providers o App Intents, que permiten refrescar el contenido según eventos o intervalos de tiempo.
Recuerda que cualquier extensión similar, como los Dynamic Island, también debe vivir fuera de la app principal, en su propio paquete. Esa separación es la regla base de los componentes nativos de iOS.
Ahora te toca a ti: crea tu propio widget, personaliza el diseño con tus colores e imágenes, y comparte una captura en los comentarios para mostrar cómo quedó.
