Ir al contenido

Guía de Flutter para novatos - Miguel Páramos

FAQ sobre Flutter pal que no tiene ni idea de Flutter | 2º DAM · PMDM

Sistemas de diseño en Flutter: Alternativas razonables a MaterialApp ( CupertinoApp , WidgetsApp y escritorio)

En Flutter, Material se refiere al sistema de diseño Material Design de Google (actualmente Material 3), exactamente el mismo concepto que encontramos en Android nativo con Kotlin. Si bien MaterialApp es el contenedor más habitual en proyectos de Flutter, el framework ofrece diversas alternativas razonables según la plataforma objetivo y la estética que busquemos para nuestra aplicación.

  1. CupertinoApp (Diseño nativo de Apple / iOS):

    • Viene integrado de serie en Flutter.

    • Utiliza la estética de iOS: tipografías SF Pro, barras de navegación translúcidas, ruedas selectoras tipo rueda de ruleta (CupertinoPicker), interruptores de iOS (CupertinoSwitch), etc.

      return const CupertinoApp( // Contenedor raíz con el sistema de diseño iOS de Apple
      home: CupertinoPageScaffold( // Estructura de pantalla equivalente a Scaffold en iOS
      navigationBar: CupertinoNavigationBar(middle: Text('App iOS')), // Barra superior translúcida nativa
      child: Center(child: Text('Hola Apple')), // Contenido centrado con tipografía de iOS
      ), // Fin de CupertinoPageScaffold
      ); // Fin de CupertinoApp
  2. WidgetsApp (Sin ningún sistema de diseño):

    • También viene integrado. Es el “esqueleto” puro de Flutter: incluye enrutamiento, dirección del texto (LTR/RTL) y accesibilidad, pero cero estilos visuales.
    • No hay botones Material ni barras de navegación predefinidas. Es la opción ideal si vas a crear un videojuego o tu propio sistema de diseño desde cero sin heredar reglas de Google ni de Apple.
  3. Librerías de terceros para entornos de escritorio:

    • fluent_ui: Si quieres que tu aplicación en Windows parezca una app nativa de Windows 11 (diseño Fluent).
    • macos_ui: Para dar estética nativa de macOS en escritorio.