Flutter vs React Native
Wir vergleichen Googles Dart-basiertes Flutter mit Metas JavaScript-/TypeScript-basiertem React Native aus jeder Perspektive. Welches Cross-Platform-Framework setzt sich 2025 durch?
Tiefe Plattformintegration, maximale Performance und beste UX
Eine Codebasis, zwei Plattformen — Geschwindigkeits- und Kostenvorteil
| Kategorie | Native (Swift/Kotlin) | Cross-Platform (Flutter/RN) |
|---|---|---|
| Performance | 10/10 | 8/10 |
| Erlernbarkeit | 6/10 | 8/10 |
| Ökosystem | 10/10 | 8/10 |
| Community | 9/10 | 9/10 |
| Arbeitsmarkt | 9/10 | 8/10 |
| Zukunftssicherheit | 9/10 | 8/10 |
// Swift (iOS) - HealthKit-Integration (nur nativ möglich)
import HealthKit
import SwiftUI
@Observable
class HealthViewModel {
var stepCount: Int = 0
var heartRate: Double = 0
var activeCalories: Double = 0
private let healthStore = HKHealthStore()
func requestPermission() async throws {
let readTypes: Set<HKObjectType> = [
HKObjectType.quantityType(forIdentifier: .stepCount)!,
HKObjectType.quantityType(forIdentifier: .heartRate)!,
HKObjectType.quantityType(forIdentifier: .activeEnergyBurned)!
]
try await healthStore.requestAuthorization(toShare: [], read: readTypes)
}
func fetchTodayStats() async throws {
let now = Date()
let startOfDay = Calendar.current.startOfDay(for: now)
let predicate = HKQuery.predicateForSamples(
withStart: startOfDay, end: now, options: .strictStartDate
)
// Schrittzahl
let stepType = HKQuantityType(.stepCount)
let stepQuery = HKStatisticsQuery(
quantityType: stepType,
quantitySamplePredicate: predicate,
options: .cumulativeSum
) { [weak self] _, result, _ in
Task { @MainActor in
self?.stepCount = Int(result?.sumQuantity()?.doubleValue(for: .count()) ?? 0)
}
}
healthStore.execute(stepQuery)
}
}
// ARKit-Integration — nur nativ
import ARKit
import RealityKit
struct ARViewContainer: UIViewRepresentable {
func makeUIView(context: Context) -> ARView {
let arView = ARView(frame: .zero)
let config = ARWorldTrackingConfiguration()
config.planeDetection = [.horizontal, .vertical]
arView.session.run(config)
// Laden und Platzieren des 3D-Modells
let anchor = AnchorEntity(plane: .horizontal)
let box = ModelEntity(mesh: .generateBox(size: 0.1))
anchor.addChild(box)
arView.scene.addAnchor(anchor)
return arView
}
func updateUIView(_ uiView: ARView, context: Context) {}
}// Flutter - Zugriff auf Plattform-Features (Method Channel)
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
// Definition des Plattformkanals
const platform = MethodChannel('com.myapp/native');
class NativeFeatureService {
// HealthKit auf iOS, Health Connect auf Android
static Future<Map<String, dynamic>> getHealthData() async {
try {
final result = await platform.invokeMethod<Map>('getHealthData');
return Map<String, dynamic>.from(result ?? {});
} on PlatformException catch (e) {
debugPrint('HealthKit/Health-Connect-Fehler: ${e.message}');
return {};
}
}
// Geräteeigene biometrische Authentifizierung
static Future<bool> authenticateWithBiometrics() async {
try {
return await platform.invokeMethod<bool>('biometricAuth') ?? false;
} on PlatformException catch (e) {
debugPrint('Biometrischer Fehler: ${e.message}');
return false;
}
}
}
// Flutter-UI (auf beiden Plattformen identisch)
class HealthDashboard extends StatefulWidget {
const HealthDashboard({super.key});
@override
State<HealthDashboard> createState() => _HealthDashboardState();
}
class _HealthDashboardState extends State<HealthDashboard> {
Map<String, dynamic> healthData = {};
@override
void initState() {
super.initState();
loadHealthData();
}
Future<void> loadHealthData() async {
final data = await NativeFeatureService.getHealthData();
setState(() => healthData = data);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Gesundheitsübersicht')),
body: ListView(
children: [
_StatCard(label: 'Schrittzahl', value: '${healthData["steps"] ?? 0}'),
_StatCard(label: 'Kalorien', value: '${healthData["calories"] ?? 0} kcal'),
],
),
);
}
}Die Entscheidung hängt von Teamgröße, Budget und App-Komplexität ab. Kleines Team + begrenztes Budget + inhaltsorientierte App → Cross-Platform ist sinnvoll. Großes Team + tiefe Plattformintegration + performancekritisch → Native bevorzugen. Kotlin Multiplatform bietet einen guten Mittelweg, indem es die Businesslogik teilt und die UI nativ hält.
Kostenlose Beratung erhaltenKMP ist ein hybrider Ansatz: Businesslogik, Netzwerkschicht und Datenmodelle werden mit Kotlin geteilt, die UI wird auf jeder Plattform nativ geschrieben. Es kombiniert native Performance mit dem Vorteil der Codeteilung.