Flutter Responsive & Adaptive UI: Voller Support für Foldables, Tablets und Desktop mit einer einzigen Codebasis

Eine der größten Stärken von Flutter ist die Fähigkeit, mehrere Plattformen von einer einzigen Codebasis aus zu unterstützen. Es ist jedoch ein großer Unterschied, ob eine App auf einem Gerät nur “läuft” oder ob sie ein “hervorragendes, auf das jeweilige Gerät zugeschnittenes Benutzererlebnis” bietet. Lassen Sie uns untersuchen, wie man Responsive und Adaptive UIs erstellt, die über verschiedene Formfaktoren hinweg, von Smartphones und faltbaren Geräten bis hin zu Tablets und großen Desktop-Monitoren, perfekt funktionieren.

Responsive vs. Adaptive

• Responsive: Das Layout passt sich dynamisch an, wenn sich Bildschirmgrößen und -ausrichtungen ändern. (z. B. MediaQuery, LayoutBuilder, Flex)
• Adaptive: Die UI-Komponenten oder das Interaktionsparadigma ändern sich grundlegend basierend auf dem Gerätetyp (Mobilgerät, Desktop, Foldable) oder dem Betriebssystem (iOS, Android, Windows). (z. B. Touch vs. Maus, Wischen vs. Tastenkombinationen)

1. Die Grundlage responsiver Layouts: LayoutBuilder

Anstatt Widgets einfach nur basierend auf der Bildschirmgröße zu strecken, müssen Sie entscheiden, wie Sie den Bildschirmplatz effektiv nutzen. LayoutBuilder ermöglicht es Ihnen, die Benutzeroberfläche basierend auf den Größenbeschränkungen des übergeordneten Widgets unterschiedlich zu rendern.

class ResponsiveScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 1024) {
          // Desktop-Layout
          return DesktopLayout();
        } else if (constraints.maxWidth >= 600) {
          // Tablet-Layout
          return TabletLayout();
        } else {
          // Mobiles Layout
          return MobileLayout();
        }
      },
    );
  }
}

Mit diesem Ansatz können Sie die Struktur ändern – zum Beispiel eine Seitenleiste (NavigationRail oder Drawer) auf breiten Bildschirmen und eine untere Registerkartenleiste (BottomNavigationBar) auf schmalen Bildschirmen anzeigen.

2. Unterstützung für faltbare Geräte: Das Scharnier berücksichtigen

Faltbare Geräte können ein physisches Scharnier (Hinge) in der Mitte des Bildschirms aufweisen. Um Zustände wie den “Flex-Modus” (teilweise gefaltet) zu handhaben, müssen Sie MediaQuery.displayFeatures nutzen.

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) {
    // Rendering basierend auf den Scharniergrenzen aufteilen
    return FlexLayoutWithHinge(hingeBounds: hinge.bounds);
  }

  // Normales Display
  return NormalLayout();
}

Durch die Nutzung von Googles dual_screen-Paket oder dem TwoPane-Widget können Sie ganz einfach eine Listen-Detail-Struktur auf faltbaren Geräten implementieren.

3. Adaptive UI: Plattformoptimierte Erlebnisse bieten

Desktop-Umgebungen basieren auf Maus und Tastatur anstelle eines Touchscreens. Daher sind Maus-Hover-Effekte und die Unterstützung von Tastenkombinationen unerlässlich.

Maus-Hover-Effekte

Um Feedback zu geben, wenn die Maus über ein Element fährt, können Sie FocusableActionDetector oder eine einfache MouseRegion verwenden.

MouseRegion(
  cursor: SystemMouseCursors.click,
  onEnter: (_) => setState(() => _isHovering = true),
  onExit: (_) => setState(() => _isHovering = false),
  child: Container(
    color: _isHovering ? Colors.blue.shade100 : Colors.white,
    child: Text('Fahren Sie mit der Maus hierüber'),
  ),
)

Formfaktor-gerechtes Scrollen

Auf einem Desktop sollte sich das Scrollen mit dem Mausrad natürlich anfühlen. Während neuere Flutter-Versionen dies standardmäßig unterstützen, können Sie das ScrollBehavior überschreiben, wenn ein benutzerdefiniertes Scrollverhalten erforderlich ist.

Zusammenfassung

Eine makellose plattformübergreifende App zu entwickeln erfordert mehr, als nur den Bildschirm zu strecken.

1. Verzweigen Sie Layouts basierend auf Breakpoints mithilfe von LayoutBuilder.
2. Berücksichtigen Sie faltbare Formfaktoren mithilfe von MediaQuery.displayFeatures.
3. Entwerfen Sie adaptive Komponenten, die Maus-/Tastatureingaben und OS-spezifische UI-Stile berücksichtigen.

Wenden Sie diese Techniken an, um hervorragende Flutter-Apps zu entwickeln, die sich auf jedem Gerät wie echte native Apps anfühlen!