Cross-Platform-App: Was ist das, Vergleich von Flutter, React Native und KMP

Was ist eine Cross-Platform-App?

Cross-Platform-App (plattformübergreifende Anwendung) ist eine Software, die entwickelt wurde, um von einer einzigen Codebasis aus auf mehreren mobilen Betriebssystemen zu laufen. Im Gegensatz zur nativen Entwicklung, bei der zwei separate Projekte für iOS (Swift) und Android (Kotlin) gepflegt werden, kombiniert die plattformübergreifende Entwicklung Geschäftslogik, Benutzeroberfläche und Datenschicht in einem Projekt.

Das Konzept der plattformübergreifenden Entwicklung entstand 2009 mit PhoneGap (später Apache Cordova), das eine Webanwendung in ein natives WebView verpackte. Moderne Frameworks haben einen langen Weg zurückgelegt: Flutter kompiliert über Dart in nativen ARM-Code, React Native verwendet eine JavaScript-Engine mit nativer Brücke, und Kotlin Multiplatform kompiliert gemeinsamen Code in plattformspezifische Binärdateien. Bis 2026 verwenden über 40% der neuen mobilen Apps mindestens eine plattformübergreifende Technologie.

Wichtige Kennzahlen der Einführung: 30–50% schnellere Markteinführung, 30–40% Kostensenkung im Vergleich zu zwei nativen Teams, Unterstützung eines einheitlichen Funktionsumfangs auf beiden Plattformen. Allerdings stehen plattformübergreifende Apps immer noch vor Herausforderungen — plattformspezifische UI-Besonderheiten, Hardware-API-Zugriff und leistungskritische Funktionalität wie Animationen und Spiele.

Flutter: Architektur und Leistung

Flutter ist ein Open-Source-UI-Framework von Google mit der Sprache Dart und einer eigenen Skia-Rendering-Engine (Impeller in Version 4.x). Im Gegensatz zu Frameworks, die native Plattformkomponenten verwenden, rendert Flutter jedes Pixel selbst, was die vollständige Kontrolle über die Oberfläche ermöglicht. Dieser Ansatz eliminiert plattformübergreifende Unterschiede, erhöht aber die App-Größe um 5–15 MB.

// Flutter — einfacher Zähler
import 'package:flutter/material.dart';

void main() { runApp(const CounterApp()); }

class CounterApp extends StatelessWidget {
  const CounterApp({super.key});

  Widget build(BuildContext context) {
    return const MaterialApp(home: CounterScreen());
  }
}

class CounterScreen extends StatefulWidget {
  /* ... */
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Plattformübergreifender Zähler')),
      body: Center(
        child: Column(
          children: [
            const Text('Sie haben den Button so oft gedrückt:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Im Kern von Flutter steht eine Widget-Architektur: Alles — von Padding und Ausrichtung bis zu Layout-Einschränkungen — ist ein Widget. Dieses deklarative Modell, von React geerbt, macht die UI vorhersagbar. Dank der AOT-Kompilierung von Dart starten Flutter-Apps in unter 2 Sekunden und halten 60 FPS selbst auf Mittelklasse-Geräten. Impeller, die neue Rendering-Engine, hat die Ruckler während der Shader-Kompilierung beseitigt, die das Hauptproblem von Skia waren.

React Native: JavaScript-Brücke und Ökosystem

React Native ist ein plattformübergreifendes Framework von Meta zum Erstellen mobiler Apps mit JavaScript/TypeScript und React. Anders als Flutter verwendet React Native native UI-Komponenten der Plattform (UIView auf iOS, View auf Android) über eine JavaScript-Brücke. Die Geschäftslogik wird in einer JavaScript-Engine (Hermes oder JSC) ausgeführt und interagiert asynchron mit nativen Modulen.

// React Native — Komponente mit plattformspezifischem Code
import React, { useState } from 'react';
import {
  View, Text, TouchableOpacity, Platform
} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  const greeting = Platform.select({
    ios: 'Hallo von iOS',
    android: 'Hallo von Android',
    default: 'Hallo',
  });

  return (
    <View>
      <Text>{greeting}</Text>
      <Text>{count}</Text>
      <TouchableOpacity
        onPress={() => setCount(c => c + 1)}>
        <Text>+1</Text>
      </TouchableOpacity>
    </View>
  );
};

Der größte Vorteil von React Native ist sein Ökosystem. npm beherbergt über 2 Millionen Pakete, und Bibliotheken wie React Navigation, Expo und Reanimated bieten fertige Lösungen für Navigation, Gesten und Animationen. Expo, ein verwalteter Workflow, vereinfacht das Erstellen und Veröffentlichen mit OTA-Updates und über 50 integrierten nativen Modulen. Instagram, Shopify und Discord laufen auf React Native mit einer gemeinsamen Nutzerbasis von über 500 Millionen monatlich aktiven Nutzern.

Kotlin Multiplatform: Gemeinsame Logik mit nativer UI

Kotlin Multiplatform (KMP) ist eine Technologie von JetBrains, die gemeinsamen Kotlin-Code in plattformspezifische Binärdateien kompiliert. Anders als Flutter und React Native bietet KMP kein UI-Framework — sein Zweck ist es, Geschäftslogik, Datenschicht, Netzwerkanfragen und Validierung wiederzuverwenden, während die Oberfläche vollständig nativ bleibt. Netflix, McDonald's und VMware verwenden KMP in der Produktion.

// Kotlin Multiplatform — gemeinsames Repository in commonMain
class UserRepository(
    private val api: KtorClient,
    private val db: Database
) {
    suspend fun getUsers(): Result<List<User>> {
        return try {
            val users = api.fetch<List<UserDto>>("/users")
            db.save(users.map { it.toDomain() })
            Result.success(db.getAll())
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
}

// expect/actual — Datumsformatierung für die Plattform
expect fun formatDate(timestamp: Long): String

Das Schlüsselmuster von KMP ist der expect/actual-Mechanismus. Im gemeinsamen Modul (commonMain) wird eine expect-Funktion oder -Klasse deklariert, und in jedem plattformspezifischen Quellsatz (androidMain, iosMain) wird die actual-Implementierung bereitgestellt. Dies ermöglicht die Verwendung von Plattform-APIs — SharedPreferences, NSUserDefaults, Kamera, Biometrie — während eine einheitliche öffentliche Schnittstelle im gemeinsam genutzten Code erhalten bleibt. Compose Multiplatform, die UI-Ebene für KMP, erreichte 2025 Stabilität für Android und Desktop, die iOS-Version befindet sich noch in der Beta-Phase.

Vergleich der plattformübergreifenden Frameworks

Leistung variiert erheblich je nach Szenario. Das eigene Rendering von Flutter sorgt für stabile 60 FPS bei Animationen und Übergängen. Die Brückenarchitektur von React Native fügt 2–5 ms Latenz pro nativem Aufruf hinzu, obwohl die neue JSI (JavaScript Interface)-Schicht diese Lücke verringert. KMP hat keinen Overhead für gemeinsam genutzten Code, da es direkt in Plattform-Binärdateien kompiliert. Für UI-intensive Apps mit komplexen Animationen steht die Wahl zwischen Flutter und nativer Entwicklung.

Wie man das richtige Framework auswählt

Die Wahl zwischen Flutter, React Native und KMP hängt von den Projektprioritäten ab. Wenn Sie eine pixelgenaue UI und volle Animationskontrolle benötigen — Flutter bietet die konsistenteste plattformübergreifende Erfahrung. Wenn das Team JavaScript/React beherrscht und das größte Ökosystem an Drittanbieter-Bibliotheken schätzt — React Native ist die pragmatische Wahl. Wenn native Apps bereits existieren und Sie Geschäftslogik teilen müssen — KMP ermöglicht die modulweise Einführung von gemeinsamem Code ohne UI-Kompromisse.

Für MVPs und Startups bieten Flutter oder React Native den kürzesten Weg zum Markt mit 80–100% gemeinsamem Code. Für Unternehmensanwendungen mit einer bestehenden nativen Basis ermöglicht KMP eine schrittweise Modulmigration. Spiele und Medienanwendungen mit benutzerdefiniertem Rendering profitieren von Flutter oder einem vollständig nativen Ansatz. Jedes Framework hat seine Reife bewiesen — Instagram (React Native), Google Pay (Flutter) und Netflix (KMP) laufen auf plattformübergreifenden Technologien.

Trends: Flutter expandiert auf Desktop und Web mit einer einheitlichen Codebasis. React Native eliminiert mit seiner neuen Architektur (Fabric + TurboModules) die Brücke vollständig. KMP mit Compose Multiplatform zielt auf eine einheitliche UI-Ebene bei gleichzeitiger Beibehaltung nativer Leistung ab. Bis 2027 wird die Grenze zwischen plattformübergreifender und nativer Entwicklung vollständig verschwimmen — Frameworks migrieren zu nativen Kompilierungspfaden.