Cupertino Widgets en tu app Flutter iOS

Si tu app en Flutter está pensada para iOS, los Cupertino Widgets te permiten replicar la apariencia nativa del sistema operativo: barras de navegación, botones, paletas de colores e indicadores de actividad que ya vienen integrados en iOS. Aquí verás cómo aplicarlos paso a paso sobre una pantalla de dashboard, sustituyendo widgets genéricos de Material por componentes que sienten propios de Apple.

¿Qué son los Cupertino Widgets y por qué usarlos?

Los Cupertino Widgets son la librería oficial de Flutter que imita los componentes nativos de iOS. Vienen listos para usarse y respetan la guía de diseño de Apple, así que tu app se ve y se siente como una aplicación construida directamente en Swift.

¿Qué diferencia hay entre Material y Cupertino en Flutter? Material sigue el diseño de Google (Android), mientras Cupertino replica el estilo de iOS. Cambian colores, tipografías, transiciones y la forma de los botones.

Dentro de esta librería tienes desde el Activity Indicator hasta acciones como cortar y pegar, pasando por una paleta completa de colores del sistema. Y aquí viene lo interesante: combinarlos con widgets propios de Flutter te da flexibilidad sin perder la estética nativa.

¿Cómo reemplazo el Scaffold por un CupertinoPageScaffold?

El punto de partida es cambiar el Scaffold tradicional por su equivalente de Cupertino [00:48]. La estructura se mantiene similar, pero ahora el contenedor superior y la barra de navegación responden al estilo iOS.

Los pasos clave son:

• Eliminar el theme previo, porque vas a usar la paleta nativa de iOS.
• Envolver la pantalla en un CupertinoPageScaffold.
• Asignar un CupertinoNavigationBar a la propiedad navigationBar.
• Usar la propiedad middle para colocar el título de la barra superior.

Este scaffold exige un child, que será el cuerpo de la pantalla. Una buena práctica es separarlo en un método privado tipo _buildBody, así mantienes el código legible.

¿Cómo aplico la paleta CupertinoColors y un gradient nativo?

La paleta CupertinoColors te da acceso directo a los colores del sistema operativo: systemGreen, white, systemGrey y muchos más [03:30]. No necesitas definir un tema personalizado para usarlos.

Para crear un fondo con degradado al estilo iOS, dentro del Container configuras un BoxDecoration con un LinearGradient:

• colors: arranca con CupertinoColors.systemGreen y termina en CupertinoColors.white.
• begin: Alignment.topCenter.
• end: Alignment.bottomCenter.
• stops: [0.3, 0.7] para distribuir el 30% y 70% de la pantalla.

¿Qué hace la propiedad stops en un LinearGradient? Define en qué porcentaje del recorrido se ubica cada color. Con [0.3, 0.7], el primer color ocupa hasta el 30% y el segundo arranca en el 70%, dejando una transición suave en medio.

Envuelve el contenido en un Padding de 16 píxeles para que las tarjetas no queden pegadas a los bordes. Si usas Android Studio, el atajo Option + Enter te permite agregar const, envolver o eliminar widgets sin escribir todo a mano.

¿Cómo transformo un botón de Flutter en un CupertinoButton?

El botón es donde más se nota el cambio visual. Sustituyes el botón de Material por un CupertinoButton.filled, que ya trae el estilo redondeado y el color de acento típico de iOS [07:45].

La estructura mínima necesita dos propiedades:

• child: un Text con la etiqueta, por ejemplo "Create Saving Goal".
• onPressed: la función que se dispara al tocar el botón.

Para mantener la coherencia visual, el color principal del botón apunta a CupertinoColors.systemGreen, mientras los textos secundarios pueden usar CupertinoColors.systemGrey. Los textos por defecto ya heredan el color correcto del sistema, así que en muchos casos puedes eliminar el style y dejar que iOS decida.

¿Cómo ajusto el espaciado para que el dashboard se vea bien?

Al combinar CupertinoPageScaffold con un Column, el contenido tiende a quedar pegado a la barra superior. La solución rápida es agregar un SizedBox como primer hijo del Column con un height de 120 píxeles [11:50].

Ese pequeño ajuste libera espacio visual y permite apreciar el difuminado del gradient junto con la barra de navegación nativa. El resultado: botones, colores y transiciones que se sienten parte del sistema operativo, no de un framework externo.

¿Ya probaste mezclar Cupertino con widgets de Material en la misma pantalla? Cuéntame en los comentarios qué componentes de iOS te gustaría implementar en tu próxima app.