Flutter Responsive & Adaptive UI: Soporte completo para plegables, tablets y escritorio con un solo código

Una de las mayores fortalezas de Flutter es su capacidad para soportar múltiples plataformas desde una única base de código. Sin embargo, hay una gran diferencia entre que una aplicación “funcione” en un dispositivo y que “proporcione una experiencia de usuario excelente” adaptada a él. Exploremos cómo construir UIs Responsivas y Adaptativas que funcionen a la perfección en diversos formatos, desde teléfonos inteligentes y dispositivos plegables hasta tabletas y amplios monitores de escritorio.

Responsivo (Responsive) vs Adaptativo (Adaptive)

• Responsivo: El diseño se ajusta dinámicamente cuando cambian el tamaño o la orientación de la pantalla. (Ej.: MediaQuery, LayoutBuilder, Flex)
• Adaptativo: Los componentes de la interfaz o el paradigma de interacción cambian fundamentalmente según el tipo de dispositivo (móvil, escritorio, plegable) o el sistema operativo (iOS, Android, Windows). (Ej.: táctil vs ratón, deslizar vs atajos de teclado)

1. La base de los diseños responsivos: LayoutBuilder

En lugar de simplemente estirar los widgets según el tamaño de la pantalla, debes decidir cómo utilizar el espacio de manera efectiva. LayoutBuilder te permite renderizar la UI de manera diferente basándose en las restricciones de tamaño del widget padre.

class ResponsiveScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 1024) {
          // Diseño de Escritorio
          return DesktopLayout();
        } else if (constraints.maxWidth >= 600) {
          // Diseño de Tablet
          return TabletLayout();
        } else {
          // Diseño Móvil
          return MobileLayout();
        }
      },
    );
  }
}

Usando este enfoque, puedes alterar la estructura; por ejemplo, mostrando una barra lateral (NavigationRail o Drawer) en pantallas anchas y una barra de pestañas inferior (BottomNavigationBar) en pantallas estrechas.

2. Soporte para dispositivos plegables: Evitando la bisagra

Los dispositivos plegables pueden tener una bisagra física en medio de la pantalla. Para manejar estados como el “Modo Flex” (parcialmente doblado), debes utilizar MediaQuery.displayFeatures.

Widget build(BuildContext context) {
  final displayFeatures = MediaQuery.of(context).displayFeatures;
  final hinge = displayFeatures.firstWhereOrNull(
    (feature) => feature.type == DisplayFeatureType.hinge || 
                 feature.type == DisplayFeatureType.fold,
  );

  if (hinge != null) {
    // Dividir el renderizado basándose en los límites de la bisagra
    return FlexLayoutWithHinge(hingeBounds: hinge.bounds);
  }

  // Pantalla normal
  return NormalLayout();
}

Aprovechando el paquete dual_screen de Google o el widget TwoPane, puedes implementar fácilmente una estructura de lista-detalle en dispositivos plegables.

3. UI Adaptativa: Proporcionando experiencias optimizadas por plataforma

Los entornos de escritorio dependen de un ratón y un teclado en lugar de una pantalla táctil. Por lo tanto, los efectos hover del ratón y el soporte de atajos de teclado son esenciales.

Efectos Hover del Ratón

Para proporcionar retroalimentación cuando el ratón pasa sobre un elemento, puedes usar FocusableActionDetector o un simple MouseRegion.

MouseRegion(
  cursor: SystemMouseCursors.click,
  onEnter: (_) => setState(() => _isHovering = true),
  onExit: (_) => setState(() => _isHovering = false),
  child: Container(
    color: _isHovering ? Colors.blue.shade100 : Colors.white,
    child: Text('Pasa el ratón por aquí'),
  ),
)

Desplazamiento apropiado para el formato

En un escritorio, el desplazamiento con la rueda del ratón debe sentirse natural. Aunque las versiones recientes de Flutter lo soportan por defecto, puedes anular ScrollBehavior si necesitas un comportamiento de desplazamiento personalizado.

Resumen

Construir una aplicación multiplataforma impecable requiere pensar más allá de simplemente estirar la pantalla.

1. Ramifica diseños basados en puntos de ruptura usando LayoutBuilder.
2. Acomoda los formatos plegables utilizando MediaQuery.displayFeatures.
3. Diseña componentes adaptativos que consideren las entradas de ratón/teclado y los estilos de UI específicos del sistema operativo.

¡Aplica estas técnicas para desarrollar excelentes aplicaciones Flutter que se sientan verdaderamente nativas en cualquier dispositivo!