Flutter vs React Native
نقارن Flutter من Google المبني على Dart مع React Native من Meta المبني على JavaScript/TypeScript من كل الجوانب. أي إطار عمل عابر للمنصات (cross-platform) يتصدر المشهد في 2025؟
طقم واجهة مستخدم واحد الشيفرة من Google، متعدد المنصات، مدعوم بـ Impeller
تطوّر Xamarin.Forms: أصلي (native) على Android/iOS/Windows/macOS على نفس BCL
هذا القرار يعتمد على مخزون الفريق أكثر من التفوق التقني. إذا كانت خلفيتك التقنية (backend) مبنية على .NET/Azure، فاختر .NET MAUI: مشاركة EF Core/Azure SDK على نفس BCL، ومنحنى تعلّم شبه معدوم، ووتيرة إصدار يمكن التنبؤ بها. أما في منتج يُعطي الأولوية للتصميم ويحتاج نظام حزم واسع، فاختر Flutter: مجتمع كبير، ومحرك Impeller الافتراضي على سطح المكتب، وآلية hot reload واحدة موحّدة. لاحظ أنه في MAUI تقع تعديلات C# ضمن .NET Hot Reload منفصلة (فقط عبر F5).
| الفئة | Flutter | .NET MAUI |
|---|---|---|
| الأداء | 8/10 | 7/10 |
| سهولة التعلّم | 7/10 | 6/10 |
| النظام البيئي | 9/10 | 6/10 |
| المجتمع | 9/10 | 5/10 |
| سوق العمل | 7/10 | 7/10 |
| الاستدامة المستقبلية | 9/10 | 7/10 |
// Dart - Flutter counter widget (StatefulWidget + يُختبر فورًا عبر hot reload)
import 'package:flutter/material.dart';
void main() => runApp(const CounterApp());
class CounterApp extends StatelessWidget {
const CounterApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter Demo',
theme: ThemeData(colorSchemeSeed: Colors.indigo, useMaterial3: true),
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _count = 0;
void _increment() {
setState(() => _count++);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter Counter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('You tapped this many times:'),
Text('$_count', style: Theme.of(context).textTheme.headlineMedium),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _increment,
child: const Icon(Icons.add),
),
);
}
}// C# - .NET MAUI MauiProgram.cs (dependency injection + إعداد الخطوط)
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Microsoft.Extensions.Logging;
namespace CounterDemo;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
// الخدمات على نفس الـ BCL: يمكن الرجوع إلى EF Core/Azure SDK هنا أيضًا
builder.Services.AddSingleton<MainPage>();
builder.Services.AddSingleton<CounterViewModel>();
#if DEBUG
builder.Logging.AddDebug();
#endif
return builder.Build();
}
}
// CounterViewModel.cs - لا يشمل XAML Hot Reload هذا الملف؛ تعديلات C#
// تُطبَّق عبر .NET Hot Reload (Visual Studio 2022، أثناء اتصال المصحّح بـ F5)
public partial class CounterViewModel : ObservableObject
{
[ObservableProperty]
private int count;
[RelayCommand]
private void Increment() => Count++;
}هذا القرار يعتمد على مخزون الفريق أكثر من التفوق التقني. إذا كانت خلفيتك التقنية (backend) مبنية على .NET/Azure، فاختر .NET MAUI: مشاركة EF Core/Azure SDK على نفس BCL، ومنحنى تعلّم شبه معدوم، ووتيرة إصدار يمكن التنبؤ بها. أما في منتج يُعطي الأولوية للتصميم ويحتاج نظام حزم واسع، فاختر Flutter: مجتمع كبير، ومحرك Impeller الافتراضي على سطح المكتب، وآلية hot reload واحدة موحّدة. لاحظ أنه في MAUI تقع تعديلات C# ضمن .NET Hot Reload منفصلة (فقط عبر F5).
احصل على استشارة مجانيةلا توجد إجابة قاطعة — الأمر يعتمد على مخزون الفريق. إذا كانت الخلفية التقنية .NET/Azure والفريق يعرف C#/EF Core بالفعل، فمشاركة الكود ومنحنى التعلّم شبه المعدوم في MAUI يمثلان ميزة. أما في مشروع موجّه للمستهلكين، يُعطي الأولوية للتصميم، أو يحتاج نظام حزم واسعًا من طرف ثالث، فيبرز نظام Flutter البيئي البالغ 179 ألف نجمة وجودة عرض Impeller على سطح المكتب.