Flutter vs React Native
نقارن Flutter من Google المبني على Dart مع React Native من Meta المبني على JavaScript/TypeScript من كل الجوانب. أي إطار عمل عابر للمنصات (cross-platform) يتصدر المشهد في 2025؟
تكامل عميق مع المنصة، أقصى أداء وأفضل تجربة مستخدم
قاعدة كود واحدة، منصتان — ميزة في السرعة والتكلفة
| الفئة | Native (Swift/Kotlin) | Cross-Platform (Flutter/RN) |
|---|---|---|
| الأداء | 10/10 | 8/10 |
| سهولة التعلّم | 6/10 | 8/10 |
| النظام البيئي | 10/10 | 8/10 |
| المجتمع | 9/10 | 9/10 |
| سوق العمل | 9/10 | 8/10 |
| الاستدامة المستقبلية | 9/10 | 8/10 |
// Swift (iOS) - تكامل HealthKit (ممكن فقط في native)
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
)
// عدد الخطوات
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 — حصري لـ native
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)
// تحميل نموذج ثلاثي الأبعاد ووضعه
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 - الوصول لميزة خاصة بالمنصة (Method Channel)
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
// تعريف قناة المنصة
const platform = MethodChannel('com.myapp/native');
class NativeFeatureService {
// HealthKit على iOS، Health Connect على 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: \${e.message}');
return {};
}
}
// التحقق البيومتري الخاص بالجهاز
static Future<bool> authenticateWithBiometrics() async {
try {
return await platform.invokeMethod<bool>('biometricAuth') ?? false;
} on PlatformException catch (e) {
debugPrint('خطأ في التحقق البيومتري: \${e.message}');
return false;
}
}
}
// واجهة Flutter (نفسها على كلا المنصتين)
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('ملخص الصحة')),
body: ListView(
children: [
_StatCard(label: 'عدد الخطوات', value: '\${healthData["steps"] ?? 0}'),
_StatCard(label: 'السعرات الحرارية', value: '\${healthData["calories"] ?? 0} kcal'),
],
),
);
}
}يعتمد القرار على حجم الفريق والميزانية وتعقيد التطبيق. فريق صغير + ميزانية محدودة + تطبيق يركز على المحتوى → التطوير عبر المنصات خيار منطقي. فريق كبير + عمق في المنصة + أداء حرج → يُفضّل التطوير الأصلي (Native). يوفّر Kotlin Multiplatform حلاً وسطًا جيدًا بين الاثنين، إذ يشارك منطق الأعمال مع الحفاظ على واجهة مستخدم native.
احصل على استشارة مجانيةيقدّم KMP نهجًا هجينًا: تُشارَك طبقة منطق الأعمال والشبكة ونماذج البيانات عبر Kotlin، بينما تُكتب واجهة المستخدم بشكل native لكل منصة. يجمع بذلك بين أداء native ومزايا مشاركة الكود.