الدرس 13 · الوحدة 6: تطوير تطبيقات باستخدام Flutter

مقارنة عمليّة: React Native مقابل Flutter

الأداتان جنبًا إلى جنب: اقرأ، قارن، اختر بوعي. ⏱ نحو 40 دقيقة.

بعد هذا الدرس ستستطيع أن:

تبني الواجهة نفسها بـ RN و Flutter وتقارن الكودين.
تقرأ تنسيق Flutter (EdgeInsets, Color, decoration).
تختار الأداة المناسبة حسب الفريق والمشروع.

١نفس التطبيق بأداتين

أفضل طريقةٍ لفهم الفرق: نبني البطاقة نفسها بالأداتين. أولًا React Native — يعمل فعلًا هنا:

import { View, Text, StyleSheet } from 'react-native'; export default function App() {  return (    <View style={styles.card}>      <Text style={styles.name}>سعود الحربي</Text>      <Text style={styles.role}>مطوّر تطبيقات</Text>    </View>  );} const styles = StyleSheet.create({  card: { margin: 16, padding: 18, borderRadius: 14, backgroundColor: '#FFF3E0' },  name: { fontSize: 20, fontWeight: 'bold', color: '#E8820C' },  role: { marginTop: 6, color: '#555' },});

والآن نفس البطاقة بـ Flutter (معروضة للمقارنة):

Flutter · للعرض

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(18),
      decoration: BoxDecoration(
        color: const Color(0xFFFFF3E0),
        borderRadius: BorderRadius.circular(14),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('سعود الحربي',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold,
              color: Color(0xFFE8820C))),
          Padding(
            padding: EdgeInsets.only(top: 6),
            child: Text('مطوّر تطبيقات', style: TextStyle(color: Color(0xFF555555))),
          ),
        ],
      ),
    );
  }
}

٢قراءة الفروق

الجانب	React Native	Flutter
التنسيق	كائن StyleSheet مسطّح	خصائص متداخلة (`decoration, padding`…)
الهامش/الحشو	أرقام في الأنماط	`EdgeInsets.all / only`
اللون	`'#E8820C'` نصّ	`Color(0xFFE8820C)`
الإسهاب	أقصر عادةً	أكثر تصريحًا وتفصيلًا

كلاهما يصف الشجرة نفسها. React Native أقرب للويب وأقصر؛ Flutter أكثر صراحةً وتحكّمًا في الرسم.

٣متى أختار أيًّا؟

اختر React Native إذا…	اختر Flutter إذا…
فريقك يعرف `JavaScript/React`	تريد مظهرًا موحّدًا تمامًا عبر المنصّات
تريد مشاركة منطقٍ مع ويب React	تحتاج رسومًا/حركاتٍ مخصّصة عالية الأداء
تعتمد على نظام npm الواسع	يناسبك تعلّم Dart وأدوات Google

توقّع وتحقّق

اللون في Flutter يُكتب:

الحشو في Flutter:

أيّهما أقرب لمهارة React؟

القرار بين الأداتين يعتمد على:

الخلاصة

البطاقة نفسها: RN أقصر وأقرب للويب، Flutter أكثر تصريحًا.
اللون Color(0xFF…)، الحشو EdgeInsets، التنسيق متداخل في Flutter.
لا «أفضل» مطلق؛ القرار بحسب الفريق والمشروع.

تحدٍّ برمجي: ابنِ ما قرأته

متوسط

أمامك بطاقة Flutter أعلاه. اكتب بطاقةً مكافئة بـ React Native فيها عنوانٌ وسطرٌ فرعيّ.

المطلوب:

<Text testID="title"> نصّه «بطاقتي».
<Text testID="sub"> نصّه «من Flutter إلى RN».
ضعهما في View بخلفيّةٍ وحوافٍّ (StyleSheet).

👀 اعرض الناتج المطلوب (وجرّبه)

✓ التحقق الآلي من حلّك:

الكود يعمل بلا أخطاء في Console
العنوان
الفرعيّ
خلفيّة في الأنماط

💡 تلميح 1

Container ↔ View، decoration.color ↔ backgroundColor.

💡 تلميح 2

Column.children ↔ عناصر View.

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

import { View, Text, StyleSheet } from 'react-native'; export default function App() {  return (    <View style={styles.card}>      <Text testID="title" style={styles.t}>بطاقتي</Text>      <Text testID="sub" style={styles.s}>من Flutter إلى RN</Text>    </View>  );} const styles = StyleSheet.create({  card: { margin: 16, padding: 16, borderRadius: 12, backgroundColor: '#FFF3E0' },  t: { fontSize: 20, fontWeight: 'bold', color: '#E8820C' },  s: { marginTop: 6, color: '#555' },});

انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←

📝 معلم؟ أرسل ملاحظة للمؤلف عن هذا الدرس